style source file

本文介绍了一种自定义进度条样式的实现方法,包括如何设置进度条的各种属性以及使用动画来实现不同状态间的过渡效果。此外,还提供了一个具体的XAML样式示例,展示了如何通过XAML代码创建一个带有动画效果的进度条。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

this is the style for the ProgressBar:

<Style x:Key="CustomProgressBarStyle" TargetType="ProgressBar">
			<Setter Property="Foreground" Value="{StaticResource ProgressBarForegroundThemeBrush}"/>
			<Setter Property="Background" Value="{StaticResource ProgressBarBackgroundThemeBrush}"/>
			<Setter Property="BorderBrush" Value="{StaticResource ProgressBarBorderThemeBrush}"/>
			<Setter Property="BorderThickness" Value="{StaticResource ProgressBarBorderThemeThickness}"/>
			<Setter Property="Maximum" Value="100"/>
			<Setter Property="MinHeight" Value="{StaticResource ProgressBarThemeMinHeight}"/>
			<Setter Property="IsTabStop" Value="False"/>
			<Setter Property="VerticalAlignment" Value="Center"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="ProgressBar">
						<Grid>
							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="CommonStates">
									<VisualStateGroup.Transitions>
										<VisualTransition From="Updating" To="Determinate">
											<Storyboard>
												<RepositionThemeAnimation FromHorizontalOffset="{Binding TemplateSettings.IndicatorLengthDelta, RelativeSource={RelativeSource Mode=TemplatedParent}}" TargetName="ProgressBarIndicator"/>
											</Storyboard>
										</VisualTransition>
										<VisualTransition From="Paused" To="Determinate">
											<Storyboard>
												<DoubleAnimation Duration="0:0:0.25" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ProgressBarIndicator"/>
											</Storyboard>
										</VisualTransition>
										<VisualTransition From="Indeterminate">
											<Storyboard>
												<FadeInThemeAnimation TargetName="EllipseGrid"/>
											</Storyboard>
										</VisualTransition>
									</VisualStateGroup.Transitions>
									<VisualState x:Name="Determinate"/>
									<VisualState x:Name="Updating"/>
									<VisualState x:Name="Indeterminate">
										<Storyboard RepeatBehavior="Forever">
											<DoubleAnimation Duration="0:0:3.917" From="{Binding TemplateSettings.ContainerAnimationStartPosition, RelativeSource={RelativeSource Mode=TemplatedParent}}" To="{Binding TemplateSettings.ContainerAnimationEndPosition, RelativeSource={RelativeSource Mode=TemplatedParent}}" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="EllipseGrid"/>
											<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="E1">
												<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
												<SplineDoubleKeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:1" Value="{Binding TemplateSettings.EllipseAnimationWellPosition, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
												<EasingDoubleKeyFrame KeyTime="0:0:2" Value="{Binding TemplateSettings.EllipseAnimationWellPosition, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
												<SplineDoubleKeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:3" Value="{Binding TemplateSettings.EllipseAnimationEndPosition, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
											</DoubleAnimationUsingKeyFrames>
											<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="E2">
												<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
												<EasingDoubleKeyFrame KeyTime="0:0:0.167" Value="0"/>
												<SplineDoubleKeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:1.167" Value="{Binding TemplateSettings.EllipseAnimationWellPosition, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
												<EasingDoubleKeyFrame KeyTime="0:0:2.167" Value="{Binding TemplateSettings.EllipseAnimationWellPosition, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
												<SplineDoubleKeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:3.167" Value="{Binding TemplateSettings.EllipseAnimationEndPosition, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
											</DoubleAnimationUsingKeyFrames>
											<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="E3">
												<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
												<EasingDoubleKeyFrame KeyTime="0:0:0.333" Value="0"/>
												<SplineDoubleKeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:1.333" Value="{Binding TemplateSettings.EllipseAnimationWellPosition, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
												<EasingDoubleKeyFrame KeyTime="0:0:2.333" Value="{Binding TemplateSettings.EllipseAnimationWellPosition, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
												<SplineDoubleKeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:3.333" Value="{Binding TemplateSettings.EllipseAnimationEndPosition, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
											</DoubleAnimationUsingKeyFrames>
											<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="E4">
												<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
												<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
												<SplineDoubleKeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:1.5" Value="{Binding TemplateSettings.EllipseAnimationWellPosition, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
												<EasingDoubleKeyFrame KeyTime="0:0:2.5" Value="{Binding TemplateSettings.EllipseAnimationWellPosition, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
												<SplineDoubleKeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:3.5" Value="{Binding TemplateSettings.EllipseAnimationEndPosition, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
											</DoubleAnimationUsingKeyFrames>
											<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="E5">
												<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
												<EasingDoubleKeyFrame KeyTime="0:0:0.667" Value="0"/>
												<SplineDoubleKeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:1.667" Value="{Binding TemplateSettings.EllipseAnimationWellPosition, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
												<EasingDoubleKeyFrame KeyTime="0:0:2.667" Value="{Binding TemplateSettings.EllipseAnimationWellPosition, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
												<SplineDoubleKeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:3.667" Value="{Binding TemplateSettings.EllipseAnimationEndPosition, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
											</DoubleAnimationUsingKeyFrames>
											<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="B1">
												<EasingDoubleKeyFrame KeyTime="0" Value="-50"/>
												<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
												<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
												<EasingDoubleKeyFrame KeyTime="0:0:3" Value="100"/>
											</DoubleAnimationUsingKeyFrames>
											<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="B2">
												<EasingDoubleKeyFrame KeyTime="0" Value="-50"/>
												<EasingDoubleKeyFrame KeyTime="0:0:0.667" Value="0"/>
												<EasingDoubleKeyFrame KeyTime="0:0:2.167" Value="0"/>
												<EasingDoubleKeyFrame KeyTime="0:0:3.167" Value="100"/>
											</DoubleAnimationUsingKeyFrames>
											<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="B3">
												<EasingDoubleKeyFrame KeyTime="0" Value="-50"/>
												<EasingDoubleKeyFrame KeyTime="0:0:0.833" Value="0"/>
												<EasingDoubleKeyFrame KeyTime="0:0:2.333" Value="0"/>
												<EasingDoubleKeyFrame KeyTime="0:0:3.333" Value="100"/>
											</DoubleAnimationUsingKeyFrames>
											<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="B4">
												<EasingDoubleKeyFrame KeyTime="0" Value="-50"/>
												<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
												<EasingDoubleKeyFrame KeyTime="0:0:2.5" Value="0"/>
												<EasingDoubleKeyFrame KeyTime="0:0:3.5" Value="100"/>
											</DoubleAnimationUsingKeyFrames>
											<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="B5">
												<EasingDoubleKeyFrame KeyTime="0" Value="-50"/>
												<EasingDoubleKeyFrame KeyTime="0:0:1.167" Value="0"/>
												<EasingDoubleKeyFrame KeyTime="0:0:2.667" Value="0"/>
												<EasingDoubleKeyFrame KeyTime="0:0:3.667" Value="100"/>
											</DoubleAnimationUsingKeyFrames>
											<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="EllipseGrid"/>
											<!--
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="E1">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ProgressBarIndeterminateForegroundThemeBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="E2">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ProgressBarIndeterminateForegroundThemeBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="E3">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ProgressBarIndeterminateForegroundThemeBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="E4">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ProgressBarIndeterminateForegroundThemeBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="E5">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ProgressBarIndeterminateForegroundThemeBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											-->
											<FadeOutThemeAnimation TargetName="DeterminateRoot"/>
											<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DeterminateRoot"/>
											<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="E1">
												<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
												<EasingDoubleKeyFrame KeyTime="0:0:3" Value="1"/>
												<EasingDoubleKeyFrame KeyTime="0:0:3" Value="0"/>
											</DoubleAnimationUsingKeyFrames>
											<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="E2">
												<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
												<EasingDoubleKeyFrame KeyTime="0:0:0.167" Value="0"/>
												<EasingDoubleKeyFrame KeyTime="0:0:0.167" Value="1"/>
												<EasingDoubleKeyFrame KeyTime="0:0:3.167" Value="1"/>
												<EasingDoubleKeyFrame KeyTime="0:0:3.167" Value="0"/>
											</DoubleAnimationUsingKeyFrames>
											<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="E3">
												<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
												<EasingDoubleKeyFrame KeyTime="0:0:0.333" Value="0"/>
												<EasingDoubleKeyFrame KeyTime="0:0:0.333" Value="1"/>
												<EasingDoubleKeyFrame KeyTime="0:0:3.333" Value="1"/>
												<EasingDoubleKeyFrame KeyTime="0:0:3.333" Value="0"/>
											</DoubleAnimationUsingKeyFrames>
											<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="E4">
												<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
												<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
												<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
												<EasingDoubleKeyFrame KeyTime="0:0:3.5" Value="1"/>
												<EasingDoubleKeyFrame KeyTime="0:0:3.5" Value="0"/>
											</DoubleAnimationUsingKeyFrames>
											<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="E5">
												<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
												<EasingDoubleKeyFrame KeyTime="0:0:0.667" Value="0"/>
												<EasingDoubleKeyFrame KeyTime="0:0:0.667" Value="1"/>
												<EasingDoubleKeyFrame KeyTime="0:0:3.667" Value="1"/>
												<EasingDoubleKeyFrame KeyTime="0:0:3.667" Value="0"/>
											</DoubleAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Error">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ProgressBarIndicator">
												<DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Paused">
										<Storyboard>
											<DoubleAnimation Duration="0:0:0.25" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ProgressBarIndicator"/>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
							<Grid x:Name="EllipseGrid" Opacity="0">
								<Grid.ColumnDefinitions>
									<ColumnDefinition Width="Auto"/>
									<ColumnDefinition Width="Auto"/>
									<ColumnDefinition Width="Auto"/>
									<ColumnDefinition Width="Auto"/>
									<ColumnDefinition Width="Auto"/>
									<ColumnDefinition Width="Auto"/>
									<ColumnDefinition Width="Auto"/>
									<ColumnDefinition Width="Auto"/>
									<ColumnDefinition Width="Auto"/>
								</Grid.ColumnDefinitions>
								<Grid.RenderTransform>
									<TranslateTransform/>
								</Grid.RenderTransform>
								<Border x:Name="B1" Grid.Column="8" RenderTransformOrigin="0.5,0.5">
									<Border.RenderTransform>
										<TranslateTransform/>
									</Border.RenderTransform>
									<Ellipse x:Name="E1" Fill="{TemplateBinding Foreground}" Height="{Binding TemplateSettings.EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}" RenderTransformOrigin="0.5,0.5" Width="{Binding TemplateSettings.EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}">
										<Ellipse.RenderTransform>
											<TranslateTransform/>
										</Ellipse.RenderTransform>
									</Ellipse>
								</Border>
								<Rectangle Grid.Column="7" Width="{Binding TemplateSettings.EllipseOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
								<Border x:Name="B2" Grid.Column="6" RenderTransformOrigin="0.5,0.5">
									<Border.RenderTransform>
										<TranslateTransform/>
									</Border.RenderTransform>
									<Ellipse x:Name="E2" Fill="{TemplateBinding Foreground}" Height="{Binding TemplateSettings.EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}" RenderTransformOrigin="0.5,0.5" Width="{Binding TemplateSettings.EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}">
										<Ellipse.RenderTransform>
											<TranslateTransform/>
										</Ellipse.RenderTransform>
									</Ellipse>
								</Border>
								<Rectangle Grid.Column="5" Width="{Binding TemplateSettings.EllipseOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
								<Border x:Name="B3" Grid.Column="4" RenderTransformOrigin="0.5,0.5">
									<Border.RenderTransform>
										<TranslateTransform/>
									</Border.RenderTransform>
									<Ellipse x:Name="E3" Fill="{TemplateBinding Foreground}" Height="{Binding TemplateSettings.EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}" RenderTransformOrigin="0.5,0.5" Width="{Binding TemplateSettings.EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}">
										<Ellipse.RenderTransform>
											<TranslateTransform/>
										</Ellipse.RenderTransform>
									</Ellipse>
								</Border>
								<Rectangle Grid.Column="3" Width="{Binding TemplateSettings.EllipseOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
								<Border x:Name="B4" Grid.Column="2" RenderTransformOrigin="0.5,0.5">
									<Border.RenderTransform>
										<TranslateTransform/>
									</Border.RenderTransform>
									<Ellipse x:Name="E4" Fill="{TemplateBinding Foreground}" Height="{Binding TemplateSettings.EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}" RenderTransformOrigin="0.5,0.5" Width="{Binding TemplateSettings.EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}">
										<Ellipse.RenderTransform>
											<TranslateTransform/>
										</Ellipse.RenderTransform>
									</Ellipse>
								</Border>
								<Rectangle Grid.Column="1" Width="{Binding TemplateSettings.EllipseOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
								<Border x:Name="B5" Grid.Column="0" RenderTransformOrigin="0.5,0.5">
									<Border.RenderTransform>
										<TranslateTransform/>
									</Border.RenderTransform>
									<Ellipse x:Name="E5" Fill="{TemplateBinding Foreground}" Height="{Binding TemplateSettings.EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}" RenderTransformOrigin="0.5,0.5" Width="{Binding TemplateSettings.EllipseDiameter, RelativeSource={RelativeSource Mode=TemplatedParent}}">
										<Ellipse.RenderTransform>
											<TranslateTransform/>
										</Ellipse.RenderTransform>
									</Ellipse>
								</Border>
							</Grid>
							<Border x:Name="DeterminateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
								<Rectangle x:Name="ProgressBarIndicator" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Left" Margin="{TemplateBinding Padding}"/>
							</Border>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>

You have to set the Style and the Foreground in this way:  
<ProgressBar Foreground="Yellow" IsIndeterminate="True" Style="{StaticResource CustomProgressBarStyle}"/>  

You can also find default themes styles in the folder "C:\Program Files (x86)\Windows Kits\8.0\Include\winrt\xaml\design".

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值