自定義ProgressBar ControlTemplate

Question

我對擴展進度控制的通用模板有點困難。基本上，該模板由一個網格，一些文本信息和實際進度條組成。

它工作正常，除了當我想切換到垂直方向。一切似乎都正確旋轉，但我沒有得到進度指示器。我希望它的一些愚蠢的我俯瞰，並且只需要第二套眼睛看到的...

這裏是模板：

<ControlTemplate TargetType="{x:Type local:MyProgressControl}"> 
    <Grid x:Name="gridLayout" 
      Background="{TemplateBinding Background}" 
      HorizontalAlignment="Stretch" 
      VerticalAlignment="Stretch"> 

     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto" /> 
      <RowDefinition Height="*" MinHeight="20" /> 
     </Grid.RowDefinitions> 

     <StackPanel x:Name="stackLabels" 
        Grid.Row="0" 
        HorizontalAlignment="Center" 
        VerticalAlignment="Center" 
        Orientation="Horizontal"> 
      <TextBlock x:Name="txtProgress" 
         Style="{Binding TextBlockStyle, 
             RelativeSource={RelativeSource TemplatedParent}}" 
         Margin="3,1" 
         Text="{Binding IndicationText, 
             RelativeSource={RelativeSource TemplatedParent}}" 
         Visibility="{Binding ShowIndicationText, 
              RelativeSource={RelativeSource TemplatedParent}, 
              Converter={StaticResource booleanToVisibility}}" /> 
      <TextBlock x:Name="txtValue" 
         Style="{Binding TextBlockStyle, RelativeSource={RelativeSource TemplatedParent}}" 
         Margin="3,1" 
         Text="{Binding RoundedValue, RelativeSource={RelativeSource TemplatedParent}}" 
         Visibility="{Binding ShowProgressText, 
            RelativeSource={RelativeSource TemplatedParent}, 
            Converter={StaticResource booleanToVisibility}}" /> 

      <TextBlock x:Name="txtOf" 
         Style="{Binding TextBlockStyle, RelativeSource={RelativeSource TemplatedParent}}" 
         Margin="3,1" 
         Text="/" 
         Visibility="{Binding ShowProgressText, 
              RelativeSource={RelativeSource TemplatedParent}, 
              Converter={StaticResource booleanToVisibility}}" /> 

      <TextBlock x:Name="txtMaximum" 
         Style="{Binding TextBlockStyle, RelativeSource={RelativeSource TemplatedParent}}" 
         Margin="3,1" 
         Text="{Binding RoundedMaximum, 
             RelativeSource={RelativeSource TemplatedParent}}" 
         Visibility="{Binding ShowProgressText, 
              RelativeSource={RelativeSource TemplatedParent}, 
              Converter={StaticResource booleanToVisibility}}" /> 

     </StackPanel> 

     <Border x:Name="PART_Track" 
       Grid.Row="1" 
       BorderBrush="{TemplateBinding BorderBrush}" 
       BorderThickness="{TemplateBinding BorderThickness}" 
       CornerRadius="8"> 
      <Border.Background> 
       <LinearGradientBrush x:Name="trackBrush" StartPoint="0.5, 0" EndPoint="0.5, 1"> 
        <GradientStop Offset="0.0" Color="#6A6A6A" /> 
        <GradientStop Offset="0.2" Color="#949494" /> 
        <GradientStop Offset="0.35" Color="#A9A9A9" /> 
        <GradientStop Offset="0.55" Color="#D3D3D3" /> 
        <GradientStop Offset="0.65" Color="#949494" /> 
        <GradientStop Offset="1.0" Color="#3F3F3F" /> 
       </LinearGradientBrush> 
      </Border.Background> 
      <Decorator x:Name="PART_Indicator" 
         Margin="1" 
         HorizontalAlignment="Left" 
         VerticalAlignment="Stretch"> 
       <Border x:Name="borderIndicator" 
         Background="{TemplateBinding BackgroundBrush}" 
         CornerRadius="{Binding ElementName=PART_Track, Path=CornerRadius}" /> 
      </Decorator> 
     </Border> 
    </Grid> 
    <ControlTemplate.Triggers> 
     <Trigger Property="Orientation" Value="Vertical"> 
      <Setter Property="LayoutTransform" TargetName="gridLayout"> 
       <Setter.Value> 
        <RotateTransform Angle="90" /> 
       </Setter.Value> 
      </Setter> 
      <Setter Property="LayoutTransform" TargetName="PART_Track"> 
       <Setter.Value> 
        <RotateTransform Angle="-90" /> 
       </Setter.Value> 
      </Setter>     
      <Setter Property="HorizontalAlignment" TargetName="PART_Indicator" Value="Stretch" /> 
      <Setter Property="VerticalAlignment" TargetName="PART_Indicator" Value="Bottom" /> 
      <Setter Property="LayoutTransform" TargetName="PART_Indicator"> 
       <Setter.Value> 
        <RotateTransform Angle="-90" /> 
       </Setter.Value> 
      </Setter> 
      <Setter Property="HorizontalAlignment" TargetName="borderIndicator" Value="Stretch" /> 
      <Setter Property="VerticalAlignment" TargetName="borderIndicator" Value="Bottom" /> 
      <Setter Property="LayoutTransform" TargetName="borderIndicator"> 
       <Setter.Value> 
        <RotateTransform Angle="-90" /> 
       </Setter.Value> 
      </Setter> 
     </Trigger> 
    </ControlTemplate.Triggers> 
</ControlTemplate> 

感謝， WTS

Answer 1

我不能」弄清楚你試圖達到的結果。你使用四個嵌套級別的旋轉似乎很奇怪。例如，您的borderIndicator將會顛倒，因爲它將受到所有四種LayoutTransforms的影響：gridLayout將旋轉它+90，PART_Track，PART_Indicator和borderIndicator將全部旋轉它-90。因此總旋轉將爲+ 90-90-90-90 = -180。這是你的意圖嗎？

另一件令人意想不到的事情是你在Decorator中使用Border的方式。很明顯，你的代碼隱藏設計會以某種方式影響PART_Track和PART_Indicator，但不清楚你對裝飾器做了什麼，以防止其實際上成爲邊框並執行當前內部邊框的工作。

說了這麼多，這裏是我認爲問題在於：

<Setter Property="VerticalAlignment" TargetName="borderIndicator" Value="Bottom" /> 

由於邊境沒有自然大小的「底部」一VerticalAlignment將導致其具有零高度。

我肯定會建議你找一種方法來減少你應用的LayoutTransforms的數量。事實上，在我看來，只有外面的兩個實際上是必要的。另外我會考慮合併裝飾者和邊框。