Question

目前我是固定边框宽度=＆＃34; 750＆＃34;但我想划分进度条宽度=＆＃34; *＆＃34;所以我们定义的颜色（红色，绿色，蓝色）利用不同分辨率屏幕的所有窗口宽度，我们的颜色从页面的（左，中，右）开始（不是彼此），当一种颜色消失（完整的圆圈）时必须从页面左侧再次开始。我修改了风格，但它没有按照我想要的方式工作。

<LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill" StartPoint="0,0.5" EndPoint="1,0.5">
<LinearGradientBrush.GradientStops>
    <GradientStopCollection>
        <GradientStop Color="White" Offset="0" />
        <GradientStop Color="Chocolate" Offset="0.4" />
        <GradientStop Color="Chocolate" Offset="0.6" />
        <GradientStop Color="White" Offset="1" />
    </GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>

<Style TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type ProgressBar}">
            <Grid MinHeight="14"  MinWidth="400" Background="{TemplateBinding Background}">
                <Border x:Name="PART_Track" CornerRadius="2" BorderThickness="1">
                    <Border.BorderBrush>
                        <SolidColorBrush Color="#FFFFFF" />
                    </Border.BorderBrush>
                </Border>                       
                <Border x:Name="PART_Indicator" CornerRadius="2"  BorderThickness="1" HorizontalAlignment="Left" 
                        Background="{TemplateBinding Foreground}" Margin="0,-1,0,1">
                    <Grid ClipToBounds="True" x:Name="Animation">
                        <Border x:Name="PART_GlowRect" Width="750" HorizontalAlignment="Left"
                                Background="Transparent" Margin="0,0,0,0" >
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="150" />
                                    <ColumnDefinition Width="150" />
                                    <ColumnDefinition Width="150" />
                                    <ColumnDefinition Width="150" />
                                    <ColumnDefinition Width="150" />
                                </Grid.ColumnDefinitions>
                                <Rectangle Grid.Column="0" Fill="{StaticResource ProgressBarIndicatorAnimatedFill}" />
                                <Rectangle Grid.Column="1" Fill="Transparent" />
                                <Rectangle Grid.Column="2" Fill="{StaticResource ProgressBarIndicatorAnimatedFill}" />
                                <Rectangle Grid.Column="3" Fill="Transparent" />
                                <Rectangle Grid.Column="4" Fill="{StaticResource ProgressBarIndicatorAnimatedFill}" />
                            </Grid>
                        </Border>
                    </Grid>
                </Border>
            </Grid>                    
        </ControlTemplate>
    </Setter.Value>
</Setter>
<Setter Property="Foreground" Value="#FFFFFF"/>

Answer 1

我认为ProgressBar控件不容易修改以实现您的需要，但您可以使用一些简单的动画创建类似的效果：

<Grid Height="50" Width="300" Background="DarkGray" ClipToBounds="True">
  <Grid x:Name="grid1" Width="300" HorizontalAlignment="Left">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Rectangle Grid.Column="0" Fill="Red"  />
    <Rectangle Grid.Column="1" Fill="Green" />
    <Rectangle Grid.Column="2" Fill="Blue" />

    <Grid.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <BeginStoryboard>
                <Storyboard RepeatBehavior="Forever">
                    <ThicknessAnimation Storyboard.TargetName="grid1" 
                       Storyboard.TargetProperty="Margin" From="0,0,0,0" To="300,0,0,0" 
                       Duration="0:0:3" BeginTime="0:0:0"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Grid.Triggers>
  </Grid>

  <Grid x:Name="grid2" Width="300" HorizontalAlignment="Left">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Rectangle Grid.Column="0" Fill="Red"  />
    <Rectangle Grid.Column="1" Fill="Green" />
    <Rectangle Grid.Column="2" Fill="Blue" />

    <Grid.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <BeginStoryboard>
                <Storyboard RepeatBehavior="Forever">
                    <ThicknessAnimation Storyboard.TargetName="grid2" 
                       Storyboard.TargetProperty="Margin" From="-300,0,0,0" To="0,0,0,0" 
                       Duration="0:0:3" BeginTime="0:0:0"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Grid.Triggers>
  </Grid>
</Grid>

progress

在上面的代码中，您有两个相同的Grids（grid1和grid2），唯一的区别在于它们的动画：它们都是以相同的速度从左向右移动，但在不同的阶段，所以他们创造了幻觉，一旦颜色消失在右侧，它从左侧返回。

最外面ClipToBounds="True"的{{1}}设置可确保不会在该网格外进行绘图。

如果您热衷于使用Grid，则可以修改ProgressBar以包含上面的网格，并完全跳过PART_Track和PART_Indicator。以下是您以这种方式修改的代码（并放入PART_GlowRect）：

Page

我希望这会有所帮助。

WPF进度条样式中的三个矩形

1 个答案: