An example of a header template used in a tab control, it’s toward the bottom of this code:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" xmlns:Primitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls"
x:Class="ModernTabControl.MainPage">
<UserControl.Resources>
<Style TargetType="sdk:TabItem">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Background" Value="#FFFAFAFA"/>
<Setter Property="BorderBrush" Value="#FFEEEEEE"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="6,2,6,2"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Width" Value="90"/>
<Setter Property="Height" Value="40"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="sdk:TabItem">
<Grid x:Name="Root">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
<VisualTransition GeneratedDuration="0:0:0.1" To="MouseOver"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="HeaderLeftUnselected" Storyboard.TargetProperty="Opacity" From="0.4" To="1" Duration="0:0:0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled" />
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused" />
<VisualState x:Name="Unfocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="TemplateLeftSelected" Visibility="Collapsed" Canvas.ZIndex="1">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="2,2,0,2" Background="{TemplateBinding Background}" CornerRadius="6,0,0,6" Margin="-2,-2,0,-2">
<Border BorderBrush="#FFFFFFFF" BorderThickness="2" CornerRadius="2,2,0,2">
<Grid>
<Rectangle Fill="#FFFFFFFF" Margin="0, -2, -4, -2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<ContentControl x:Name="HeaderLeftSelected"
Cursor="{TemplateBinding Cursor}"
Foreground="{TemplateBinding Foreground}"
FontSize="{TemplateBinding FontSize}"
HorizontalAlignment="Stretch"
IsTabStop="False"
VerticalAlignment="Stretch"/>
</Grid>
</Border>
</Border>
<Border x:Name="FocusVisualLeft" BorderBrush="#FF6DBDD1" BorderThickness="1,1,0,1" CornerRadius="3,0,0,3" IsHitTestVisible="false" Margin="-2,-2,0,-2" Visibility="Collapsed"/>
<Border x:Name="DisabledVisualLeftSelected" Background="#8CFFFFFF" CornerRadius="3,0,0,3" IsHitTestVisible="false" Margin="-2,-2,0,-2" Opacity="0"/>
</Grid>
<Grid x:Name="TemplateLeftUnselected" Visibility="Collapsed">
<Grid x:Name="GradientLeft">
<ContentControl x:Name="HeaderLeftUnselected"
Cursor="{TemplateBinding Cursor}"
Foreground="{TemplateBinding Foreground}"
FontSize="{TemplateBinding FontSize}"
Opacity="0.4"
HorizontalAlignment="Stretch"
IsTabStop="False"
VerticalAlignment="Stretch"/>
</Grid>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="sdk:TabControl">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Background" Value="#FFFFFFFF" />
<Setter Property="BorderBrush" Value="#FFEEEEEE" />
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="Padding" Value="5"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="sdk:TabControl">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="DisabledVisualLeft">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="TemplateLeft" Visibility="Collapsed">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Primitives:TabPanel x:Name="TabPanelLeft" Margin="2,2,-1,2" Canvas.ZIndex="1"/>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="1" CornerRadius="0,3,3,0" MinWidth="10" MinHeight="10">
<ContentPresenter x:Name="ContentLeft" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
</Border>
<Border x:Name="DisabledVisualLeft" Background="#8CFFFFFF" Grid.Column="1" CornerRadius="0,3,3,0" IsHitTestVisible="False" Opacity="0" Canvas.ZIndex="1"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="TextBlock">
<Setter Property="FontFamily" Value="Segoe UI"/>
<Setter Property="FontSize" Value="13" />
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="#FFFAFAFA">
<sdk:TabControl HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
TabStripPlacement="Left"
Margin="20"
SelectedItem="{Binding SelectedProductGroup}">
<sdk:TabControl.Resources>
<DataTemplate x:Key="TabHeaderTemplate">
<Grid>
<Rectangle Fill="#00FFFFFF" Width="135" Height="70"/>
<TextBlock Text="{Binding .}" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>
</DataTemplate>
</sdk:TabControl.Resources>
<sdk:TabItem HeaderTemplate="{StaticResource TabHeaderTemplate}" Header="Overview">
</sdk:TabItem>
<sdk:TabItem HeaderTemplate="{StaticResource TabHeaderTemplate}" Header="Equities">
</sdk:TabItem>
<sdk:TabItem HeaderTemplate="{StaticResource TabHeaderTemplate}" Header="FX">
</sdk:TabItem>
<sdk:TabItem HeaderTemplate="{StaticResource TabHeaderTemplate}" Header="FX Flow">
</sdk:TabItem>
</sdk:TabControl>
</Grid>
</UserControl>
No comments:
Post a Comment