WPF ToggleButton自定義樣式
阿新 • • 發佈：2019-02-02
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Luna" mc:Ignorable="d" x:Class="WpfAppButton.MainWindow" x:Name="Window" Title="MainWindow" Width="272.5" Height="275" Background="#FFA1B4B6"> <Window.Resources> <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> <Style x:Key="myExpandButtonStyle" TargetType="{x:Type ToggleButton}"> <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/> <Setter Property="Background" Value="{StaticResource ButtonNormalBackgroundFill}"/> <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 ToggleButton}"> <Grid x:Name="grid" RenderTransformOrigin="0.5,0.5"> <Grid.RenderTransform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform/> <TranslateTransform/> </TransformGroup> </Grid.RenderTransform> <Rectangle Fill="#FF40BE48" Stroke="{x:Null}" StrokeThickness="0" Opacity="0" Margin="4.684,3.979,6.378,5.834" RadiusY="0" Height="Auto" VerticalAlignment="Stretch"/> <Path x:Name="path" Data="M5.8980706,13.542352 L15.316946,5.1993148 24.897892,13.618299 20.877304,13.646207 15.248735,8.7229148 9.5104679,13.611588 z" Height="11.438" Margin="4.672,3.979,6.39,0" Stretch="Fill" VerticalAlignment="Top" StrokeThickness="0" Opacity="0.995" Stroke="#FF18ED7D" Fill="#FF0FA33A" HorizontalAlignment="Center" Width="23.212"/> <Path x:Name="path2" Data="M5.8980706,13.542352 L15.316946,5.1993148 24.897892,13.618299 20.877304,13.646207 15.248735,8.7229148 9.5104679,13.611588 z" Height="Auto" Margin="4.684,14.083,6.354,6.98" Stretch="Fill" VerticalAlignment="Stretch" StrokeThickness="0" Opacity="0.995" Stroke="#FF18ED7D" Fill="#FF0FA33A" HorizontalAlignment="Stretch" Width="Auto"/> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Fill" TargetName="path" Value="#FF0FDA25"/> <Setter Property="Fill" TargetName="path2" Value="#FF0FDA25"/> </Trigger> <Trigger Property="IsKeyboardFocused" Value="true"/> <Trigger Property="ToggleButton.IsChecked" Value="true"> <Setter Property="RenderTransform" TargetName="grid"> <Setter.Value> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform Angle="180"/> <TranslateTransform/> </TransformGroup> </Setter.Value> </Setter> </Trigger> <Trigger Property="IsEnabled" Value="false"> <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> <Grid x:Name="LayoutRoot"> <ToggleButton Name="toggle" Focusable="False" Content="expand" HorizontalAlignment="Left" Height="32.501" Margin="50.333,154.333,0,0" VerticalAlignment="Top" Width="34.25" Style="{DynamicResource myExpandButtonStyle}" BorderBrush="{x:Null}" RenderTransformOrigin="0.5,0.5"> <ToggleButton.RenderTransform> <TransformGroup> <ScaleTransform ScaleX="0.6" ScaleY="0.6"/> <SkewTransform/> <RotateTransform/> <TranslateTransform/> </TransformGroup> </ToggleButton.RenderTransform> </ToggleButton> </Grid> </Window>