自定义进度条控件模板

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>

谢谢， 工作时间

Answer 1

我无法弄清楚你想要达到什么结果。您使用四个嵌套的旋转级别似乎很奇怪。例如，您的 borderIndicator 将是上下颠倒的，因为它会受到所有四个 LayoutTransform 的影响：gridLayout 会将其旋转 +90 度，而 PART_Track、PART_Indicator 和 borderIndicator 都会将其旋转 -90 度。因此总旋转将为+90-90-90-90 = -180。这是你的意图吗？

另一件意想不到的事情是您在装饰器中使用边框的方式。显然，您的代码隐藏旨在以某种方式影响 PART_Track 和 PART_Indicator，但不清楚您对装饰器做了什么，以防止它实际上成为边框并执行当前位于其中的边框的工作。

话虽如此，我认为问题就出在这里：

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

由于 Border 没有自然大小，“Bottom”的 VerticalAlignment 将导致其高度为零。

我绝对建议您找到一种方法来减少您应用的 LayoutTransforms 数量。事实上，在我看来，只有外面的两个才是真正必要的。我还会考虑合并装饰器和边框。