WPF進度矩形

我使用以下ProgressBarStyle：WPF進度矩形

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

它工作正常，但我想在一次顯示三個矩形用不同的顏色（左，中，右）的指示部分，如何我可以做到這一點嗎？

來源

2014-10-17 Abu Sufyan

哪裏你想要顯示三個矩形嗎？一張照片在這裏真的很有幫助。但是，如果您想將指示器部件更改爲三個矩形，則只需將兩個更多添加到您的動畫網格。 – qqbenq 2014-10-17 14:24:07

我想將指示器部件更改爲三個矩形，在動畫網格中，當我在網格中添加兩個多邊形矩形時，新添加的矩形定義顏色不像「PART_GlowRect」那樣移動。我想在進度條中同時移動三種顏色（左，中，右），就像當前移動一種顏色一樣。任何幫助，將不勝感激。 – 2014-10-21 10:27:16

你應該改變你的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

來源

2014-10-21 12:39:17 qqbenq

回答

相關問題