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

时间：2023-03-09 08:57:17
[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>