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

Question

目前我是固定边框宽度=“750”但我想划分进度条宽度=“*”所以我们定义的颜色（红色、绿色、蓝色）利用不同分辨率屏幕的所有窗口宽度，我们的颜色从（左，中，右）页面（不相互），当一种颜色消失（完整的圆圈）时，它必须从页面的左侧重新开始。我修改了样式，但它没有像我想要的那样工作。

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

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

最外面的Grid 的ClipToBounds="True" 设置确保不会在该网格之外进行任何绘制。

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

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <Grid.Resources>
            <LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill" StartPoint="0,0.5" EndPoint="1,0.5">
                <LinearGradientBrush.GradientStops>
                    <GradientStopCollection>
                        <GradientStop Offset="0" Color="White"/>
                        <GradientStop Offset="0.4" Color="Chocolate"/>
                        <GradientStop Offset="0.6" Color="Chocolate"/>
                        <GradientStop Offset="1" Color="White"/>
                    </GradientStopCollection>
                </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
            <Style TargetType="{x:Type ProgressBar}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ProgressBar}">
                            <Grid
                                MaxWidth="750"
                                MinHeight="14"
                                MinWidth="400"
                                Background="{TemplateBinding Background}">
                                <Border x:Name="PART_Track" BorderThickness="1" CornerRadius="2">
                                    <Border.BorderBrush>
                                        <SolidColorBrush Color="#FFFFFF"/>
                                    </Border.BorderBrush>
                                    <Grid ClipToBounds="True">
                                        <Grid x:Name="grid1">
                                            <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.Triggers>
                                                <EventTrigger RoutedEvent="Window.Loaded">
                                                    <BeginStoryboard>
                                                        <Storyboard RepeatBehavior="Forever">
                                                            <ThicknessAnimation
                                                                BeginTime="0:0:0"
                                                                Duration="0:0:3"
                                                                From="0,0,0,0"
                                                                Storyboard.TargetName="grid1"
                                                                Storyboard.TargetProperty="Margin"
                                                                To="900,0,0,0"/>
                                                        </Storyboard>
                                                    </BeginStoryboard>
                                                </EventTrigger>
                                            </Grid.Triggers>
                                        </Grid>
                                        <Grid x:Name="grid2">
                                            <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.Triggers>
                                                <EventTrigger RoutedEvent="Window.Loaded">
                                                    <BeginStoryboard>
                                                        <Storyboard RepeatBehavior="Forever">
                                                            <ThicknessAnimation
                                                                BeginTime="0:0:0"
                                                                Duration="0:0:3"
                                                                From="-900,0,0,0"
                                                                Storyboard.TargetName="grid2"
                                                                Storyboard.TargetProperty="Margin"
                                                                To="0,0,0,0"/>
                                                        </Storyboard>
                                                    </BeginStoryboard>
                                                </EventTrigger>
                                            </Grid.Triggers>
                                        </Grid>
                                    </Grid>
                                </Border>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="Foreground" Value="#FFFFFF"/>
            </Style>
        </Grid.Resources>
        <ProgressBar IsIndeterminate="True"/>
    </Grid>
</Page>

我希望这会有所帮助。