Modified togglebutton style
This commit is contained in:
NaBian committed
1 parent
b144c2ec39
commit
8477771161
3 files changed
+97
-123
No files matched your search
@@ -2,12 +2,12 @@
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:po="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options">
|
||||
|
||||
<Color x:Key="MaterialDesignShadow">#AA000000</Color>
|
||||
<Color x:Key="EffectShadowColor">#AA000000</Color>
|
||||
|
||||
<DropShadowEffect x:Key="EffectShadow1" BlurRadius="5" ShadowDepth="1" Direction="270" Color="{StaticResource MaterialDesignShadow}" Opacity=".2" RenderingBias="Performance" po:Freeze="True" />
|
||||
<DropShadowEffect x:Key="EffectShadow2" BlurRadius="8" ShadowDepth="1.5" Direction="270" Color="{StaticResource MaterialDesignShadow}" Opacity=".2" RenderingBias="Performance" po:Freeze="True" />
|
||||
<DropShadowEffect x:Key="EffectShadow3" BlurRadius="14" ShadowDepth="4.5" Direction="270" Color="{StaticResource MaterialDesignShadow}" Opacity=".2" RenderingBias="Performance" po:Freeze="True" />
|
||||
<DropShadowEffect x:Key="EffectShadow4" BlurRadius="25" ShadowDepth="8" Direction="270" Color="{StaticResource MaterialDesignShadow}" Opacity=".2" RenderingBias="Performance" po:Freeze="True" />
|
||||
<DropShadowEffect x:Key="EffectShadow5" BlurRadius="35" ShadowDepth="13" Direction="270" Color="{StaticResource MaterialDesignShadow}" Opacity=".2" RenderingBias="Performance" po:Freeze="True" />
|
||||
<DropShadowEffect x:Key="EffectShadow1" BlurRadius="5" ShadowDepth="1" Direction="270" Color="{StaticResource EffectShadowColor}" Opacity=".2" RenderingBias="Performance" po:Freeze="True" />
|
||||
<DropShadowEffect x:Key="EffectShadow2" BlurRadius="8" ShadowDepth="1.5" Direction="270" Color="{StaticResource EffectShadowColor}" Opacity=".2" RenderingBias="Performance" po:Freeze="True" />
|
||||
<DropShadowEffect x:Key="EffectShadow3" BlurRadius="14" ShadowDepth="4.5" Direction="270" Color="{StaticResource EffectShadowColor}" Opacity=".2" RenderingBias="Performance" po:Freeze="True" />
|
||||
<DropShadowEffect x:Key="EffectShadow4" BlurRadius="25" ShadowDepth="8" Direction="270" Color="{StaticResource EffectShadowColor}" Opacity=".2" RenderingBias="Performance" po:Freeze="True" />
|
||||
<DropShadowEffect x:Key="EffectShadow5" BlurRadius="35" ShadowDepth="13" Direction="270" Color="{StaticResource EffectShadowColor}" Opacity=".2" RenderingBias="Performance" po:Freeze="True" />
|
||||
|
||||
</ResourceDictionary>
|
||||
@@ -4,6 +4,7 @@
|
||||
|
||||
<ResourceDictionary.MergedDictionaries>
|
||||
<ResourceDictionary Source="ButtonBaseBaseStyle.xaml"/>
|
||||
<ResourceDictionary Source="../../Basic/Effects.xaml"/>
|
||||
</ResourceDictionary.MergedDictionaries>
|
||||
|
||||
<Style x:Key="ToggleButtonBaseStyle" BasedOn="{StaticResource ButtonBaseBaseStyle}" TargetType="{x:Type ToggleButton}">
|
||||
@@ -50,137 +51,110 @@
|
||||
</Style.Triggers>
|
||||
</Style>
|
||||
|
||||
<!--引用自https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit-->
|
||||
<Style x:Key="ToggleButtonSwitchBaseStyle" TargetType="{x:Type ToggleButton}">
|
||||
<Style x:Key="ToggleButtonSwitchBaseStyle" TargetType="ToggleButton">
|
||||
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
|
||||
<Setter Property="Background" Value="White"/>
|
||||
<Setter Property="BorderBrush" Value="{DynamicResource BorderBrush}"/>
|
||||
<Setter Property="Foreground" Value="{DynamicResource PrimaryTextBrush}"/>
|
||||
<Setter Property="Background" Value="{DynamicResource PrimaryBrush}"/>
|
||||
<Setter Property="BorderThickness" Value="1"/>
|
||||
<Setter Property="Padding" Value="0 1 0 0"/>
|
||||
<Setter Property="BorderThickness" Value="0"/>
|
||||
<Setter Property="VerticalContentAlignment" Value="Center"/>
|
||||
<Setter Property="Padding" Value="6,0,0,0"/>
|
||||
<Setter Property="Template">
|
||||
<Setter.Value>
|
||||
<ControlTemplate TargetType="{x:Type ToggleButton}">
|
||||
<ControlTemplate.Resources>
|
||||
<SineEase x:Key="RippleEasingFunction" EasingMode="EaseInOut"/>
|
||||
<Storyboard x:Key="ShowRipple">
|
||||
<DoubleAnimation Storyboard.TargetName="RippleThumb" Storyboard.TargetProperty="Opacity"
|
||||
EasingFunction="{StaticResource RippleEasingFunction}"
|
||||
To="0.26" Duration="0"/>
|
||||
<DoubleAnimation Storyboard.TargetName="RippleThumb" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
|
||||
EasingFunction="{StaticResource RippleEasingFunction}"
|
||||
From="1" To="2.5" Duration="0:0:0.2"/>
|
||||
<DoubleAnimation Storyboard.TargetName="RippleThumb" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
|
||||
EasingFunction="{StaticResource RippleEasingFunction}"
|
||||
From="1" To="2.5" Duration="0:0:0.2"/>
|
||||
<Storyboard x:Key="StoryboardChecked">
|
||||
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)" Storyboard.TargetName="thumb">
|
||||
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="14">
|
||||
<EasingDoubleKeyFrame.EasingFunction>
|
||||
<PowerEase EasingMode="EaseOut"/>
|
||||
</EasingDoubleKeyFrame.EasingFunction>
|
||||
</EasingDoubleKeyFrame>
|
||||
</DoubleAnimationUsingKeyFrames>
|
||||
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="lightBorder">
|
||||
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
|
||||
</DoubleAnimationUsingKeyFrames>
|
||||
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="innerBorder">
|
||||
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0">
|
||||
<EasingDoubleKeyFrame.EasingFunction>
|
||||
<PowerEase EasingMode="EaseOut"/>
|
||||
</EasingDoubleKeyFrame.EasingFunction>
|
||||
</EasingDoubleKeyFrame>
|
||||
</DoubleAnimationUsingKeyFrames>
|
||||
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="innerBorder">
|
||||
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0">
|
||||
<EasingDoubleKeyFrame.EasingFunction>
|
||||
<PowerEase EasingMode="EaseOut"/>
|
||||
</EasingDoubleKeyFrame.EasingFunction>
|
||||
</EasingDoubleKeyFrame>
|
||||
</DoubleAnimationUsingKeyFrames>
|
||||
</Storyboard>
|
||||
<Storyboard x:Key="HideRipple">
|
||||
<DoubleAnimation Storyboard.TargetName="RippleThumb" Storyboard.TargetProperty="Opacity"
|
||||
EasingFunction="{StaticResource RippleEasingFunction}"
|
||||
To="0" Duration="0:0:0.3"/>
|
||||
<Storyboard x:Key="StoryboardUnChecked">
|
||||
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)" Storyboard.TargetName="thumb">
|
||||
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0">
|
||||
<EasingDoubleKeyFrame.EasingFunction>
|
||||
<PowerEase EasingMode="EaseOut"/>
|
||||
</EasingDoubleKeyFrame.EasingFunction>
|
||||
</EasingDoubleKeyFrame>
|
||||
</DoubleAnimationUsingKeyFrames>
|
||||
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="lightBorder">
|
||||
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
|
||||
</DoubleAnimationUsingKeyFrames>
|
||||
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="innerBorder">
|
||||
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1">
|
||||
<EasingDoubleKeyFrame.EasingFunction>
|
||||
<PowerEase EasingMode="EaseOut"/>
|
||||
</EasingDoubleKeyFrame.EasingFunction>
|
||||
</EasingDoubleKeyFrame>
|
||||
</DoubleAnimationUsingKeyFrames>
|
||||
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="innerBorder">
|
||||
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1">
|
||||
<EasingDoubleKeyFrame.EasingFunction>
|
||||
<PowerEase EasingMode="EaseOut"/>
|
||||
</EasingDoubleKeyFrame.EasingFunction>
|
||||
</EasingDoubleKeyFrame>
|
||||
</DoubleAnimationUsingKeyFrames>
|
||||
</Storyboard>
|
||||
</ControlTemplate.Resources>
|
||||
<Viewbox Width="34">
|
||||
<VisualStateManager.VisualStateGroups>
|
||||
<VisualStateGroup x:Name="CheckStates">
|
||||
<VisualStateGroup.Transitions>
|
||||
<VisualTransition From="*" To="Checked">
|
||||
<Storyboard>
|
||||
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ThumbHolder">
|
||||
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
|
||||
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="23.5">
|
||||
<EasingDoubleKeyFrame.EasingFunction>
|
||||
<QuadraticEase EasingMode="EaseOut"/>
|
||||
</EasingDoubleKeyFrame.EasingFunction>
|
||||
</EasingDoubleKeyFrame>
|
||||
</DoubleAnimationUsingKeyFrames>
|
||||
</Storyboard>
|
||||
</VisualTransition>
|
||||
<VisualTransition From="Checked" To="Unchecked">
|
||||
<Storyboard>
|
||||
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ThumbHolder">
|
||||
<EasingDoubleKeyFrame KeyTime="0" Value="23.5"/>
|
||||
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0">
|
||||
<EasingDoubleKeyFrame.EasingFunction>
|
||||
<QuadraticEase EasingMode="EaseOut"/>
|
||||
</EasingDoubleKeyFrame.EasingFunction>
|
||||
</EasingDoubleKeyFrame>
|
||||
</DoubleAnimationUsingKeyFrames>
|
||||
</Storyboard>
|
||||
</VisualTransition>
|
||||
</VisualStateGroup.Transitions>
|
||||
<VisualState x:Name="Checked">
|
||||
<Storyboard>
|
||||
<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ThumbHolder"
|
||||
Duration="0" To="23.5" />
|
||||
</Storyboard>
|
||||
</VisualState>
|
||||
<VisualState x:Name="Unchecked">
|
||||
<Storyboard>
|
||||
<DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ThumbHolder"
|
||||
Duration="0" To="0" />
|
||||
</Storyboard>
|
||||
</VisualState>
|
||||
</VisualStateGroup>
|
||||
</VisualStateManager.VisualStateGroups>
|
||||
<Grid>
|
||||
<Rectangle x:Name="Track" Fill="Black" HorizontalAlignment="Left" Height="15" Margin="4.211,5,4.211,0" Stroke="{x:Null}" VerticalAlignment="Top" Width="40" RadiusY="7.5" RadiusX="7.5" Opacity="0.26"/>
|
||||
|
||||
<Grid x:Name="ThumbHolder"
|
||||
HorizontalAlignment="Left" VerticalAlignment="Top">
|
||||
<Ellipse x:Name="RippleThumb"
|
||||
Fill="{DynamicResource PrimaryBrush}"
|
||||
Height="25" Width="25"
|
||||
IsHitTestVisible="False"
|
||||
Opacity="0.26"
|
||||
Margin="0"
|
||||
HorizontalAlignment="Center" VerticalAlignment="Center"
|
||||
RenderTransformOrigin="0.5,0.5">
|
||||
<Ellipse.RenderTransform>
|
||||
<ScaleTransform ScaleX="1" ScaleY="1"/>
|
||||
</Ellipse.RenderTransform>
|
||||
</Ellipse>
|
||||
<AdornerDecorator>
|
||||
<Ellipse x:Name="Thumb"
|
||||
Fill="#FFFAFAFA" Stroke="{x:Null}"
|
||||
HorizontalAlignment="Center" VerticalAlignment="Center"
|
||||
Width="25" Height="25"
|
||||
Margin="0,0,0,0"
|
||||
RenderTransformOrigin="0.5,0.5"
|
||||
Effect="{DynamicResource EffectShadow1}">
|
||||
</Ellipse>
|
||||
</AdornerDecorator>
|
||||
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"
|
||||
Margin="{TemplateBinding Padding}"
|
||||
x:Name="ContentPresenter"
|
||||
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
|
||||
FlowDirection="LeftToRight"/>
|
||||
<Grid.RenderTransform>
|
||||
<TranslateTransform X="0" Y="0"/>
|
||||
</Grid.RenderTransform>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Viewbox>
|
||||
<Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="Auto"/>
|
||||
<ColumnDefinition Width="*"/>
|
||||
</Grid.ColumnDefinitions>
|
||||
<Border Height="22" Width="36" x:Name="backBorder" Background="{DynamicResource BorderBrush}" CornerRadius="11"/>
|
||||
<Border Grid.Column="0" Height="22" Width="36" x:Name="lightBorder" Background="{DynamicResource PrimaryBrush}" CornerRadius="11" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
|
||||
<Border Grid.Column="0" Margin="1" Background="White" CornerRadius="11" Name="innerBorder" RenderTransformOrigin=".8,0.5">
|
||||
<Border.RenderTransform>
|
||||
<TransformGroup>
|
||||
<ScaleTransform/>
|
||||
</TransformGroup>
|
||||
</Border.RenderTransform>
|
||||
</Border>
|
||||
<Canvas Grid.Column="0" Margin="1">
|
||||
<Border CornerRadius="10" Name="thumb" Effect="{StaticResource EffectShadow2}" Background="White" Width="20" Height="20" RenderTransformOrigin="0.5,0.5">
|
||||
<Border.RenderTransform>
|
||||
<TransformGroup>
|
||||
<TranslateTransform/>
|
||||
</TransformGroup>
|
||||
</Border.RenderTransform>
|
||||
</Border>
|
||||
</Canvas>
|
||||
<ContentPresenter x:Name="contentPresenter" Visibility="Collapsed" Grid.Column="1" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
|
||||
</Grid>
|
||||
<ControlTemplate.Triggers>
|
||||
<Trigger Property="IsChecked" Value="True">
|
||||
<Setter TargetName="Thumb" Property="Fill" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}" />
|
||||
<Setter TargetName="Track" Property="Fill" Value="{DynamicResource PrimaryBrush}" />
|
||||
<Setter Property="Foreground" Value="{DynamicResource SecondaryTextBrush}"/>
|
||||
<Trigger Property="HasContent" Value="true">
|
||||
<Setter Property="Visibility" TargetName="contentPresenter" Value="Visible"/>
|
||||
</Trigger>
|
||||
<Trigger Property="IsChecked" Value="False">
|
||||
<Setter Property="Foreground" Value="{DynamicResource PrimaryBrush}"/>
|
||||
</Trigger>
|
||||
<Trigger Property="Button.IsDefaulted" Value="true"/>
|
||||
<Trigger Property="IsMouseOver" Value="true"/>
|
||||
<Trigger Property="IsPressed" Value="true">
|
||||
<Trigger Property="IsChecked" Value="true">
|
||||
<Trigger.EnterActions>
|
||||
<BeginStoryboard Storyboard="{StaticResource ShowRipple}"/>
|
||||
<BeginStoryboard Storyboard="{StaticResource StoryboardChecked}"/>
|
||||
</Trigger.EnterActions>
|
||||
<Trigger.ExitActions>
|
||||
<BeginStoryboard Storyboard="{StaticResource HideRipple}"/>
|
||||
<BeginStoryboard Storyboard="{StaticResource StoryboardUnChecked}"/>
|
||||
</Trigger.ExitActions>
|
||||
</Trigger>
|
||||
<Trigger Property="IsEnabled" Value="false">
|
||||
<Setter Property="Opacity" Value="0.4" />
|
||||
<Trigger Property="IsEnabled" Value="False">
|
||||
<Setter Property="Opacity" Value="0.4"/>
|
||||
</Trigger>
|
||||
</ControlTemplate.Triggers>
|
||||
</ControlTemplate>
|
||||
|
||||
@@ -100,8 +100,8 @@
|
||||
<TextBlock TextTrimming="CharacterEllipsis" TextWrapping="Wrap" Style="{StaticResource TextBlockDefault}" Text="ToggleButtonCustom"/>
|
||||
</StackPanel>
|
||||
<StackPanel>
|
||||
<ToggleButton Height="30" IsChecked="True" Margin="5" Style="{StaticResource ToggleButtonSwitch}"/>
|
||||
<ToggleButton IsEnabled="False" Height="30" IsChecked="True" Margin="5" Style="{StaticResource ToggleButtonSwitch}"/>
|
||||
<ToggleButton IsChecked="True" Margin="5,9" HorizontalAlignment="Center" Style="{StaticResource ToggleButtonSwitch}"/>
|
||||
<ToggleButton IsEnabled="False" IsChecked="True" HorizontalAlignment="Center" Margin="5,9" Style="{StaticResource ToggleButtonSwitch}"/>
|
||||
<TextBlock Style="{StaticResource TextBlockDefault}" Text="ToggleButtonSwitch"/>
|
||||
</StackPanel>
|
||||
</WrapPanel>
|
||||
|
||||
Reference in new issue
Block a user