[WPF 知识总结系列] —— 基本控件的简单样式集合

一、ScrollBar

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <SolidColorBrush x:Key="StandardBrush" Color="LightGray" />
    <SolidColorBrush x:Key="PressedBrush" Color="DimGray" />
    <SolidColorBrush x:Key="HoverBrush" Color="DimGray" />
    <SolidColorBrush x:Key="GlyphBrush" Color="#333333" />

    <Style x:Key="LineUpButtonStyle" TargetType="{x:Type RepeatButton}">
        <Setter Property="Focusable" Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Grid Height="18" Margin="1">
                        <Path Name="Path"
                              HorizontalAlignment="Center"
                              VerticalAlignment="Center"
                              Data="M 4 0 L 8 8 L 0 8 Z"
                              Fill="{StaticResource StandardBrush}"
                              Stretch="None" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="Path" Property="Fill" Value="{StaticResource HoverBrush}" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter TargetName="Path" Property="Fill" Value="{StaticResource PressedBrush}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="LineDownButtonStyle" TargetType="{x:Type RepeatButton}">
        <Setter Property="Focusable" Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Grid Height="18" Margin="1">
                        <Path Name="Path"
                              HorizontalAlignment="Center"
                              VerticalAlignment="Center"
                              Data="M 0 0 L 4 8 L 8 0 Z"
                              Fill="{StaticResource StandardBrush}"
                              Stretch="None" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="Path" Property="Fill" Value="{StaticResource HoverBrush}" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter TargetName="Path" Property="Fill" Value="{StaticResource PressedBrush}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="LineLeftButtonStyle" TargetType="{x:Type RepeatButton}">
        <Setter Property="Focusable" Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Grid Width="18" Margin="1">
                        <Path Name="Path"
                              HorizontalAlignment="Center"
                              VerticalAlignment="Center"
                              Data="M 0 4 L 8 8 L 8 0 Z"
                              Fill="{StaticResource StandardBrush}"
                              Stretch="None" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="Path" Property="Fill" Value="{StaticResource HoverBrush}" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter TargetName="Path" Property="Fill" Value="{StaticResource PressedBrush}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="LineRightButtonStyle" TargetType="{x:Type RepeatButton}">
        <Setter Property="Focusable" Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Grid Width="18" Margin="1">
                        <Path Name="Path"
                              HorizontalAlignment="Center"
                              VerticalAlignment="Center"
                              Data="M 0 0 L 0 8 L 8 4 Z"
                              Fill="{StaticResource StandardBrush}"
                              Stretch="None" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter TargetName="Path" Property="Fill" Value="{StaticResource HoverBrush}" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter TargetName="Path" Property="Fill" Value="{StaticResource PressedBrush}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="ScrollBarPageButtonStyle" TargetType="{x:Type RepeatButton}">
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="Focusable" Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Border Background="Transparent" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="VerticalScrollBarThumbStyle" TargetType="{x:Type Thumb}">
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="Focusable" Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle x:Name="ThumbRectangle"
                               Width="8"
                               Fill="{StaticResource StandardBrush}"
                               RadiusX="4"
                               RadiusY="4" />
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="ThumbRectangle" Property="Fill" Value="{StaticResource HoverBrush}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="HorizontalScrollBarThumbStyle" TargetType="{x:Type Thumb}">
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="Focusable" Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle x:Name="ThumbRectangle"
                               Height="8"
                               Fill="{StaticResource StandardBrush}"
                               RadiusX="4"
                               RadiusY="4" />
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="ThumbRectangle" Property="Fill" Value="{StaticResource HoverBrush}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <ControlTemplate x:Key="VerticalScrollBarTemplate" TargetType="ScrollBar">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition MaxHeight="18" />
                <RowDefinition Height="*" />
                <RowDefinition MaxHeight="18" />
            </Grid.RowDefinitions>

            <RepeatButton Command="{x:Static ScrollBar.LineUpCommand}" Style="{StaticResource LineUpButtonStyle}" />
            <Border Grid.Row="1">
                <Track Name="PART_Track" IsDirectionReversed="True">
                    <Track.DecreaseRepeatButton>
                        <RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Style="{StaticResource ScrollBarPageButtonStyle}" />
                    </Track.DecreaseRepeatButton>
                    <Track.IncreaseRepeatButton>
                        <RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Style="{StaticResource ScrollBarPageButtonStyle}" />
                    </Track.IncreaseRepeatButton>
                    <Track.Thumb>
                        <Thumb Style="{StaticResource VerticalScrollBarThumbStyle}" />
                    </Track.Thumb>
                </Track>
            </Border>
            <RepeatButton Grid.Row="2"
                          Command="{x:Static ScrollBar.LineDownCommand}"
                          Style="{StaticResource LineDownButtonStyle}" />
        </Grid>
    </ControlTemplate>

    <ControlTemplate x:Key="HorizontalScrollBarTemplate" TargetType="ScrollBar">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="18" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="18" />
            </Grid.ColumnDefinitions>
            <RepeatButton Command="{x:Static ScrollBar.LineLeftCommand}" Style="{StaticResource LineLeftButtonStyle}" />

            <Border Grid.Column="1">
                <Track Name="PART_Track" IsDirectionReversed="True">
                    <Track.DecreaseRepeatButton>
                        <RepeatButton Command="{x:Static ScrollBar.PageLeftCommand}" Style="{StaticResource ScrollBarPageButtonStyle}" />
                    </Track.DecreaseRepeatButton>
                    <Track.Thumb>
                        <Thumb Style="{StaticResource HorizontalScrollBarThumbStyle}" />
                    </Track.Thumb>
                    <Track.IncreaseRepeatButton>
                        <RepeatButton Command="{x:Static ScrollBar.PageRightCommand}" Style="{StaticResource ScrollBarPageButtonStyle}" />
                    </Track.IncreaseRepeatButton>
                </Track>
            </Border>

            <RepeatButton Grid.Column="2"
                          Command="{x:Static ScrollBar.LineRightCommand}"
                          Style="{StaticResource LineRightButtonStyle}" />
        </Grid>
    </ControlTemplate>

    <Style TargetType="ScrollBar">
        <Setter Property="Background" Value="Red" />
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Vertical">
                <Setter Property="Template" Value="{StaticResource VerticalScrollBarTemplate}" />
            </Trigger>
            <Trigger Property="Orientation" Value="Horizontal">
                <Setter Property="Template" Value="{StaticResource HorizontalScrollBarTemplate}" />
            </Trigger>
        </Style.Triggers>
    </Style>

</ResourceDictionary>

二、TextButton

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions">
    <Style x:Key="TextButtonStyle" TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>                        
                        <ContentControl x:Name="contentControl"
                         Content="{TemplateBinding Content}"
                          Cursor="Hand"    >
                        </ContentControl>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Foreground" TargetName="contentControl" Value="#FF8AB936"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="RenderTransform" TargetName="contentControl">
                                <Setter.Value>
                                        <TranslateTransform X="1" Y="1"/>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="Cursor" Value="Hand"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

三、PathButton1

You must set the button content with a path. But you can't change it's color.

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="PathButtonStyle" TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid Background="#00000000" Cursor="Hand">                        
                        <ContentControl x:Name="contentControl"
                            Content="{TemplateBinding Content}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Foreground" TargetName="contentControl" Value="#FF8AB936"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="RenderTransform" TargetName="contentControl">
                                <Setter.Value>
                                    <TranslateTransform X="1" Y="1"/>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="Cursor" Value="Hand"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

四、PathButton

Make it as a Custom Control.

五、ImageButton

Simple way to implement an imageButton, but you also need to set a Image into the button.

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="ImageButtonStyle" TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid x:Name="grid">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <ContentPresenter RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        <TextBlock Text="{TemplateBinding Tag}" VerticalAlignment="Center" Grid.Row="1" HorizontalAlignment="Center"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" TargetName="grid" Value="#FF42B892"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="RenderTransform" TargetName="grid">
                                <Setter.Value>
                                    <TransformGroup>
                                        <TranslateTransform X="1" Y="1"/>
                                    </TransformGroup>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

六、ListBox

    <Style x:Key="StatusListBoxItemStyle" TargetType="{x:Type ListBoxItem}">
        <Setter Property="Background" Value="{StaticResource StatusBackground}" />
        <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
        <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
        <Setter Property="Padding" Value="2,0,0,0" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBoxItem}">
                    <Border x:Name="Bd"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Padding="{TemplateBinding Padding}"
                            SnapsToDevicePixels="true">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                    </Border>
                        <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="true">
                        <Setter TargetName="Bd" Property="Background" Value="{DynamicResource Background}" />
                        <Setter Property="Foreground" Value="{DynamicResource SelectedItemForeground}" />
                        </Trigger>
                        <MultiTrigger>
                        <MultiTrigger.Conditions>
                        <Condition Property="IsSelected" Value="true" />
                        <Condition Property="Selector.IsSelectionActive" Value="false" />
                        </MultiTrigger.Conditions>
                        <Setter TargetName="Bd" Property="Background" Value="{DynamicResource SelectedItemDeactiveBackground}" />
                        <Setter Property="Foreground" Value="{DynamicResource SelectedItemDeactiveForeground}" />
                        </MultiTrigger>
                        <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                        </Trigger>
                        </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>