WPF - TABCONTROL STYLE (INSPIRED BY ANDROID)

Các trạng thái của TabControl
Tab1) normal
Tab2) focus (selected)
Tab3) tab (keyboard) focus
Tab4) disabled

Đến Mục lục Android UI

 

TabControl style

[code language="xml"]
<Style x:Key="TabControlStyle" TargetType="{x:Type TabControl}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TabPanel x:Name="HeaderPanel"
Grid.Row="0"
Panel.ZIndex="1"
Margin="0,0,4,-1"
IsItemsHost="True"
KeyboardNavigation.TabIndex="1"
Background="Transparent" />
<Border x:Name="Border"
Grid.Row="1"
BorderThickness="2"
CornerRadius="2"
KeyboardNavigation.TabNavigation="Local"
KeyboardNavigation.DirectionalNavigation="Contained"
KeyboardNavigation.TabIndex="2"
BorderBrush="LightGray">
<ContentPresenter x:Name="PART_SelectedContentHost" Margin="4" ContentSource="SelectedContent" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
[/code]

TabItem style

[code language="xml"]
<Style x:Key="TabItemStyle" TargetType="{x:Type TabItem}">
<Setter Property="FontSize" Value="12"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Foreground" Value="#FF474747"/>
<Setter Property="FocusVisualStyle" Value="{StaticResource dgFocusVisualStyte}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<ControlTemplate.Resources>
<Storyboard x:Key="StartAction">
<DoubleAnimation Storyboard.TargetName="Border1Highlited" Storyboard.TargetProperty="(UIElement.Opacity)" From="0" To="1" Duration="0:0:0.5"/>
<DoubleAnimation Storyboard.TargetName="Border2Highlited" Storyboard.TargetProperty="(UIElement.Opacity)" From="0" To="1" Duration="0:0:0.5"/>
</Storyboard>

<Storyboard x:Key="ExitAction">
<DoubleAnimation Storyboard.TargetName="Border1Highlited" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:0.3" />
<DoubleAnimation Storyboard.TargetName="Border2Highlited" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:0.3" />
</Storyboard>
</ControlTemplate.Resources>

<Grid x:Name="Root">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="1" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="6" />
<RowDefinition Height="2" />
</Grid.RowDefinitions>
<Border x:Name="Border" Margin="0,0,-1,0" Background="#ededed">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="30,10,30,4"
RecognizesAccessKey="True" />
</Border>
<Border Grid.Column="1" Margin="0,10,0,4" Background="#d6d6d6" />

<Border Grid.Row="1" Grid.ColumnSpan="2" Background="#ededed"/>
<Border Grid.Row="1" Grid.ColumnSpan="2" Name="Border1Highlited" Background="Transparent"/>

<Border Grid.Row="2" Grid.ColumnSpan="2" Background="#c9c9c9"/>
<Border Grid.Row="2" Grid.ColumnSpan="2" Name="Border2Highlited" Background="Transparent"/>

</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Panel.ZIndex" Value="100" />
<Setter TargetName="Border1Highlited" Property="Background" Value="#33b4ed" />
<Setter TargetName="Border2Highlited" Property="Background" Value="#009de2" />
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource StartAction}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource ExitAction}"/>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="#cccccc" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
[/code]

FocusVisual Style

[code language="xml"]
<Style x:Key="dgFocusVisualStyte" >
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Border x:Name="FocusStyle" Background="#4433b4ed" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
[/code]

Cách sử dụng

[code language="xml"]
<TabControl Style="{StaticResource TabControlStyle}" Margin="10">
<TabItem Style="{StaticResource TabItemStyle}" Header="Tab1">tab1</TabItem>
<TabItem Style="{StaticResource TabItemStyle}" Header="Tab2">tab2</TabItem>
<TabItem Style="{StaticResource TabItemStyle}" Header="Tab3">tab3</TabItem>
<TabItem Style="{StaticResource TabItemStyle}" Header="Tab4" IsEnabled="False">tab4</TabItem>
</TabControl>
[/code]

Kết quả


Đến Mục lục Android UI