CODEWITHSUNDEEP
wpfprogress-barvertical-alignment
Teamol
Teamol

Reputation: 819

Wpf vertical progress bar styling

could you please help with styling vertical progress bar with solid color? I've been able to create this style

<Style TargetType="{x:Type ProgressBar}" x:Key="{x:Type ProgressBar}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type ProgressBar}">
        <Grid>
          <Rectangle Name="PART_Track" StrokeThickness="1" >
            <Rectangle.Fill>
              <SolidColorBrush Color="#FF00FF00"></SolidColorBrush>
            </Rectangle.Fill>
          </Rectangle>
          <DockPanel Margin="1">
            <Rectangle Name="PART_Indicator">
            </Rectangle>
            <Rectangle Name="Mask" MinWidth="{TemplateBinding Width}" Fill="#C0C0C0"/>
          </DockPanel>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

But it still is oriented horizontally and I don't know how to change it.

Upvotes: 6

Views: 5984

Answers (1)

JPOne
JPOne

Reputation: 216

There is a ControlTemplate.Triggers in the default Template. This trigger rotates the angle by -90°.

If you add 

     <ControlTemplate.Triggers>
                            <Trigger Property="Orientation" Value="Vertical">
                                <Setter Property="LayoutTransform" TargetName="TemplateRoot">
                                    <Setter.Value>
                                        <RotateTransform Angle="-90"/>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
     </ControlTemplate.Triggers>

to your control and name the parenting grid "TemplateRoot" you can set the orientation.

Here's your template

    <Style TargetType="{x:Type ProgressBar}" x:Key="{x:Type ProgressBar}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ProgressBar}">
                    <Grid x:Name="TemplateRoot">
                        <Rectangle Name="PART_Track" StrokeThickness="1" >
                            <Rectangle.Fill>
                                <SolidColorBrush Color="#FF00FF00"></SolidColorBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                        <DockPanel Margin="1">
                            <Rectangle Name="PART_Indicator">
                            </Rectangle>
                            <Rectangle Name="Mask" MinWidth="{TemplateBinding Width}" Fill="#C0C0C0"/>
                        </DockPanel>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="Orientation" Value="Vertical">
                            <Setter Property="LayoutTransform" TargetName="TemplateRoot">
                                <Setter.Value>
                                    <RotateTransform Angle="-90"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Upvotes: 10

Related Questions