WPF自定义进度条

<!--进度条 4812-->
<LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill" StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="#00EEEE" Offset="0.2"/>
<GradientStop Color="#00EEEE" Offset="0.4"/>
<GradientStop Color="#00EEEE" Offset="0.6"/>
<GradientStop Color="#00EEEE" Offset="1"/>
</LinearGradientBrush>
<Style x:Key="ProgressBarBaseStyle" TargetType="{x:Type ProgressBar}">
<Setter Property="Height" Value="20"/>
<Setter Property="Background" Value="White"/>
<Setter Property="BorderBrush" Value="#19000000"/>
<Setter Property="BorderThickness" Value="0,0,0,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid>
<Border x:Name="TemplateRoot" CornerRadius="4" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<Border.Effect>
<BlurEffect Radius="2"></BlurEffect>
</Border.Effect>
</Border>
<Grid Margin="{TemplateBinding BorderThickness}">
<Rectangle x:Name="PART_Track"/>
<Grid HorizontalAlignment="Left">
<Decorator x:Name="PART_Indicator" HorizontalAlignment="Left" Margin="0,-1,0,0">
<Border CornerRadius="4" x:Name="Animation" ClipToBounds="true" Background="{TemplateBinding Foreground}">
<Rectangle x:Name="PART_GlowRect" Fill="{StaticResource ProgressBarIndicatorAnimatedFill}" HorizontalAlignment="Left" Margin="0,0,0,0" Width="100"/>
</Border>
</Decorator>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<Label FontSize="12" Foreground="#000" Padding="0,0,0,0" Content="{TemplateBinding Value}"></Label>
<Label FontSize="12" Foreground="#000" Padding="0,0,0,0" Content="%"></Label>
</StackPanel>
</Grid>
</Grid>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="LayoutTransform" TargetName="TemplateRoot">
<Setter.Value>
<RotateTransform Angle="-90"/>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="progress-bar-gif" BasedOn="{StaticResource ProgressBarBaseStyle}" TargetType="{x:Type ProgressBar}">
<Setter Property="Foreground" Value="#00EEEE"/>
</Style>

使用方法: <ProgressBar Style="{DynamicResource progress-bar-gif}"  Name="DownProgressBar"></ProgressBar>  在后台填写数值就可以了

 

posted @ 2018-12-11 16:30  张统  阅读(702)  评论(0编辑  收藏  举报