How to change WPF ScrollViewer RepeatButton Height and Width - wpf

I would like to change the size of the RepeatButton UP and DOWN of a ScrollViewer, to get a touchable size on industrial touch panels.
How can I access these properties?
I was able to change the size of the ScrollViewer globally within a ResourceDictionary like this:
<Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
<Setter Property="Stylus.IsFlicksEnabled" Value="True" />
<Style.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="Height" Value="{StaticResource widthScrollbarNormal}" />
<Setter Property="MinHeight" Value="{StaticResource widthScrollbarNormal}" />
</Trigger>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="Width" Value="{StaticResource widthScrollbarNormal}" />
<Setter Property="MinWidth" Value="{StaticResource widthScrollbarNormal}" />
</Trigger>
</Style.Triggers>
But I cannot find the way to change the RepeatButton size.
Thanks

In yout view, in case if is datagrid, add this resource:
<DataGrid.Resources>
<Style TargetType="{x:Type ScrollBarStyle}" BasedOn="{StaticResource ScrollBarStyle}"/>
</DataGrid.Resources>
Then create all of this styles in styles file (if you don't have it, check how you can create and use one!!):
(add the normal one, the horizontal and the vertical!
Normal:
<!--scroll bar style (normal/large one)-->
<Style x:Key="ScrollBarStyle" TargetType="{x:Type ScrollBar}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Style.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="Width" Value="Auto"/>
<Setter Property="Height" Value="30"/>
<Setter Property="MinHeight" Value="0"/>
<Setter Property="Template" Value="{StaticResource HorizontalScrollBar}" />
</Trigger>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="Width" Value="30"/>
<Setter Property="MinWidth" Value="0"/>
<Setter Property="Height" Value="Auto" />
<Setter Property="Template" Value="{StaticResource VerticalScrollBar}" />
</Trigger>
</Style.Triggers>
</Style>
And for horizontal:
<!--horizontal scrollbar itself template (normal)-->
<ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="30"/>
<ColumnDefinition Width="0.00001*"/>
<ColumnDefinition MaxWidth="30"/>
</Grid.ColumnDefinitions>
<Border
Grid.ColumnSpan="3"
CornerRadius="0"
Background="#F0F0F0" />
<RepeatButton
Grid.Column="0"
Style="{StaticResource ScrollBarLineButton}"
Width="Auto"
Command="ScrollBar.LineLeftCommand"
Content="M 4 0 L 4 8 L 0 4 Z" />
<Track
Name="PART_Track"
Grid.Column="1"
IsDirectionReversed="False">
<Track.DecreaseRepeatButton>
<RepeatButton
Style="{StaticResource ScrollBarPageButton}"
Command="ScrollBar.PageLeftCommand" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb
Style="{StaticResource ScrollBarThumb}"
Margin="1,0,1,0"
Background="{DynamicResource NormalBrush}"
BorderBrush="Transparent" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton
Style="{StaticResource ScrollBarPageButton}"
Command="ScrollBar.PageRightCommand" />
</Track.IncreaseRepeatButton>
</Track>
<RepeatButton
Grid.Column="3"
Style="{StaticResource ScrollBarLineButton}"
Width="Auto"
Command="ScrollBar.LineRightCommand"
Content="M 0 0 L 4 4 L 0 8 Z"/>
</Grid>
</ControlTemplate>
And for vertical:
<!--vertical scrollbar itself template (normal)-->
<ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
<Grid >
<Grid.RowDefinitions>
<RowDefinition MaxHeight="30"/>
<RowDefinition Height="0.00001*"/>
<RowDefinition MaxHeight="30"/>
</Grid.RowDefinitions>
<Border
Grid.RowSpan="3"
CornerRadius="0"
Background="#F0F0F0" />
<RepeatButton
Grid.Row="0"
Style="{StaticResource ScrollBarLineButton}"
Height="Auto"
Command="ScrollBar.LineUpCommand"
Content="M 0 4 L 8 4 L 4 0 Z" />
<Track
Name="PART_Track"
Grid.Row="1"
IsDirectionReversed="true">
<Track.DecreaseRepeatButton>
<RepeatButton
Style="{StaticResource ScrollBarPageButton}"
Command="ScrollBar.PageUpCommand" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb
Style="{StaticResource ScrollBarThumb}"
Margin="0,1,0,1"
Background="{DynamicResource NormalBrush}"
BorderBrush="Transparent" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton
Style="{StaticResource ScrollBarPageButton}"
Command="ScrollBar.PageDownCommand" />
</Track.IncreaseRepeatButton>
</Track>
<RepeatButton
Grid.Row="3"
Style="{StaticResource ScrollBarLineButton}"
Height="Auto"
Command="ScrollBar.LineDownCommand"
Content="M 0 0 L 4 4 L 8 0 Z"/>
</Grid>
</ControlTemplate>

Related

WPF Slider Thumb overlap RepeatButton

I have a Style for a Slider that makes it look like this (without the red circle):
The problem is, that the Thumb is not overlapping the RepeatButton and therefore I see those white edges (red circle). If I have no CornerRadius on the right side of the RepeatButton the effect is much smaller but still present because the Thumb is a circle.
How can I prevent that?
Heres the Code:
<Style x:Key="SliderButtonStyleDec" TargetType="{x:Type RepeatButton}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="IsTabStop" Value="false" />
<Setter Property="Focusable" Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border Background="{StaticResource ControlHighlightBackgroundBrush}" CornerRadius="4" Height="10"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SliderThumbStyle" TargetType="{x:Type Thumb}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<StackPanel>
<Ellipse Height="30" Width="30" Fill="{StaticResource ControlHighlightBackgroundBrush}"></Ellipse>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type Slider}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border x:Name="TrackBackground" Margin="0" CornerRadius="4" Height="10" Grid.Row="1" Background="White">
</Border>
<Track Grid.Row="1" x:Name="PART_Track">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderButtonStyleDec}" Command="Slider.DecreaseLarge" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource SliderThumbStyle}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderButtonStyleInc}" Command="Slider.IncreaseLarge" />
</Track.IncreaseRepeatButton>
</Track>
</Grid>
</ControlTemplate>
<Style TargetType="{x:Type Slider}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Style.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="MinWidth" Value="104" />
<Setter Property="MinHeight" Value="21" />
<Setter Property="Template" Value="{StaticResource HorizontalSlider}" />
</Trigger>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="MinWidth" Value="21" />
<Setter Property="MinHeight" Value="104" />
<Setter Property="Template" Value="{StaticResource VerticalSlider}" />
</Trigger>
</Style.Triggers>
</Style>
You can work with a negative margin and move the thumb to the end:
<ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type Slider}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border x:Name="TrackBackground" Margin="0" CornerRadius="4" Height="10" Grid.Row="1" Background="White">
</Border>
<Track Grid.Row="1" x:Name="PART_Track">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderButtonStyleDec}" Command="Slider.DecreaseLarge" Margin="0,0,-10,0"/>
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderButtonStyleInc}" Command="Slider.IncreaseLarge" Margin="-10,0,0,0"/>
</Track.IncreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource SliderThumbStyle}" />
</Track.Thumb>
</Track>
</Grid>
</ControlTemplate>

XAML code without resources and templates possible?

I found an example (the first one) for a slider,
which defines also a track with thumb.
Is it possible to recode it without resources and templates?
Thank you for your comments.
Erhy
I have done it.
Here the XAML code without template and style references
for the slider with track and thumb
<Slider x:Name="slidExample"
VerticalAlignment="Center" TickFrequency="37.5"
Minimum="0" Maximum="600" Value="500" Width="300" Margin="50,0,50,0"
SnapsToDevicePixels="true"
OverridesDefaultStyle="true"
IsTabStop="false"
Focusable="false"
>
<Slider.Style>
<Style TargetType="Slider">
<Style.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="MinHeight" Value="21" />
<Setter Property="MinWidth" Value="104" />
</Trigger>
</Style.Triggers>
</Style>
</Slider.Style>
<Slider.Template>
<ControlTemplate>
<Grid x:Name="GridOfslidExample">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TickBar x:Name="TopTickOfslidExample" Fill="LightGray" VerticalAlignment="Top"
SnapsToDevicePixels="True" Grid.Row="0" Placement="Top" Height="5"
Visibility="Visible">
</TickBar>
<Border BorderBrush="LightGray" BorderThickness="0,0,0,1" ></Border>
<Border x:Name="TrackBackground" VerticalAlignment="Center" Margin="0,-10,0,0" BorderBrush="Red" Background="Red" Height="3" Grid.Row="1" BorderThickness="1"/>
<Track Grid.Row="1" x:Name="PART_Track" Margin="0,-10,0,0" >
<Track.DecreaseRepeatButton>
<RepeatButton Command="Slider.DecreaseLarge" >
<RepeatButton.Style>
<Style TargetType="RepeatButton">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Border SnapsToDevicePixels="True" Background="YellowGreen" BorderThickness="1" BorderBrush="YellowGreen" Height="3"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</RepeatButton.Style>
</RepeatButton>
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb x:Name="ThumbOfslidExample">
<Thumb.Style>
<Style TargetType="Thumb">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<StackPanel Orientation="Vertical">
<Path Data="M 0 0 L 8 0 L 4 6 Z" Stroke="YellowGreen" Margin="-2,0,0,0" StrokeThickness="2" Fill="YellowGreen"></Path>
<Line X1="0" Y1="0" X2="0" Y2="7" Stroke="Gray" StrokeThickness="1" Margin="2,0,0,0" StrokeDashArray="1.5,1.5"></Line>
<TextBlock Foreground="Black" Margin="-2,30,0,0" Text="{Binding Value, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Slider}}}"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Thumb.Style>
</Thumb>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Command="Slider.IncreaseLarge" >
<RepeatButton.Style>
<Style TargetType="RepeatButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Border Background="Transparent"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</RepeatButton.Style>
</RepeatButton>
</Track.IncreaseRepeatButton>
</Track>
<TextBlock Text="0" Grid.Row="1" Margin="0,15,0,0"></TextBlock>
<TickBar x:Name="BottomTickOfslidExample" Fill="LightGray" SnapsToDevicePixels="True" Grid.Row="2" Placement="Bottom" Height="4" Visibility="Collapsed" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Slider.TickPlacement" Value="TopLeft">
<Setter TargetName="TopTickOfslidExample" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="Slider.TickPlacement" Value="BottomRight">
<Setter TargetName="BottomTickOfslidExample" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="Slider.TickPlacement" Value="Both">
<Setter TargetName="TopTickOfslidExample" Property="Visibility" Value="Visible" />
<Setter TargetName="BottomTickOfslidExample" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Slider.Template>
</Slider>
I think I have fixed it.
The reason of missings commands of RepeatButton was the textfield in thumb.
Its name in the new source is "DisplaysValueInThumb".
I had to add a converter, because the value of the slider produce many decimal places, which hide the touch area of the repeat button.
Because I was unable to format the source correctly
you find the source here.
Erhy

Increase font size of text based on slider

So my requirement is quite simple. I will have a slider control and a textblock. So whenever the slider is increased or decreased the font size of the Textblock should change. I am able to accomplish this quite simple using MVVM pattern.
My problem is I need to show some text below the slider like small, medium, low. Well I was able to read some articles online that says this can be accomplished using a TickBar. But problem is there is no value changed event with TickBar so that I can trigger changes to the ViewModel.
Can someone give me an idea of accomplishing this using slider. I have read some style on google and heres what it does it displays numbers as soon as the slider changed. Can it be changed to text like small, medium, low. Thanks.
<Style
x:Key="SliderRepeatButton"
TargetType="RepeatButton">
<Setter
Property="SnapsToDevicePixels"
Value="true" />
<Setter
Property="OverridesDefaultStyle"
Value="true" />
<Setter
Property="IsTabStop"
Value="false" />
<Setter
Property="Focusable"
Value="false" />
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="RepeatButton">
<Border
Background="Transparent" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style
x:Key="SliderRepeatButton1"
TargetType="RepeatButton">
<Setter
Property="SnapsToDevicePixels"
Value="true" />
<Setter
Property="OverridesDefaultStyle"
Value="true" />
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="RepeatButton">
<Border
SnapsToDevicePixels="True"
Background="YellowGreen"
BorderThickness="1"
BorderBrush="YellowGreen"
Height="3" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style
x:Key="SliderThumb"
TargetType="Thumb">
<Setter
Property="SnapsToDevicePixels"
Value="true" />
<Setter
Property="OverridesDefaultStyle"
Value="true" />
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="Thumb">
<StackPanel
Orientation="Vertical">
<Path
Data="M 0 0 L 8 0 L 4 6 Z"
Stroke="YellowGreen"
Margin="-2,0,0,0"
StrokeThickness="2"
Fill="YellowGreen"></Path>
<Line
X1="0"
Y1="0"
X2="0"
Y2="7"
Stroke="Gray"
StrokeThickness="1"
Margin="2,0,0,0"
StrokeDashArray="1.5,1.5"></Line>
<TextBlock
Foreground="Black"
Margin="-2,30,0,0"
Text="{Binding Value, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Slider}}}" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate
x:Key="Slider"
TargetType="Slider">
<Grid>
<Grid.RowDefinitions>
<RowDefinition
Height="Auto" />
<RowDefinition
Height="Auto"
MinHeight="{TemplateBinding MinHeight}" />
<RowDefinition
Height="Auto" />
</Grid.RowDefinitions>
<TickBar
x:Name="TopTick"
Fill="LightGray"
VerticalAlignment="Top"
SnapsToDevicePixels="True"
Grid.Row="0"
Placement="Top"
Height="5"
Visibility="Visible" />
<Border
BorderBrush="LightGray"
BorderThickness="0,0,0,1"></Border>
<Border
x:Name="TrackBackground"
VerticalAlignment="Center"
Margin="0,-10,0,0"
BorderBrush="Red"
Background="Red"
Height="3"
Grid.Row="1"
BorderThickness="1" />
<Track
Grid.Row="1"
x:Name="PART_Track"
Margin="0,-10,0,0">
<Track.DecreaseRepeatButton>
<RepeatButton
Style="{StaticResource SliderRepeatButton1}"
Command="Slider.DecreaseLarge" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb
Style="{StaticResource SliderThumb}"
Margin="0,-20,0,0" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton
Style="{StaticResource SliderRepeatButton}"
Command="Slider.IncreaseLarge" />
</Track.IncreaseRepeatButton>
</Track>
<TextBlock
Text="0"
Grid.Row="1"
Margin="0,15,0,0"></TextBlock>
<TickBar
x:Name="BottomTick"
Fill="LightGray"
SnapsToDevicePixels="True"
Grid.Row="2"
Placement="Bottom"
Height="4"
Visibility="Collapsed" />
</Grid>
<ControlTemplate.Triggers>
<Trigger
Property="TickPlacement"
Value="TopLeft">
<Setter
TargetName="TopTick"
Property="Visibility"
Value="Visible" />
</Trigger>
<Trigger
Property="TickPlacement"
Value="BottomRight">
<Setter
TargetName="BottomTick"
Property="Visibility"
Value="Visible" />
</Trigger>
<Trigger
Property="TickPlacement"
Value="Both">
<Setter
TargetName="TopTick"
Property="Visibility"
Value="Visible" />
<Setter
TargetName="BottomTick"
Property="Visibility"
Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style
x:Key="Horizontal_Slider"
TargetType="Slider">
<Setter
Property="Focusable"
Value="False" />
<Setter
Property="SnapsToDevicePixels"
Value="true" />
<Setter
Property="OverridesDefaultStyle"
Value="true" />
<Style.Triggers>
<Trigger
Property="Orientation"
Value="Horizontal">
<Setter
Property="MinHeight"
Value="21" />
<Setter
Property="MinWidth"
Value="104" />
<Setter
Property="Template"
Value="{StaticResource Slider}" />
</Trigger>
</Style.Triggers>
</Style>

Applying style to the scrollviewer disables it

For the life of me I can't catch where the problem is, as soon as I apply this style to the scrollviewer the vertical scroll bar is being drawn but looks like it's disabled. The style is applied from wpf xaml.
<Geometry x:Key="ScrollUp">m 3 21.703248 c 0 -0.810665 2.9850856 -4.266337 6.6335237 -7.679272 l 6.6335233 -6.2053359 6.817561 6.7653189 c 3.749658 3.720926 6.559968 7.182113 6.245132 7.691527 C 29.014905 22.7849 25.970346 20.4395 22.564054 17.063485 L 16.370796 10.925277 9.685398 17.05123 C 5.8994898 20.520327 3 22.53793 3 21.703248 z</Geometry>
<Geometry x:Key="ScrollDown">m 3 21.703248 c 0 -0.810665 2.9850856 -4.266337 6.6335237 -7.679272 l 6.6335233 -6.2053359 6.817561 6.7653189 c 3.749658 3.720926 6.559968 7.182113 6.245132 7.691527 C 29.014905 22.7849 25.970346 20.4395 22.564054 17.063485 L 16.370796 10.925277 9.685398 17.05123 C 5.8994898 20.520327 3 22.53793 3 21.703248 z</Geometry>
<Style x:Key="ScrollBarTopButton05" TargetType="{x:Type RepeatButton}" >
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Height" Value="56" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Border x:Name="ButtonTouch" CornerRadius="0" BorderThickness="1" BorderBrush="{StaticResource ButtonLine}" Background="{StaticResource LtBlue}" SnapsToDevicePixels="True" UseLayoutRounding="True" Margin="0" >
<Rectangle Width="22" Height="22" StrokeThickness="0" x:Name="IconColor" Margin="4">
<Rectangle.Tag>
<SolidColorBrush Color="{StaticResource DkBlueColor}" />
</Rectangle.Tag>
<Rectangle.Fill>
<DrawingBrush Stretch="Uniform">
<DrawingBrush.Drawing>
<GeometryDrawing Brush="{StaticResource DkBlue}" Geometry="{StaticResource ScrollUp}"/>
</DrawingBrush.Drawing>
</DrawingBrush>
</Rectangle.Fill>
</Rectangle>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="ButtonTouch" Property="Background" Value="{StaticResource LtGrey}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="IconColor" Property="Visibility" Value="Hidden" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrollBarBottomButton05" TargetType="{x:Type RepeatButton}" >
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Height" Value="56" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Border x:Name="ButtonTouch" CornerRadius="0" BorderThickness="1" BorderBrush="{StaticResource ButtonLine}" Background="{StaticResource LtBlue}" SnapsToDevicePixels="True" UseLayoutRounding="True" Margin="0" >
<Rectangle Width="22" Height="22" StrokeThickness="0" x:Name="IconColor" Margin="4">
<Rectangle.Tag>
<SolidColorBrush Color="{StaticResource DkBlueColor}" />
</Rectangle.Tag>
<Rectangle.Fill>
<DrawingBrush Stretch="Uniform">
<DrawingBrush.Drawing>
<GeometryDrawing Brush="{StaticResource DkBlue}" Geometry="{StaticResource ScrollDown}"/>
</DrawingBrush.Drawing>
</DrawingBrush>
</Rectangle.Fill>
</Rectangle>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="ButtonTouch" Property="Background" Value="{StaticResource LtGrey}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="IconColor" Property="Visibility" Value="Hidden" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrollBarPageButton05" TargetType="{x:Type RepeatButton}" >
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="MinHeight" Value="40" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Border x:Name="ButtonBorder" CornerRadius="0" BorderThickness="1,0,1,0" BorderBrush="{StaticResource ButtonLine}" SnapsToDevicePixels="True" UseLayoutRounding="True" Margin="0" Background="{StaticResource LtBlue}">
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="ButtonBorder" Property="Background" Value="#C0F7F7F7" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrollBarThumb05" TargetType="{x:Type Thumb}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="IsTabStop" Value="false" />
<Setter Property="Focusable" Value="false" />
<Setter Property="Height" Value="56" />
<Setter Property="Width" Value="30" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<!--Thumb-->
<Border x:Name="ScrollThumb" CornerRadius="4" Background="{StaticResource LtBlue}" BorderBrush="{StaticResource ButtonLine}" BorderThickness="1" />
<ControlTemplate.Triggers>
<Trigger Property="IsDragging" Value="True">
<Setter TargetName="ScrollThumb" Property="Background" Value="{StaticResource LtGrey}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="ScrollThumb" Property="Visibility" Value="Hidden" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="VerticalScrollBar05" TargetType="{x:Type ScrollBar}" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="56" />
<RowDefinition Height="0.00001*" />
<RowDefinition Height="56" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<!--Border around buttons and thumb-->
<Border Grid.RowSpan="3" CornerRadius="0" Background="{StaticResource LtBlue}" BorderBrush="{StaticResource ButtonLine}" BorderThickness="1" />
<RepeatButton Grid.Row="0" Height="56" Command="ScrollBar.LineUpCommand" Style="{StaticResource ScrollBarTopButton05}" />
<Track Name="PART_Track" Grid.Row="1" IsDirectionReversed="true" ViewportSize="NaN" >
<Track.DecreaseRepeatButton>
<RepeatButton Command="ScrollBar.PageUpCommand" Style="{StaticResource ScrollBarPageButton05}" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource ScrollBarThumb05}" Margin="0,13,0,13" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Command="ScrollBar.PageDownCommand" Style="{StaticResource ScrollBarPageButton05}" />
</Track.IncreaseRepeatButton>
</Track>
<RepeatButton Grid.Row="2" Height="56" Command="ScrollBar.LineDownCommand" Style="{StaticResource ScrollBarBottomButton05}" />
</Grid>
</ControlTemplate>
<Style x:Key="ScrollBar05" TargetType="{x:Type ScrollBar}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Stylus.IsFlicksEnabled" Value="True" />
<Setter Property="IsEnabled" Value="true" />
<Style.Triggers>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="Width" Value="56" />
<Setter Property="Height" Value="Auto" />
<Setter Property="Template" Value="{StaticResource VerticalScrollBar05}" />
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="ScrollViewer05" TargetType="{x:Type ScrollViewer}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="IsEnabled" Value="true" ></Setter>
<Setter Property="VerticalScrollBarVisibility" Value="Visible"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollViewer}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ScrollContentPresenter Grid.Column="0" Grid.Row="0" />
<ScrollBar Name="PART_VerticalScrollBar"
Grid.Column="1"
Maximum="{TemplateBinding ScrollableHeight}"
Orientation="Vertical"
Value="{TemplateBinding VerticalOffset}"
Style="{DynamicResource ResourceKey=ScrollBar05}"
ViewportSize="{TemplateBinding ViewportHeight}"
Visibility="Visible" />
<ScrollBar Name="PART_HorizontalScrollBar"
Grid.Row="1"
Grid.Column="0"
Maximum="{TemplateBinding ScrollableWidth}"
Orientation="Horizontal"
Value="{TemplateBinding HorizontalOffset}"
ViewportSize="{TemplateBinding ViewportWidth}"
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrollViewer05Left" TargetType="{x:Type ScrollViewer}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollViewer}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ScrollContentPresenter Grid.Column="1" Grid.Row="0" />
<ScrollBar Name="PART_VerticalScrollBar"
Grid.Column="0"
Maximum="{TemplateBinding ScrollableHeight}"
Orientation="Vertical"
Value="{TemplateBinding VerticalOffset}"
Style="{DynamicResource ResourceKey=ScrollBar05}"
ViewportSize="{TemplateBinding ViewportHeight}"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" />
<ScrollBar Name="PART_HorizontalScrollBar"
Grid.Row="1"
Grid.Column="0"
Maximum="{TemplateBinding ScrollableWidth}"
Orientation="Horizontal"
Value="{TemplateBinding HorizontalOffset}"
ViewportSize="{TemplateBinding ViewportWidth}"
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Style is applied through staticresource bind.
<DockPanel Name="mainDock" LastChildFill="True" >
<local:HeaderControl DockPanel.Dock="Top" Height="100" x:Name="HeaderBar"></local:HeaderControl>
<local:StatusBarControl DockPanel.Dock="Bottom" Height="56" x:Name="StatusBar"></local:StatusBarControl>
<DockPanel d:DesignHeight="612" VerticalAlignment="Top" Name="MidDock">
<StackPanel DockPanel.Dock="left" Name="Leftmenu" Background="{StaticResource MedBlue}" Width="300" d:DesignHeight="612" VerticalAlignment="Stretch"/>
<ScrollViewer Name="midScroll1" Style="{StaticResource ScrollViewer05}" VerticalScrollBarVisibility="Hidden" d:DesignHeight="612" Width="Auto" CanContentScroll="True" Height="Auto">
<StackPanel DockPanel.Dock="left" VerticalAlignment="Stretch" Name="Midmenu" Background="{StaticResource LtBlue}" Width="300" CanVerticallyScroll="True">
</StackPanel>
</ScrollViewer>
<StackPanel DockPanel.Dock="right" Name="Metric" Background="White" Width="auto">
<local:MetricControl Margin="10"></local:MetricControl>
</StackPanel>
</DockPanel>
</DockPanel>
Thank you.
I don't think that it's disabled, there's just not enough content to make it scroll. I got it working by adding a height of 1200 to the "Midmenu" stackpanel inside the scrollviewer. Pretty template, looks nice, just need to flip the scrolldown arrow to actually point down.
For those who might come upon this problem
In the scrollviewer style, made it work for me.

Why is my custom Slider not visible at design time?

I have used this page from MSDN to apply a custom style to my slider control. It works perfectly at run-time as shown in the image below, but at design time, the entire slider control is not visible (hidden/collapsed??). How can I get the slider to be visible at design time?
Slider at run-time:
The XAML showing my implementation of the custom slider on my WPF window:
<Slider Grid.Column="1"
Style="{StaticResource sldGradeability}"
Orientation="Vertical"
Name="sldGrade" Maximum="90" Minimum="0"
SmallChange="1" LargeChange="10"
Margin="5,20,10,20"/>
The XAML for my custom slider style:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!--<SnippetSlider>-->
<Style x:Key="SliderButtonStyle"
TargetType="{x:Type RepeatButton}">
<Setter Property="SnapsToDevicePixels"
Value="true" />
<Setter Property="OverridesDefaultStyle"
Value="true" />
<Setter Property="IsTabStop"
Value="false" />
<Setter Property="Focusable"
Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border Background="Transparent" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--<SnippetThumb>-->
<Style x:Key="SliderThumbStyle"
TargetType="{x:Type Thumb}">
<Setter Property="SnapsToDevicePixels"
Value="true" />
<Setter Property="OverridesDefaultStyle"
Value="true" />
<Setter Property="Height"
Value="16" />
<Setter Property="Width"
Value="25" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Polygon x:Name="polyThumb"
Cursor="Hand"
StrokeThickness="1"
Points="0,8 6,16 24,16 24,0 6,0"
Stroke="{StaticResource brsDarkGrayText}"
Fill="{StaticResource ButtonNormal}"/>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter TargetName="polyThumb"
Property="Fill"
Value="{StaticResource ButtonOver}" />
</Trigger>
<Trigger Property="IsDragging"
Value="True">
<Setter TargetName="polyThumb"
Property="Fill"
Value="{StaticResource ButtonDown}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--Template when the orientation of the Slider is Vertical.-->
<ControlTemplate x:Key="VerticalSlider"
TargetType="{x:Type Slider}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="90°" Style="{StaticResource SimpleTextRight}"/>
<TextBlock Grid.Row="1" Text="80°" Style="{StaticResource SimpleTextRight}"/>
<TextBlock Grid.Row="2" Text="70°" Style="{StaticResource SimpleTextRight}"/>
<TextBlock Grid.Row="3" Text="60°" Style="{StaticResource SimpleTextRight}"/>
<TextBlock Grid.Row="4" Text="50°" Style="{StaticResource SimpleTextRight}"/>
<TextBlock Grid.Row="5" Text="40°" Style="{StaticResource SimpleTextRight}"/>
<TextBlock Grid.Row="6" Text="30°" Style="{StaticResource SimpleTextRight}"/>
<TextBlock Grid.Row="7" Text="20°" Style="{StaticResource SimpleTextRight}"/>
<TextBlock Grid.Row="8" Text="10°" Style="{StaticResource SimpleTextRight}"/>
<TextBlock Grid.Row="9" Text="0°" Style="{StaticResource SimpleTextRight}"/>
</Grid>
<TickBar Grid.Column="1" x:Name="TopTick"
SnapsToDevicePixels="True"
Placement="Left"
Width="5"
Visibility="Visible"
TickFrequency="10"
Fill="{StaticResource brsDarkGrayText}"/>
<Border x:Name="TrackBackground"
Margin="0"
CornerRadius="2"
Width="5"
Grid.Column="2"
BorderThickness="0">
<Border.Background>
<LinearGradientBrush EndPoint="1,0"
StartPoint="0,0">
<GradientStop Color="{StaticResource LightGrayGradient}"
Offset="0" />
<GradientStop Color="{StaticResource MediumGrayGradient}"
Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Track Grid.Column="2"
x:Name="PART_Track">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderButtonStyle}"
Command="Slider.DecreaseLarge" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource SliderThumbStyle}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderButtonStyle}"
Command="Slider.IncreaseLarge" />
</Track.IncreaseRepeatButton>
</Track>
<TickBar x:Name="BottomTick"
SnapsToDevicePixels="True"
Grid.Column="3"
Fill="{StaticResource brsDarkGrayText}"
Placement="Right"
Width="4"
Visibility="Collapsed" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="TickPlacement"
Value="TopLeft">
<Setter TargetName="TopTick"
Property="Visibility"
Value="Visible" />
</Trigger>
<Trigger Property="TickPlacement"
Value="BottomRight">
<Setter TargetName="BottomTick"
Property="Visibility"
Value="Visible" />
</Trigger>
<Trigger Property="TickPlacement"
Value="Both">
<Setter TargetName="TopTick"
Property="Visibility"
Value="Visible" />
<Setter TargetName="BottomTick"
Property="Visibility"
Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!--Slider Control-->
<Style x:Key="sldGradeability"
TargetType="{x:Type Slider}">
<Setter Property="SnapsToDevicePixels"
Value="true" />
<Setter Property="OverridesDefaultStyle"
Value="true" />
<Setter Property="Visibility"
Value="Visible"/>
<Style.Triggers>
<Trigger Property="Orientation"
Value="Vertical">
<Setter Property="MinWidth"
Value="21" />
<Setter Property="MinHeight"
Value="104" />
<Setter Property="Template"
Value="{StaticResource VerticalSlider}" />
</Trigger>
</Style.Triggers>
</Style>
<!--</SnippetSlider>-->
</ResourceDictionary>
It shows up fine in Blend 4 so I think this is a bug in the VS2010 designer somehow. Anyway, the problem seems to be the Orientation is Vertical trigger.
<Style x:Key="sldGradeability" TargetType="{x:Type Slider}">
<!-- ... -->
<Style.Triggers>
<!-- ... -->
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="Template" Value="{StaticResource VerticalSlider}" />
</Trigger>
</Style.Triggers>
</Style>
Moving the Template setter up among the Setters and the Slider shows up in the designer
<Style x:Key="sldGradeability" TargetType="{x:Type Slider}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Visibility" Value="Visible"/>
<Setter Property="Template" Value="{StaticResource VerticalSlider}"/>
<Style.Triggers>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="MinWidth" Value="21" />
<Setter Property="MinHeight" Value="104" />
</Trigger>
</Style.Triggers>
</Style>
Moving the setter may not be what you want do here but maybe you can make use of it somehow

Resources