先上图
1.xaml代码
"ProgressBarStyle" TargetType="{x:Type ProgressBar}">
<Setter Property="Foreground" Value="#FF06B025"/>
<Setter Property="Background" Value="#FFE6E6E6"/>
<Setter Property="BorderBrush" Value="#FFBCBCBC"/>
<Setter Property="attach:AttachProperty.Percentage" Value=""></Setter>
<Setter Property="Height" Value="35"/>
<Setter Property="Width" Value="600"></Setter>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid x:Name="TemplateRoot">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Determinate"/>
<VisualState x:Name="Indeterminate">
<Storyboard RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Animation">
<EasingDoubleKeyFrame KeyTime="0" Value="0.25"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.25"/>
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.25"/>
</DoubleAnimationUsingKeyFrames>
<PointAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="Animation">
<EasingPointKeyFrame KeyTime="0" Value="-0.5,0.5"/>
<EasingPointKeyFrame KeyTime="0:0:1" Value="0.5,0.5"/>
<EasingPointKeyFrame KeyTime="0:0:2" Value="1.5,0.5"/>
</PointAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border CornerRadius="18" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>
<Rectangle RadiusX="18" RadiusY="18" x:Name="PART_Track"/>
<Grid x:Name="PART_Indicator" ClipToBounds="True" HorizontalAlignment="Left">
<Rectangle RadiusX="18" RadiusY="18" x:Name="Indicator" Fill="{TemplateBinding Foreground}"/>
<Label FontSize="14" VerticalAlignment="Center" Content="{TemplateBinding attach:AttachProperty.Percentage}" HorizontalContentAlignment="Center" HorizontalAlignment="Right" VerticalContentAlignment="Center" Background="Transparent" Foreground="White" Panel.ZIndex="1" Margin="{Binding Margin, ElementName=Animation}"></Label>
<Rectangle RadiusX="18" RadiusY="18" x:Name="Animation" Fill="{TemplateBinding Foreground}" RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="LayoutTransform" TargetName="TemplateRoot">
<Setter.Value>
<RotateTransform Angle="-90"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsIndeterminate" Value="True">
<Setter Property="Visibility" TargetName="Indicator" Value="Collapsed"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
知识兔2.附加属性
public static string GetPercentage(DependencyObject obj)
{
return (string)obj.GetValue(PercentageProperty);
}
public static void SetPercentage(DependencyObject obj, string value)
{
obj.SetValue(PercentageProperty, value);
}
//百分比展示
// Using a DependencyProperty as the backing store for Percentage. This enables animation, styling, binding, etc...
public static readonly DependencyProperty PercentageProperty =
DependencyProperty.RegisterAttached("Percentage", typeof(string), typeof(AttachProperty), new PropertyMetadata(""));
知识兔3.在设计器中使用
"pro" Style="{StaticResource ProgressBarStyle}" ath:AttachProperty.Percentage="{Binding Percentage}" Height="35" Foreground="#ff2791ff" Background="#ffe5e9f0" Width="600" Value="0" Maximum="100"></ProgressBar>
知识兔4.逻辑代码
private void Func(object obj)
{
for (int i = 0; i <= 100; i++)
{
this.pro.Dispatcher.Invoke(new Action(()=> {
StyleLibrary.Core.AttachProperty.SetPercentage(pro, i.ToString() + "%");
pro.Value = i;
}));
Thread.Sleep(100);
}
}
//调用
ThreadPool.QueueUserWorkItem(Func,null);
知识兔5.知识点:附加属性;绑定;样式;