Пользовательский шаблон 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. Это то, что вы намеревались?

Еще одна неожиданность - то, как вы используете границу внутри декоратора. Очевидно, что ваш код выделен так, чтобы как-то влиять на PART_Track и PART_Indicator, но неясно, что вы делаете с Декоратором, который мешает ему фактически быть Границей и выполняет работу Границы, которая в настоящее время находится внутри него.

Сказав все это, я думаю, что вот в чем проблема:

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

Поскольку граница не имеет естественного размера, вертикальное выравнивание "Bottom" приведет к тому, что она будет иметь нулевую высоту.

Я бы определенно предложил вам найти способ уменьшить количество применяемых LayoutTransforms. На самом деле, мне кажется, что на самом деле необходимы только внешние два. Также я хотел бы рассмотреть возможность объединения Декоратора и Границы.