结合一个小窗体程序,将涉及到的 WPF部分 样式整理如下:
WPF中样式使用
1. DataGrid
1.1 标题居中
<!--标题居中-->
<Style TargetType="DataGridColumnHeader">
<Setter Property="HorizontalContentAlignment" Value="Center"></Setter>
<Setter Property="Background" Value="DarkBlue" ></Setter>
<Setter Property="Foreground" Value="Yellow"></Setter>
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="#FF38EAED" />
<Setter Property="MinWidth" Value="50"/>
</Style>
1.2 内容居中
1.2.1 模板列DataGridTemplateColumn的内容居中
<DataGridTemplateColumn Header="联赛" Width="12">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBlock Text="{Binding Path=LeagueName}"></TextBlock>
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
1.2.2 DataGridTextColumn/DataGridHyperlinkColumn列的内容居中
对于DataGridTextColumn来说,就是一个包含了TextBlock的DataGridTemplateColumn
<!--居中DataGridTextColumn DataGridTextColumn ElementStyle="{StaticResource CenterAlignmentStyle}" -->
<Style x:Key="CenterAlignmentStyle" TargetType="TextBlock">
<Setter Property="TextAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
Xaml代码中
<DataGridTextColumn ElementStyle="{StaticResource CenterAlignmentStyle}" Header="联赛" Binding="{Binding LeagueName}" Width="80"/>
<DataGridHyperlinkColumn ElementStyle="{StaticResource CenterAlignmentStyle}" Header="分析链接" Binding="{Binding LinkText}" TargetName="{Binding Link}" Width="60"/>
1.3 DataGrid隔行换色
<DataGrid ItemsSource="{Binding RaceList}" AlternationCount="2">
...
</DataGrid >
<!--背景色改变必须先设置cellStyle 因为cellStyle会覆盖rowStyle样式-->
<Style TargetType="DataGridRow">
<Setter Property="Background" Value="#F2F2F2" />
<Setter Property="Height" Value="25"/>
<Setter Property="Foreground" Value="Black" />
<Setter Property="HorizontalAlignment" Value="Center"/>
<Style.Triggers>
<!--隔行换色-->
<Trigger Property="AlternationIndex" Value="0" >
<Setter Property="Background" Value="#FFF7F1F1" />
</Trigger>
<Trigger Property="AlternationIndex" Value="1" >
<Setter Property="Background" Value="LightBlue" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="LightPink"/>
<Setter Property="Foreground" Value="Red"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="Black"/>
</Trigger>
</Style.Triggers>
</Style>
1.4 DataGrid小数保留2位
<DataGridTextColumn ElementStyle="{StaticResource CenterAlignmentStyle}" Header="胜" Binding="{Binding Win, StringFormat={}{0:F2}}"/>
2. Button
2.1 透明
<Button Command="{Binding CatCommand}" Width="200" Margin="5" Height="30" Content="采集">
<Button.OpacityMask>
<LinearGradientBrush StartPoint="0,70" EndPoint="3,0">
<GradientStop Offset="0" Color="Black"/>
<GradientStop Offset="1" Color="Transparent"/>
</LinearGradientBrush>
</Button.OpacityMask>
</Button>
2.2 图片按钮
<Button Command="{Binding CatCommand}" Margin="3" Grid.Row="1" HorizontalAlignment="Left" Height="30">
<StackPanel Margin="1" Orientation="Horizontal" >
<Image Source="/QT_XiaoBaiYang;component/Resource/down.png" Stretch="UniformToFill" />
<TextBlock Text="采集" Margin="10 2 10 2" VerticalAlignment="Center"/>
</StackPanel>
</Button>
2.3 使用Button 样式
2.3.1 使用Button 样式1
<!--Button Style-->
<Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Rectangle x:Name="Rect1"
Stroke="BlanchedAlmond" Fill="#FFB5D1A8"
StrokeMiterLimit="1.000000" StrokeThickness="1.500000" RadiusX="10" RadiusY="10"/>
<ContentPresenter x:Name="ContentPresenter"
HorizontalAlignment="Center"
VerticalAlignment="Center"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
RecognizesAccessKey="True"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Fill" TargetName="Rect1">
<Setter.Value>
<SolidColorBrush Color="#FF881E07"></SolidColorBrush>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="White"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
2.3.2 使用Button 样式2
<!--Button Style-->
<Style x:Key="ButtonFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="3" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<LinearGradientBrush x:Key="ButtonNormalBackgroundFill" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#FFF0F0EA" Offset="0.9"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ButtonBorder" Color="#FF003C74"/>
<Style x:Key="MouseButtonStyle" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
<Setter Property="Background" Value="{StaticResource ButtonNormalBackgroundFill}"/>
<Setter Property="BorderBrush" Value="{StaticResource ButtonBorder}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border CornerRadius="6" BorderBrush="IndianRed" BorderThickness="1">
<Button BorderBrush="{x:Null}" Background="{x:Null}" >
<ContentPresenter
Margin="{TemplateBinding Margin}"
SnapsToDevicePixels="{Binding SnapsToDevicePixels}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
</Button>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="Blue" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Button Content="采集" Style="{DynamicResource MouseButtonStyle}"/>
2.3.3 使用Button 样式3
<Style x:Key="btnStyle" TargetType="Button">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Offset="0" Color="White"/>
<GradientStop Offset="0.5" Color="#FF554D4A"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="FontStyle" Value="Italic"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Width" Value="60"/>
<Setter Property="Foreground" Value="Gold"/>
<Style.Triggers>
<Trigger Property="Button.IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Black"/>
</Trigger>
</Style.Triggers>
</Style>
2.4 无边框 Button
实现无边框的Button,虽然自定义Templet做到这一点,但更简单的实现。
<Button Content="Borderless Button" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
也可以使用 BorderBrush=”{x:Null}” Background=”{x:Null}”来使Button看起来是没有边框,但存在的问题是:
1. 这个时候的无边框效果是和主题相关的,如果在Window Classic主题下,确实是没有边框的,但是如果在WindowXP主题下,依然会有边框阴影区域显示出来。
2. 即使仅仅在Window Classic主题下,点击Button依然会产生凹陷效果的阴影边框。
<DataGrid Hyperlink.Click="Grid_Click" >
private void Grid_Click(object sender, RoutedEventArgs e)
{
if (grid.SelectedItem == null)
return;
Info info = (Info)grid.SelectedItem;
System.Diagnostics.Process.Start(info.Link); //打开文件
}
3.1 文本下划线样式
<!--TextBlock Underline style-->
<Style x:Key="HyperlinkStyle" TargetType="TextBlock">
<Setter Property="Foreground" Value="Blue" />
<Setter Property="TextDecorations" Value="Underline" />
<Setter Property="TextAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>