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