用wpf设计一个宠物之家登录界面:
在window.resource中添加控制模板:
//关闭按钮
<ControlTemplate TargetType="Button" x:Key="CloseButtonTemplate">
<Border Background="Transparent" Name="back">
<Path Data="M0 0 12 12M0 12 12 0" Stroke="White" StrokeThickness="1" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="back" Property="Background" Value="#22FFFFFF"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="back" Property="Background" Value="#44FFFFFF"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
//登录按钮控制面板
<ControlTemplate TargetType="Button" x:Key="LoginButtonTemplate">
<Border Background="LightPink" Width="310" Height="30" CornerRadius="5">
<ContentControl Content="{TemplateBinding Content}"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Foreground="{TemplateBinding Foreground}"/>
</Border>
</ControlTemplate>
//用户名文本框模板
x:Key="UserNameTextBoxStyle" BasedOn="{StaticResource InputElementBaseStyle}" TargetType="{x:Type TextBox}">
<Setter Property="CaretBrush" Value="{DynamicResource PrimaryTextBrush}"/>
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
<Setter Property="AllowDrop" Value="true"/>
<Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<hc:SimplePanel x:Name="root">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{Binding (hc:BorderElement.CornerRadius), RelativeSource={RelativeSource Mode=TemplatedParent}}" SnapsToDevicePixels="True"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="" FontFamily="../Assets/Fonts/#iconfont"
FontSize="30" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="#DDD"/>
<ScrollViewer x:Name="PART_ContentHost" Grid.Column="1"
Focusable="false"
ScrollViewer.HorizontalScrollBarVisibility="Hidden"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
VerticalContentAlignment="Center"
MinHeight="20"/>
</Grid>
</hc:SimplePanel>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" TargetName="root" Value="0.4"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" Value="{DynamicResource SecondaryBorderBrush}"/>
</Trigger>
<Trigger Property="IsFocused" Value="true">
<Setter Property="BorderBrush" Value="{DynamicResource PrimaryBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style
插入iconfont图标,在鼠标悬浮时显示不同颜色:
<UniformGrid Columns="5" Grid.Row="1">
<UniformGrid.Resources>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="Gray"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="FontFamily" Value="../Assets/Fonts/#iconfont"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="LightPink"/>
</Trigger>
</Style.Triggers>
</Style>
</UniformGrid.Resources>
<TextBlock Text="" FontSize="40" HorizontalAlignment="Right" />
<Border/>
<TextBlock Text="" FontSize="45" HorizontalAlignment="Center"/>
<Border/>
<TextBlock Text="" FontSize="40" HorizontalAlignment="Left" />
</UniformGrid>