Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
WPF Vertical Progress Bar Styles
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.