您的位置:首页 > Web前端 > CSS

WPF 自定义ToggleButton样式

2013-12-19 16:10 906 查看
废话不多说!

样式显示如图



源代码奉上:

<LinearGradientBrush x:Key="ButtonNormalBackgroundFill" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#FFF0F0EA" Offset="0.9"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ButtonBorder" Color="#FF003C74"/>
<Style x:Key="ToggleButtonStyle1" TargetType="{x:Type ToggleButton}">
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Background" Value="{StaticResource ButtonNormalBackgroundFill}"/>
<Setter Property="BorderBrush" Value="{StaticResource ButtonBorder}"/>
<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}">
<ControlTemplate.Resources>
<Storyboard x:Key="OnChecked1">
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="path">
<EasingThicknessKeyFrame KeyTime="0:0:0.5" Value="40,0,0,0"/>
</ThicknessAnimationUsingKeyFrames>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="path1">
<EasingThicknessKeyFrame KeyTime="0:0:0.5" Value="40,0,0,0"/>
</ThicknessAnimationUsingKeyFrames>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="path2">
<EasingThicknessKeyFrame KeyTime="0:0:0.5" Value="40,0,0,0"/>
</ThicknessAnimationUsingKeyFrames>
<StringAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Text)" Storyboard.TargetName="displayText">
<DiscreteStringKeyFrame KeyTime="0" Value="OFF"/>
</StringAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="OnUnchecked1">
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="path">
<EasingThicknessKeyFrame KeyTime="0" Value="40,0,0,0"/>
<EasingThicknessKeyFrame KeyTime="0:0:0.5" Value="0"/>
</ThicknessAnimationUsingKeyFrames>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="path1">
<EasingThicknessKeyFrame KeyTime="0" Value="40,0,0,0"/>
<EasingThicknessKeyFrame KeyTime="0:0:0.5" Value="0"/>
</ThicknessAnimationUsingKeyFrames>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="path2">
<EasingThicknessKeyFrame KeyTime="0" Value="40,0,0,0"/>
<EasingThicknessKeyFrame KeyTime="0:0:0.5" Value="0"/>
</ThicknessAnimationUsingKeyFrames>
<StringAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Text)" Storyboard.TargetName="displayText">
<DiscreteStringKeyFrame KeyTime="0" Value="ON"/>
</StringAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="displayText">
<EasingColorKeyFrame KeyTime="0" Value="White"/>
<EasingColorKeyFrame KeyTime="0:0:0.5" Value="#FF63FA00"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Border CornerRadius="10" Background="#FF3B3939" Width="60" Height="20">
<Grid>
<TextBlock x:Name="displayText" Text="ON" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
<Path x:Name="path2" Fill="Black">
<Path.Data>
<GeometryGroup>
<GeometryGroup.Children>
<EllipseGeometry Center="10,10" RadiusX="8.5" RadiusY="8.5"></EllipseGeometry>
</GeometryGroup.Children>
</GeometryGroup>
</Path.Data>
</Path>
<Path x:Name="path1" Fill="#FF818080">
<Path.Data>
<GeometryGroup>
<GeometryGroup.Children>
<EllipseGeometry Center="10,10" RadiusX="7" RadiusY="7"></EllipseGeometry>
</GeometryGroup.Children>
</GeometryGroup>
</Path.Data>
</Path>
<Path x:Name="path">
<Path.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF807F7F" Offset="0"/>
<GradientStop Color="#FF373636" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
<Path.Data>
<GeometryGroup>
<GeometryGroup.Children>
<EllipseGeometry Center="10,10" RadiusX="8" RadiusY="8"></EllipseGeometry>
</GeometryGroup.Children>
</GeometryGroup>
</Path.Data>
</Path>
</Grid>
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="ToggleButton.Checked">
<BeginStoryboard Storyboard="{StaticResource OnChecked1}"/>
</EventTrigger>
<EventTrigger RoutedEvent="ToggleButton.Unchecked">
<BeginStoryboard x:Name="OnUnchecked1_BeginStoryboard" Storyboard="{StaticResource OnUnchecked1}"/>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: