2014-06-25 42 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”。如果你不这样做,如果边界的宽度大于元素的值,边界值可能会超出边界。