Question

我正在使用以下ProgressBar Style：

<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">
                        <Rectangle x:Name="PART_GlowRect" Width="200" HorizontalAlignment="Left"
                                     Fill="#3399FF" Margin="0,0,0,0" />
                    </Grid>
                </Border>
            </Grid>                    
        </ControlTemplate>
    </Setter.Value>
</Setter>
<Setter Property="Foreground" Value="#404040"/>
</Style>

它工作正常但我想一次显示三个不同颜色的矩形（左，中，右）作为指示器部分，我该如何实现？

Answer 1

您应该将PART_GlowRect更改为Border而不是Rectangle，并在其中添加所需的矩形：

<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="150" HorizontalAlignment="Left"
                     Background="Transparent" Margin="0,0,0,0" >
            <Grid>
                <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>
        </Border>
    </Grid>
</Border>

这就是它的样子：

progressbar

WPF进度条矩形

1 个答案: