WPF - TEXTBOX STYLE (INSPIRED BY ANDROID)

Các trạng thái của TextBox

a) disable

b) normal

c) focus


Đến Mục lục Android UI

TextBox style

[code language="xml"]
<Style TargetType="{x:Type TextBox}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Foreground" Value="#FF272727" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBoxBase}">
<Border Name="MainBorder" Background="Transparent" CornerRadius="2">
<Grid Margin="4" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>

<Border Name="BorderUnderline"
Padding="2"
Margin="0,0,-1,0"
BorderBrush="#808080"
BorderThickness="0,0,0,1">
<ScrollViewer Margin="0" x:Name="PART_ContentHost" />
</Border>
<Path Grid.Column="1"
Name="PathTriangle"
Data="M0,60 L20,60 20,40 z"
Fill="#808080"
Height="15"
Stretch="Fill" Width="15"
VerticalAlignment="Bottom"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="BorderUnderline" Property="BorderBrush" Value="#cccccc" />
<Setter TargetName="PathTriangle" Property="Fill" Value="#cccccc" />
<Setter Property="Foreground" Value="#cccccc" />
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="MainBorder" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
To="#55029cc7" Duration="0:0:0.3" />
<ColorAnimation Storyboard.TargetName="BorderUnderline" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
To="#029cc7" Duration="0:0:0.3" />
<ColorAnimation Storyboard.TargetName="PathTriangle" Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)"
To="#029cc7" Duration="0:0:0.3"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="MainBorder" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
To="Transparent" Duration="0:0:0.3" />
<ColorAnimation Storyboard.TargetName="BorderUnderline" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
To="#808080" Duration="0:0:0.3" />
<ColorAnimation Storyboard.TargetName="PathTriangle" Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)"
To="#808080" Duration="0:0:0.3"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
[/code]

Kết quả


Đến Mục lục Android UI

Read More

WPF - RADIOBUTTON STYLE (INSPIRED BY ANDROID)

Các trạng thái của RadioButton

a) normal

b) focused

c) indeterminate

d) checked

e) checked, disabled


Đến Mục lục Android UI

RadioButton style

[code language="xml"]
<Style x:Key="RadioButtonStyle" TargetType="RadioButton">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Height" Value="20" />
<Setter Property="Margin" Value="5" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<BulletDecorator>
<BulletDecorator.Bullet>
<Grid Height="{TemplateBinding Height}" Width="{Binding RelativeSource={RelativeSource Self}, Path=Height, UpdateSourceTrigger=PropertyChanged}"
MinHeight="20" MinWidth="20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="3*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Ellipse Name="EllipseMain"
Grid.Column="0" Grid.ColumnSpan="3"
Grid.Row="0" Grid.RowSpan="3"
Fill="Transparent"
StrokeThickness="{TemplateBinding BorderThickness}"
Stroke="DimGray" />
<Ellipse Name="CheckMark"
Grid.Column="1"
Grid.Row="1"
Opacity="0"
Fill="#029cc7" />
</Grid>
</BulletDecorator.Bullet>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimation Storyboard.TargetName="CheckMark" Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)"
To="LightGray" Duration="0:0:0.3" />
<ColorAnimation Storyboard.TargetName="EllipseMain" Storyboard.TargetProperty="(Ellipse.Stroke).(SolidColorBrush.Color)"
To="LightGray" Duration="0:0:0.3" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="CheckMark" Storyboard.TargetProperty="Opacity"
To="1" Duration="0:0:0.3" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked" >
<Storyboard>
<DoubleAnimation Storyboard.TargetName="CheckMark" Storyboard.TargetProperty="Opacity"
To="0" Duration="0:0:0.3" />
</Storyboard>
</VisualState>
<VisualState x:Name="Indeterminate" >
<Storyboard>
<DoubleAnimation Storyboard.TargetName="CheckMark" Storyboard.TargetProperty="Opacity"
To="1" Duration="0:0:0.3" />
<ColorAnimation Storyboard.TargetName="CheckMark" Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)"
To="Gray" Duration="0:0:0.3" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter Margin="4,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
RecognizesAccessKey="True" />
</BulletDecorator>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="EllipseMain" Property="Fill" Value="#55029cc7" />
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="EllipseMain" Property="Stroke" Value="#88029cc7" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
[/code]

Cách dùng

[code language="xml"]
<!-- Bạn có thể thoải mái tùy chỉnh kích thước -->
<RadioButton Style="{StaticResource RadioButtonStyle}" Content="" Height="30" />
[/code]

Kết quả

Đến Mục lục Android UI

Read More

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

Read More

WPF - SLIDER STYLE (INSPIRED BY ANDROID)

Các trạng thái của Slider
Slider normal
Slider when onMouseOver
Slider when disable
Slider tab focus

 

Các thành phần của Slider 
Đến Mục lục Android UI

• TickBar

• Track

Slider style

[code language="xml"]
<Style x:Key="SliderStyle" TargetType="{x:Type Slider}">
<Setter Property="FocusVisualStyle" Value="{StaticResource dgFocusVisualStyte}" />
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Style.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="MinWidth" Value="104" />
<Setter Property="MinHeight" Value="21" />
<Setter Property="Template" Value="{StaticResource HorizontalSlider}" />
</Trigger>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="MinWidth" Value="21" />
<Setter Property="MinHeight" Value="104" />
<Setter Property="Template" Value="{StaticResource VerticalSlider}" />
</Trigger>
</Style.Triggers>
</Style>
[/code]

Vertical slider template

[code language="xml"]
<ControlTemplate x:Key="VerticalSlider" TargetType="{x:Type Slider}">
<Grid Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" MinWidth="{TemplateBinding MinWidth}"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TickBar x:Name="TopTick" Visibility="Collapsed" Fill="LightGray" Placement="Left" SnapsToDevicePixels="True"
Width="4" Margin="0,0,2,0" />
<Border x:Name="TrackBackground"
Grid.Column="1"
Margin="0,10"
BorderThickness="2"
BorderBrush="LightGray"
HorizontalAlignment="Center" Width="4" />
<Track x:Name="PART_Track" Grid.Column="1">
<Track.DecreaseRepeatButton>
<RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource SliderRepeatButtonStyle}" />
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource SliderRepeatButtonStyle}"/>
</Track.IncreaseRepeatButton>
<Track.Thumb>
<Thumb x:Name="Thumb" Style="{StaticResource SliderThumbStyle}" />
</Track.Thumb>
</Track>
<TickBar x:Name="BottomTick" Grid.Column="2" Visibility="Collapsed" Fill="LightGray" Placement="Right"
Width="4" Margin="2,0,0,0" SnapsToDevicePixels="True" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="TickPlacement" Value="TopLeft">
<Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="TickPlacement" Value="BottomRight">
<Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="TickPlacement" Value="Both">
<Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
<Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
[/code]

Horizontal slider template

[code language="xml"]
<ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type Slider}">
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TickBar x:Name="TopTick" Visibility="Collapsed" Fill="LightGray" Placement="Top" SnapsToDevicePixels="True"
Height="4" Margin="0,0,0,2" />
<Border x:Name="TrackBackground"
Grid.Row="1"
Margin="10,0"
BorderThickness="2"
BorderBrush="LightGray"
VerticalAlignment="Center" Height="4" />
<Track x:Name="PART_Track" Grid.Row="1">
<Track.DecreaseRepeatButton>
<RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource SliderRepeatButtonStyle}" />
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource SliderRepeatButtonStyle}"/>
</Track.IncreaseRepeatButton>
<Track.Thumb>
<Thumb x:Name="Thumb" Style="{StaticResource SliderThumbStyle}" />
</Track.Thumb>
</Track>
<TickBar x:Name="BottomTick" Grid.Row="2" Visibility="Collapsed" Fill="LightGray" Placement="Bottom"
SnapsToDevicePixels="True" Height="4" Margin="0,2,0,0"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="TickPlacement" Value="TopLeft">
<Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="TickPlacement" Value="BottomRight">
<Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="TickPlacement" Value="Both">
<Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
<Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
[/code]

RepeatButton style

[code language="xml"]
<Style x:Key="SliderRepeatButtonStyle" TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Rectangle Fill="Transparent"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
[/code]

Thumb style

[code language="xml"]
<Style x:Key="SliderThumbStyle" TargetType="{x:Type Thumb}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Grid>
<Border Name="outerBorder"
Background="#5534b4e3"
BorderBrush="#5534b4e3"
Height="26" Width="26" Opacity="1" BorderThickness="2" CornerRadius="13"/>
<Border Name="innerBorder"
Background="#FF34b4e3"
BorderBrush="#FF34b4e3"
Height="10" Width="10" CornerRadius="5" Opacity="1" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="outerBorder" Property="BorderBrush" Value="#BB34b4e3" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="outerBorder" Property="Background" Value="#55ACACAC" />
<Setter TargetName="outerBorder" Property="BorderBrush" Value="#55ACACAC" />
<Setter TargetName="innerBorder" Property="Width" Value="4" />
<Setter TargetName="innerBorder" Property="Height" Value="4" />
<Setter TargetName="innerBorder" Property="CornerRadius" Value="2" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
[/code]

Focus visual style

[code language="xml"]
<Style x:Key="dgFocusVisualStyte" >
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle x:Name="FocusStyle" StrokeDashArray="4 4" RadiusX="5" RadiusY="5" Fill="Transparent"
Stroke="#99029cc7" StrokeThickness="1" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
[/code]

Kết quả

Đến Mục lục Android UI

Read More

WPF - TOGGLEBUTTON STYLE (INSPIRED BY ANDROID)

Các trạng thái của ToggleButton:

a) checked; b) unchecked; c) indeterminate; d) disable; e) Tab focus



Đến Mục lục Android UI
ToggleButton style: được gọi dùng ở Control

[code language="xml"]
<Style x:Key="ToggleButtonStyle" TargetType="ToggleButton">
<Setter Property="Background" Value="#d9d9d9"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="BorderBrush" Value="#d9d9d9" />
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="FocusVisualStyle" Value="{StaticResource dgFocusVisualStyte}" />
<Setter Property="FontSize" Value="13" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30*" />
<ColumnDefinition Width="30*" />
<ColumnDefinition Width="30*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30*" />
<RowDefinition Height="2*" />
<RowDefinition Height="2*" />
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ShapeOn" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.3" />
<DoubleAnimation Storyboard.TargetName="ShapeOff" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.3" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ShapeOff" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.3" />
<DoubleAnimation Storyboard.TargetName="ShapeOn" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.3" />
</Storyboard>
</VisualState>
<VisualState x:Name="Indeterminate">
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<Border Grid.ColumnSpan="3"
BorderThickness="2"
BorderBrush="{TemplateBinding Background}"
Background="{TemplateBinding Background}"/>

<Path x:Name="ShapeOff"
Grid.Column="0" Grid.ColumnSpan="2"
Data="M0,0 L60,0 30,30 0,30 z"
Stretch="Fill"
Fill="#c2c2c2" HorizontalAlignment="Left" />
<Path x:Name="ShapeOn"
Grid.Column="1" Grid.ColumnSpan="2"
Data="M0,0 L30,0 30,30 -30,30 z"
Stretch="Fill"
Fill="#38abcf" HorizontalAlignment="Right" />

<Border Name="BorderLeftDown"
Grid.Row="2" Grid.Column="0"
Background="{TemplateBinding BorderBrush}"
Opacity="{Binding ElementName=ShapeOff, Path=Opacity}"/>

<Border Name="BorderRightDown"
Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2"
Background="{TemplateBinding BorderBrush}"
Opacity="{Binding ElementName=ShapeOn, Path=Opacity}"/>

<TextBlock Text="ON" Grid.Column="2"
Name="TextBlockOn"
FontWeight="Bold"
Foreground="{TemplateBinding Foreground}"
VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,0,5,0"
Opacity="{Binding ElementName=ShapeOn, Path=Opacity}"/>

<TextBlock Text="OFF" Grid.Column="0"
Name="TextBlockOff"
FontWeight="Bold"
Foreground="{TemplateBinding Foreground}"
VerticalAlignment="Center" HorizontalAlignment="Center" Margin="5,0,0,0"
Opacity="{Binding ElementName=ShapeOff, Path=Opacity}"/>

</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="#d9d9d9" />
<Setter TargetName="ShapeOn" Property="Fill" Value="#c2c2c2" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
[/code]

FocusVisualStyle: được gọi dùng ở Style trên

[code language="xml"]
Style x:Key="dgFocusVisualStyte" >
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30*" />
<RowDefinition Height="2*" />
<RowDefinition Height="2*" />
</Grid.RowDefinitions>
<Border BorderThickness="2" BorderBrush="#38abcf" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
[/code]

Kết quả


Đến Mục lục Android UI

Read More