Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 257
Teamol Avatar asked Feb 27 '14 14:02

Teamol


1 Answers

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>
like image 198
JPOne Avatar answered Sep 30 '22 20:09

JPOne