2014-06-25 67 views
1

我正在嘗試爲我的progressebar創建一個帶圓角的模板,但我無法實現進度條的右側。進度條風格右半徑

這裏是我的模板:

<ProgressBar Name="blabla" Value="80" Maximum="100" Margin="95,282,113,0"> 
    <ProgressBar.Style> 
     <Style TargetType="{x:Type ProgressBar}"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type ProgressBar}"> 
         <Grid Height="10" MinWidth="50" Background="{TemplateBinding Background}"> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="CommonStates"> 
            <VisualState x:Name="Determinate" /> 
            <VisualState x:Name="Indeterminate"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Duration="00:00:00" 
                      Storyboard.TargetName="PART_Indicator" 
                      Storyboard.TargetProperty="Background"> 
               <DiscreteObjectKeyFrame KeyTime="00:00:00"> 
                <DiscreteObjectKeyFrame.Value> 
                 <SolidColorBrush>Transparent</SolidColorBrush> 
                </DiscreteObjectKeyFrame.Value> 
               </DiscreteObjectKeyFrame> 
              </ObjectAnimationUsingKeyFrames> 

             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
          <Border x:Name="PART_Track" CornerRadius="4" BorderThickness="1" 
            BorderBrush="{DynamicResource CouleurForegroundProgressBar}"> 
          </Border> 

          <Border CornerRadius="4,0,0,4" BorderThickness="1" x:Name="PART_Indicator" 
            HorizontalAlignment="Left" Background="{DynamicResource CouleurForegroundProgressBar}" 
            BorderBrush="{DynamicResource CouleurForegroundProgressBar}" 
            Margin="0,0,0,0">        
          </Border> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
      <Setter Property="Background" Value="Transparent" /> 
      <Setter Property="Foreground" Value="{DynamicResource CouleurForegroundProgressBar}" /> 
     </Style> 
    </ProgressBar.Style> 
</ProgressBar> 

它看起來像我想:My progressbar

但是當值達到100%的進度條內(PART_Indicator)仍然是直的和隱藏我的權利半徑: enter image description here

我該如何避免這種情況?

回答

2

CornerRadius="4"您Part_Indicator也

  <Border 
       CornerRadius="4" 
       BorderThickness="1" 
       x:Name="PART_Indicator" 
       HorizontalAlignment="Left" 
       Background="Red" 
       BorderBrush="Red" 
       Margin="0,0,0,0"> 

,否則我將用Triggers象下面這樣:

 <Border BorderThickness="1" 
       x:Name="PART_Indicator" 
       HorizontalAlignment="Left" 
       Background="Red" 
       BorderBrush="Red" 
       Margin="0,0,0,0"> 
        <Border.Style> 
         <Style TargetType="Border"> 
           <Setter Property="CornerRadius" Value="4,0,0,4"/> 
          <Style.Triggers> 
           <DataTrigger Binding="{Binding Path=Value, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ProgressBar}}}" Value="100"> 
           <Setter Property="CornerRadius" Value="4"/> 
           </DataTrigger> 
          </Style.Triggers> 
          </Style> 
        </Border.Style> 
      </Border> 
+0

但如果我把4我會失去我的指示器的直邊這是我想 – user2088807

+0

我想這一點,它看起來很好 – Nitin

+0

我有這個與你的忠告:http://hpics.li/4ac6ca9 但我希望我的指標的右側部分與我的第一張圖片相同 – user2088807

0

添加到尼廷的答案,你就必須改變邊界元素的名稱從「PART_Track」和「PART_Indicator」分別到「ProgressBarTrack」和「ProgressBarIndicator」。如果你不這樣做,如果邊界的寬度大於元素的值,邊界值可能會超出邊界。