一、ScrollBar
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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.
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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.
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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>