Custom ProgressBar ControlTemplate

Question

Hi All,

I am having a little difficulty with a generic template for my extended progress control. Basically, the template consists of a grid, with some text information and the actual progress bar.

It works fine, except for when I want to switch to vertical orientation. Everything appears to be rotated correctly, but I get no progress indicator. I hope its something silly I'm overlooking, and just need a second set of eyes to see...

Here is the template:

<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>

Thanks, wTs

Answer 1

I couldn't figure out what result you are trying to achieve. It seems strange that you are using four nested levels of rotation. For example, your borderIndicator will be upside down since it will be affected by all four LayoutTransforms: gridLayout will rotate it +90 and PART_Track, PART_Indicator and borderIndicator will all rotate it -90. Thus the total rotation will be +90-90-90-90 = -180. Is this what you intended?

Another thing that is unexpected is the way you are using a Border inside a Decorator. Obviously your code-behind is designed to affects PART_Track and PART_Indicator somehow, but it is not clear what you are doing to the Decorator that prevents it from actually being a Border and doing the work of the Border that is currently inside it.

Having said all that, here is where I think the problem lies:

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

Since Border has no natural size, a VerticalAlignment of "Bottom" will cause it to have zero height.

I would definitely suggest you find a way to reduce the number of LayoutTransforms you apply. In fact, it appears to me that only the outer two are actually necessary. Also I would consider merging the Decorator and the Border.