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>
相关文章推荐
- WPF 自定义图片剪切器 - 头像剪切(扩展与完善、实时截图)
- WPF界面设计技巧(5)—自定义列表项呈现内容
- WPF程序员自定义控库系列(三)——冷却按钮
- WPF自定义命令
- WPF整理-为控件添加自定义附加属性
- WPF自定义DataGrid分页控件
- WPF——自定义命令
- [WPF Bug清单]之(12)——与自定义Attached Property相关的Binding Path运行时错误
- 重写Windows基类,自定义WPF窗口,实现改回车键为TAB
- [WPF疑难] 继承自定义窗口
- WPF知识点--自定义Button(ControlTemplate控件模板)
- WPF 自定义柱状图 BarChart
- WPF自定义控件那些事(五)可模糊搜索的自定义组合列表框
- WPF整理-自定义一个扩展标记(custom markup extension)
- WPF ScrollViewer(滚动条) 自定义样式表制作 (改良+美化)
- WPF 自定义BarChartControl(可左右滑动的柱状图)(转)
- WPF 自定义CheckBox样式
- WPF 自定义的窗口拖动
- WPF 自定义窗口,自定义控件和样式