Databases
StackOverflow2013
Postsdbo
POWPF - Slider size
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWPF - Slider size
    text
    copied!<p>I am working on an audio player which has two sliders; one serves as a timeline and the other one is for adjusting the volume. I changed the default template of the slider so the sliders look like I wanted them to look. Basically I only changed colors and created two separated styles for the THUMB part of the slider. They are called: <strong>SliderThumbStyle</strong> and <strong>SliderThumbStyleVertical</strong>. The horizontal slider works just fine. I have a problem with the vertical slider. It isn't the size that it's supposed to be. I've tried setting the height property in my MainWindow but this doesn't work (changing the width property of the horizontal slider works though).</p> <p>My edited template looks like (in App.xaml):</p> <pre><code> &lt;Style x:Key="SliderButtonStyle" TargetType="{x:Type RepeatButton}"&gt; &lt;Setter Property="SnapsToDevicePixels" Value="true" /&gt; &lt;Setter Property="OverridesDefaultStyle" Value="true" /&gt; &lt;Setter Property="IsTabStop" Value="false" /&gt; &lt;Setter Property="Focusable" Value="false" /&gt; &lt;Setter Property="Template"&gt; &lt;Setter.Value&gt; &lt;ControlTemplate TargetType="{x:Type RepeatButton}"&gt; &lt;Border Background="Transparent" /&gt; &lt;/ControlTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; &lt;!-- SLIDER THUMB STYLE VERTICAL--&gt; &lt;Style x:Key="SliderThumbStyleVertical" TargetType="{x:Type Thumb}"&gt; &lt;Setter Property="SnapsToDevicePixels" Value="true" /&gt; &lt;Setter Property="OverridesDefaultStyle" Value="true" /&gt; &lt;Setter Property="Height" Value="11" /&gt; &lt;Setter Property="Width" Value="22" /&gt; &lt;Setter Property="Template"&gt; &lt;Setter.Value&gt; &lt;ControlTemplate TargetType="{x:Type Thumb}"&gt; &lt;Rectangle x:Name="Rectangle" StrokeThickness="1"&gt; &lt;Rectangle.Stroke&gt; &lt;LinearGradientBrush StartPoint="0,0" EndPoint="0,1"&gt; &lt;LinearGradientBrush.GradientStops&gt; &lt;GradientStopCollection&gt; &lt;GradientStop Color="Black" Offset="0.0" /&gt; &lt;GradientStop Color="Black" Offset="1.0" /&gt; &lt;/GradientStopCollection&gt; &lt;/LinearGradientBrush.GradientStops&gt; &lt;/LinearGradientBrush&gt; &lt;/Rectangle.Stroke&gt; &lt;Rectangle.Fill&gt; &lt;LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"&gt; &lt;GradientStop Color="Orange" Offset="1" /&gt; &lt;GradientStop Color="OrangeRed" /&gt; &lt;/LinearGradientBrush&gt; &lt;/Rectangle.Fill&gt; &lt;VisualStateManager.VisualStateGroups&gt; &lt;VisualStateGroup x:Name="CommonStates"&gt; &lt;VisualState x:Name="Normal" /&gt; &lt;VisualState x:Name="MouseOver"&gt; &lt;Storyboard&gt; &lt;ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill). (GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="Rectangle"&gt; &lt;EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColor}" /&gt; &lt;/ColorAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; &lt;/VisualState&gt; &lt;VisualState x:Name="Pressed"&gt; &lt;Storyboard&gt; &lt;ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill). (GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="Rectangle"&gt; &lt;EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlPressedColor}" /&gt; &lt;/ColorAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; &lt;/VisualState&gt; &lt;VisualState x:Name="Disabled"&gt; &lt;Storyboard&gt; &lt;ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill). (GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="Rectangle"&gt; &lt;EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledControlDarkColor}" /&gt; &lt;/ColorAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; &lt;/VisualState&gt; &lt;/VisualStateGroup&gt; &lt;/VisualStateManager.VisualStateGroups&gt; &lt;/Rectangle&gt; &lt;/ControlTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; &lt;Style x:Key="SliderThumbStyle" TargetType="{x:Type Thumb}"&gt; &lt;Setter Property="SnapsToDevicePixels" Value="true" /&gt; &lt;Setter Property="OverridesDefaultStyle" Value="true" /&gt; &lt;Setter Property="Height" Value="22" /&gt; &lt;Setter Property="Width" Value="11" /&gt; &lt;Setter Property="Template"&gt; &lt;Setter.Value&gt; &lt;ControlTemplate TargetType="{x:Type Thumb}"&gt; &lt;Rectangle x:Name="Rectangle" StrokeThickness="1"&gt; &lt;Rectangle.Stroke&gt; &lt;LinearGradientBrush StartPoint="0,0" EndPoint="0,1"&gt; &lt;LinearGradientBrush.GradientStops&gt; &lt;GradientStopCollection&gt; &lt;GradientStop Color="Black" Offset="0.0" /&gt; &lt;GradientStop Color="Black" Offset="1.0" /&gt; &lt;/GradientStopCollection&gt; &lt;/LinearGradientBrush.GradientStops&gt; &lt;/LinearGradientBrush&gt; &lt;/Rectangle.Stroke&gt; &lt;Rectangle.Fill&gt; &lt;LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"&gt; &lt;GradientStop Color="Orange" Offset="1" /&gt; &lt;GradientStop Color="OrangeRed" /&gt; &lt;/LinearGradientBrush&gt; &lt;/Rectangle.Fill&gt; &lt;VisualStateManager.VisualStateGroups&gt; &lt;VisualStateGroup x:Name="CommonStates"&gt; &lt;VisualState x:Name="Normal" /&gt; &lt;VisualState x:Name="MouseOver"&gt; &lt;Storyboard&gt; &lt;ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill). (GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="Rectangle"&gt; &lt;EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColor}" /&gt; &lt;/ColorAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; &lt;/VisualState&gt; &lt;VisualState x:Name="Pressed"&gt; &lt;Storyboard&gt; &lt;ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill). (GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="Rectangle"&gt; &lt;EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlPressedColor}" /&gt; &lt;/ColorAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; &lt;/VisualState&gt; &lt;VisualState x:Name="Disabled"&gt; &lt;Storyboard&gt; &lt;ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill). (GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="Rectangle"&gt; &lt;EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledControlDarkColor}" /&gt; &lt;/ColorAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; &lt;/VisualState&gt; &lt;/VisualStateGroup&gt; &lt;/VisualStateManager.VisualStateGroups&gt; &lt;/Rectangle&gt; &lt;/ControlTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; &lt;ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type Slider}"&gt; &lt;Grid&gt; &lt;Grid.RowDefinitions&gt; &lt;RowDefinition Height="Auto" /&gt; &lt;RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" /&gt; &lt;RowDefinition Height="Auto" /&gt; &lt;/Grid.RowDefinitions&gt; &lt;TickBar x:Name="TopTick" SnapsToDevicePixels="True" Placement="Top" Height="4" Visibility="Collapsed"&gt; &lt;TickBar.Fill&gt; &lt;SolidColorBrush Color="{DynamicResource GlyphColor}" /&gt; &lt;/TickBar.Fill&gt; &lt;/TickBar&gt; &lt;Border x:Name="TrackBackground" Margin="0" CornerRadius="0" Height="7" Grid.Row="1" BorderThickness="1"&gt; &lt;Border.BorderBrush&gt; &lt;LinearGradientBrush StartPoint="0,0" EndPoint="0,1"&gt; &lt;LinearGradientBrush.GradientStops&gt; &lt;GradientStopCollection&gt; &lt;GradientStop Color="Black" Offset="0.0" /&gt; &lt;GradientStop Color="Black" Offset="1.0" /&gt; &lt;/GradientStopCollection&gt; &lt;/LinearGradientBrush.GradientStops&gt; &lt;/LinearGradientBrush&gt; &lt;/Border.BorderBrush&gt; &lt;Border.Background&gt; &lt;LinearGradientBrush StartPoint="0,0" EndPoint="0,1"&gt; &lt;LinearGradientBrush.GradientStops&gt; &lt;GradientStopCollection&gt; &lt;GradientStop Color="Orange" Offset="0.0" /&gt; &lt;GradientStop Color="OrangeRed" Offset="1.0" /&gt; &lt;/GradientStopCollection&gt; &lt;/LinearGradientBrush.GradientStops&gt; &lt;/LinearGradientBrush&gt; &lt;/Border.Background&gt; &lt;/Border&gt; &lt;Track Grid.Row="1" x:Name="PART_Track"&gt; &lt;Track.DecreaseRepeatButton&gt; &lt;RepeatButton Style="{StaticResource SliderButtonStyle}" Command="Slider.DecreaseLarge" /&gt; &lt;/Track.DecreaseRepeatButton&gt; &lt;Track.Thumb&gt; &lt;Thumb Style="{StaticResource SliderThumbStyle}" /&gt; &lt;/Track.Thumb&gt; &lt;Track.IncreaseRepeatButton&gt; &lt;RepeatButton Style="{StaticResource SliderButtonStyle}" Command="Slider.IncreaseLarge" /&gt; &lt;/Track.IncreaseRepeatButton&gt; &lt;/Track&gt; &lt;TickBar x:Name="BottomTick" SnapsToDevicePixels="True" Grid.Row="2" Fill="{TemplateBinding Foreground}" Placement="Bottom" Height="4" Visibility="Collapsed" /&gt; &lt;/Grid&gt; &lt;ControlTemplate.Triggers&gt; &lt;Trigger Property="TickPlacement" Value="TopLeft"&gt; &lt;Setter TargetName="TopTick" Property="Visibility" Value="Visible" /&gt; &lt;/Trigger&gt; &lt;Trigger Property="TickPlacement" Value="BottomRight"&gt; &lt;Setter TargetName="BottomTick" Property="Visibility" Value="Visible" /&gt; &lt;/Trigger&gt; &lt;Trigger Property="TickPlacement" Value="Both"&gt; &lt;Setter TargetName="TopTick" Property="Visibility" Value="Visible" /&gt; &lt;Setter TargetName="BottomTick" Property="Visibility" Value="Visible" /&gt; &lt;/Trigger&gt; &lt;/ControlTemplate.Triggers&gt; &lt;/ControlTemplate&gt; &lt;!-- VERTICAL SLIDER--&gt; &lt;ControlTemplate x:Key="VerticalSlider" TargetType="{x:Type Slider}"&gt; &lt;Grid&gt; &lt;Grid.ColumnDefinitions&gt; &lt;ColumnDefinition Width="Auto" /&gt; &lt;ColumnDefinition Width="Auto" MinWidth="{TemplateBinding MinWidth}" /&gt; &lt;ColumnDefinition Width="Auto" /&gt; &lt;/Grid.ColumnDefinitions&gt; &lt;TickBar x:Name="TopTick" SnapsToDevicePixels="True" Placement="Left" Width="4" Visibility="Collapsed"&gt; &lt;TickBar.Fill&gt; &lt;SolidColorBrush Color="{DynamicResource GlyphColor}" /&gt; &lt;/TickBar.Fill&gt; &lt;/TickBar&gt; &lt;!-- DOLZINA TRACK BARA --&gt; &lt;Border x:Name="TrackBackground" Margin="0" CornerRadius="0" Width="7" Grid.Column="1" BorderThickness="1"&gt; &lt;Border.BorderBrush&gt; &lt;LinearGradientBrush StartPoint="0,0" EndPoint="1,0"&gt; &lt;LinearGradientBrush.GradientStops&gt; &lt;GradientStopCollection&gt; &lt;GradientStop Color="Black" Offset="0.0" /&gt; &lt;GradientStop Color="Black" Offset="1.0" /&gt; &lt;/GradientStopCollection&gt; &lt;/LinearGradientBrush.GradientStops&gt; &lt;/LinearGradientBrush&gt; &lt;/Border.BorderBrush&gt; &lt;Border.Background&gt; &lt;LinearGradientBrush EndPoint="1,0" StartPoint="0.25,0"&gt; &lt;GradientStop Color="Orange" Offset="0" /&gt; &lt;GradientStop Color="OrangeRed" Offset="1" /&gt; &lt;/LinearGradientBrush&gt; &lt;/Border.Background&gt; &lt;/Border&gt; &lt;Track Grid.Column="1" x:Name="PART_Track"&gt; &lt;Track.DecreaseRepeatButton&gt; &lt;RepeatButton Style="{StaticResource SliderButtonStyle}" Command="Slider.DecreaseLarge" /&gt; &lt;/Track.DecreaseRepeatButton&gt; &lt;Track.Thumb&gt; &lt;!--DEFAULT THUMB SLIDER STYLE--&gt; &lt;Thumb Style="{StaticResource SliderThumbStyleVertical}" /&gt; &lt;/Track.Thumb&gt; &lt;Track.IncreaseRepeatButton&gt; &lt;RepeatButton Style="{StaticResource SliderButtonStyle}" Command="Slider.IncreaseLarge" /&gt; &lt;/Track.IncreaseRepeatButton&gt; &lt;/Track&gt; &lt;TickBar x:Name="BottomTick" SnapsToDevicePixels="True" Grid.Column="2" Fill="{TemplateBinding Foreground}" Placement="Right" Width="4" Visibility="Collapsed" /&gt; &lt;/Grid&gt; &lt;ControlTemplate.Triggers&gt; &lt;Trigger Property="TickPlacement" Value="TopLeft"&gt; &lt;Setter TargetName="TopTick" Property="Visibility" Value="Visible" /&gt; &lt;/Trigger&gt; &lt;Trigger Property="TickPlacement" Value="BottomRight"&gt; &lt;Setter TargetName="BottomTick" Property="Visibility" Value="Visible" /&gt; &lt;/Trigger&gt; &lt;Trigger Property="TickPlacement" Value="Both"&gt; &lt;Setter TargetName="TopTick" Property="Visibility" Value="Visible" /&gt; &lt;Setter TargetName="BottomTick" Property="Visibility" Value="Visible" /&gt; &lt;/Trigger&gt; &lt;/ControlTemplate.Triggers&gt; &lt;/ControlTemplate&gt; &lt;Style TargetType="{x:Type Slider}"&gt; &lt;Setter Property="SnapsToDevicePixels" Value="true" /&gt; &lt;Setter Property="OverridesDefaultStyle" Value="true" /&gt; &lt;Style.Triggers&gt; &lt;Trigger Property="Orientation" Value="Horizontal"&gt; &lt;Setter Property="MinWidth" Value="104" /&gt; &lt;Setter Property="MinHeight" Value="21" /&gt; &lt;Setter Property="Template" Value="{StaticResource HorizontalSlider}" /&gt; &lt;/Trigger&gt; &lt;Trigger Property="Orientation" Value="Vertical"&gt; &lt;Setter Property="MinWidth" Value="21" /&gt; &lt;Setter Property="MinHeight" Value="104" /&gt; &lt;Setter Property="Template" Value="{StaticResource VerticalSlider}" /&gt; &lt;/Trigger&gt; &lt;/Style.Triggers&gt; &lt;/Style&gt; </code></pre> <p>And the xaml for my two sliders looks like:</p> <pre><code> &lt;Slider Height="22" HorizontalAlignment="Left" Minimum="0" Maximum="100" Focusable="False" LargeChange="0" Thumb.DragCompleted="slider1_DragCompleted" Margin="16,103,0,0" Name="slider1" VerticalAlignment="Top" Width="469" Grid.ColumnSpan="2" /&gt; &lt;Slider Width="20" Height="52" Minimum="0" Maximum="100" Orientation="Vertical" HorizontalAlignment="Left" Margin="325,41,0,0" Name="slider2" VerticalAlignment="Top" ValueChanged="slider2_ValueChanged" /&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload