wpf ToggleButton自定义样式

最新推荐文章于 2024-09-02 22:00:11 发布

qq_23234933

最新推荐文章于 2024-09-02 22:00:11 发布

阅读量1.9k

点赞数 1

分类专栏： wpf 文章标签： wpf ToggleButton自定义样式

原文链接：https://blog.csdn.net/anjingyatou/article/details/17417207

版权

wpf 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

今天在开发的过程中由于会用到wpf的ToggleButton来控制开关，于是在度娘寻觅终得一位佳人分享。

<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>

我把它链接分享给大家吧。原文链接：https://blog.csdn.net/anjingyatou/article/details/17417207