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

时间:2014-10-22 08:03:16

标签: wpf

目前我是固定边框宽度=" 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"/> 

1 个答案:

答案 0 :(得分:0)

我认为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

在上面的代码中,您有两个相同的Gridsgrid1grid2),唯一的区别在于它们的动画:它们都是以相同的速度从左向右移动,但在不同的阶段,所以他们创造了幻觉,一旦颜色消失在右侧,它从左侧返回

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

如果您热衷于使用Grid,则可以修改ProgressBar以包含上面的网格,并完全跳过PART_TrackPART_Indicator。以下是您以这种方式修改的代码(并放入PART_GlowRect):

Page

我希望这会有所帮助。