WPF Vertical Progress Bar Styles

VerticalProgressBarStyles.xaml

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">  
  <Page.Resources>
    <Style TargetType="ProgressBar" x:Key="Basic">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="ProgressBar" >
            <Grid x:Name="Root">
              <Border 
                Name="PART_Track" 
                CornerRadius="2" 
                Background="LightGreen"
                BorderBrush="Green"
                BorderThickness="2" />
              <Border 
                Name="PART_Indicator" 
                CornerRadius="2" 
                Background="ForestGreen" 
                BorderBrush="Green" 
                BorderThickness="2" 
                HorizontalAlignment="Left" />
              </Grid>
              <ControlTemplate.Triggers>
                <!-- Getting vertical style working using technique described here: http://stackoverflow.com/a/6849237/7532 -->
                <Trigger Property="Orientation" Value="Vertical">
                  <Setter TargetName="Root" Property="LayoutTransform">
                    <Setter.Value>
                      <RotateTransform Angle="270" />
                    </Setter.Value>
                  </Setter>

                  <Setter TargetName="Root" Property="Width"
                    Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height}"
                  />
                  <Setter TargetName="Root" Property="Height"
                    Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Width}"
                  />
                </Trigger>            
              </ControlTemplate.Triggers>       
  
            </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
        
    <Style TargetType="ProgressBar" x:Key="VolumeMeter">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="ProgressBar" >
            <Grid x:Name="Root">
              <Border 
                Name="PART_Track" 
                CornerRadius="2" 
                Background="LightGreen"
                BorderBrush="Green"
                BorderThickness="2">
                <Border.Background>
                  <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                    <GradientStop Offset="0" Color="#FF00FF00"/>
                    <GradientStop Offset="0.9" Color="#FFFFFF00"/>
                    <GradientStop Offset="1" Color="#FFFF0000"/>
                  </LinearGradientBrush>

                </Border.Background>
                </Border>
              <Border 
                CornerRadius="2" 
                BorderBrush="Green" 
                BorderThickness="2" 
                HorizontalAlignment="Left">
                <DockPanel>
                  <Rectangle Name="PART_Indicator"></Rectangle>
                  <Rectangle Name="Mask" MinWidth="{TemplateBinding Width}" Fill="White" />
                </DockPanel>
                
                </Border>
              </Grid>
              <ControlTemplate.Triggers>
                <!-- Getting vertical style working using technique described here: http://stackoverflow.com/a/6849237/7532 -->
                <Trigger Property="Orientation" Value="Vertical">
                  <Setter TargetName="Root" Property="LayoutTransform">
                    <Setter.Value>
                      <RotateTransform Angle="270" />
                    </Setter.Value>
                  </Setter>

                  <Setter TargetName="Root" Property="Width"
                    Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height}"
                  />
                  <Setter TargetName="Root" Property="Height"
                    Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Width}"
                  />
                  <Setter TargetName="Mask" Property="MinWidth"
                    Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height}"
                  />
                </Trigger>            
              </ControlTemplate.Triggers>       
  
            </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
    
  </Page.Resources>
    <StackPanel Orientation="Horizontal" Height="220">
      <ProgressBar Margin="5" Width="20" Height="200" Value="0.25" Maximum="1.0" Orientation="Vertical" Style="{StaticResource VolumeMeter}" />
      <ProgressBar Margin="5" Width="20" Height="200" Value="0.5" Maximum="1.0" Orientation="Vertical" Style="{StaticResource VolumeMeter}" />    
      <ProgressBar Margin="5" Width="20" Height="200" Value="0.75" Maximum="1.0" Orientation="Vertical" Style="{StaticResource VolumeMeter}" />
      <ProgressBar Margin="5" Width="20" Height="200" Value="1.0" Maximum="1.0" Orientation="Vertical" Style="{StaticResource VolumeMeter}" />    
      <StackPanel Orientation="Vertical">
        <ProgressBar Margin="5" Width="200" Height="20" Value="0.25" Maximum="1.0" Style="{StaticResource VolumeMeter}" />
        <ProgressBar Margin="5" Width="200" Height="20" Value="0.5" Maximum="1.0" Style="{StaticResource VolumeMeter}" />
        <ProgressBar Margin="5" Width="200" Height="20" Value="0.75" Maximum="1.0" Style="{StaticResource VolumeMeter}" />
        <ProgressBar Margin="5" Width="200" Height="20" Value="1" Maximum="1.0" Style="{StaticResource VolumeMeter}" />
      </StackPanel>
      
      <ProgressBar Margin="5" Width="20" Height="200" Value="0.25" Maximum="1.0" Orientation="Vertical" Style="{StaticResource Basic}" />
      <ProgressBar Margin="5" Width="20" Height="200" Value="0.5" Maximum="1.0" Orientation="Vertical" Style="{StaticResource Basic}" />    
      <ProgressBar Margin="5" Width="20" Height="200" Value="0.75" Maximum="1.0" Orientation="Vertical" Style="{StaticResource Basic}" />
      <ProgressBar Margin="5" Width="20" Height="200" Value="1.0" Maximum="1.0" Orientation="Vertical" Style="{StaticResource Basic}" />    
      <StackPanel Orientation="Vertical">
        <ProgressBar Margin="5" Width="200" Height="20" Value="0.25" Maximum="1.0" Style="{StaticResource Basic}" />
        <ProgressBar Margin="5" Width="200" Height="20" Value="0.5" Maximum="1.0" Style="{StaticResource Basic}" />
        <ProgressBar Margin="5" Width="200" Height="20" Value="0.75" Maximum="1.0" Style="{StaticResource Basic}" />
        <ProgressBar Margin="5" Width="200" Height="20" Value="1" Maximum="1.0" Style="{StaticResource Basic}" />
      </StackPanel>
      
      
    </StackPanel>
</Page>