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
Related
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>
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>
I would like to ask you if somebody know how to create ScrollViewer without background. I know that it is not possible with style or template (I guess) and must be created new component from ScrollVeiwer, but I can't find which method/property override.
For example:
<Window x:Class="WpfScroll.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow">
<Grid>
<Button x:Name="bt"></Button>
<ScrollViewer Background="{x:Null}" Margin="20">
<StackPanel Orientation="Horizontal" Background="{x:Null}">
<Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
<Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
<Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
<Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
</StackPanel>
</ScrollViewer>
</Grid>
</Window>
What I want is ability to click on button "bt" on background between rectangles.
Thanks for advice.
-pav-
You can handle PreviewMouseDown Event of the ScrollViewer.
In your xaml:
<Grid>
<!--Button is removed as it will be not used-->
<ScrollViewer Background="{x:Null}" Margin="20" PreviewMouseDown="ScrollViewer_MouseDown">
<StackPanel Orientation="Horizontal" Background="{x:Null}">
<Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
<Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
<Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
<Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
</StackPanel>
</ScrollViewer>
</Grid>
As It is PreviewMouseDown (Tunneling) Event. So Wherever you click on scrollviewer, Event will be fired Whether it is Rectangle or ScrollViewer itself.
In your code behind, You can handle it by e.Source Parameter.
PreviewMouseDown Event in .cs file is:
private void ScrollViewer_PreviewMouseDown(object sender, MouseButtonEventArgs e)
{
if (e.Source.GetType() == typeof(ScrollViewer))
{
//Code which you want to perform on that Button click will be here.
}
if (e.Source.GetType() == typeof(Rectangle))
{
//Code which you want to perform on rectangle will be here.
}
}
I hope it will help you.
Copy paste below style as it is :
<Window.Resources>
<Style TargetType="{x:Type ScrollBar}">
<Setter Property="Stylus.IsFlicksEnabled"
Value="false" />
<Setter Property="Foreground"
Value="#ADABAB" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="Width"
Value="7" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid x:Name="GridRoot"
Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="0.00001*" />
</Grid.RowDefinitions>
<Border x:Name="CornerScrollBarRectangle"
CornerRadius="5" BorderThickness="1" BorderBrush="Brown"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Width="Auto"
Height="Auto"
Margin="0,1,0,1"
Background="Transparent" />
<Track x:Name="PART_Track"
Grid.Row="0"
IsDirectionReversed="true"
Focusable="false">
<Track.Thumb>
<Thumb x:Name="Thumb"
Background="{TemplateBinding Foreground}"
Style="{DynamicResource ScrollBarTrackThumb}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton x:Name="PageUp"
Command="ScrollBar.PageDownCommand"
Opacity="0"
Focusable="false" />
</Track.IncreaseRepeatButton>
<Track.DecreaseRepeatButton>
<RepeatButton x:Name="PageDown"
Command="ScrollBar.PageUpCommand"
Opacity="0"
Focusable="false" />
</Track.DecreaseRepeatButton>
</Track>
</Grid>
<ControlTemplate.Triggers>
<Trigger SourceName="Thumb"
Property="IsMouseOver"
Value="true">
<Setter Value="{DynamicResource ButtonSelectBrush}"
TargetName="Thumb"
Property="Background" />
</Trigger>
<Trigger SourceName="Thumb"
Property="IsDragging"
Value="true">
<Setter Value="{DynamicResource DarkBrush}"
TargetName="Thumb"
Property="Background" />
</Trigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter TargetName="Thumb"
Property="Visibility"
Value="Collapsed" />
</Trigger>
<Trigger Property="Orientation"
Value="Horizontal">
<Setter TargetName="GridRoot"
Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-90" />
</Setter.Value>
</Setter>
<Setter TargetName="PART_Track"
Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-90" />
</Setter.Value>
</Setter>
<Setter Property="Width"
Value="Auto" />
<Setter Property="Height"
Value="8" />
<Setter TargetName="Thumb"
Property="Tag"
Value="Horizontal" />
<Setter TargetName="PageDown"
Property="Command"
Value="ScrollBar.PageLeftCommand" />
<Setter TargetName="PageUp"
Property="Command"
Value="ScrollBar.PageRightCommand" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrollBarTrackThumb"
TargetType="{x:Type Thumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Grid x:Name="Grid" Background="Transparent">
<Rectangle HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Width="Auto"
Height="Auto"
Fill="Transparent" />
<Border x:Name="CornerScrollBarRectangle"
CornerRadius="5" BorderThickness="1" BorderBrush="Yellow"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Width="Auto"
Height="Auto"
Margin="0,1,0,1"
Background="Transparent" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Tag"
Value="Horizontal">
<Setter TargetName="CornerScrollBarRectangle"
Property="Width"
Value="Auto" />
<Setter TargetName="CornerScrollBarRectangle"
Property="Height"
Value="6" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
OK, You can use this example:
<Window x:Class="scrollviewerbackground.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:scrollviewerbackground"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Button x:Name="bt"></Button>
<local:ScrollViewerClickable HorizontalScrollBarVisibility="Visible" Margin="20">
<StackPanel IsHitTestVisible="True" Orientation="Horizontal" Background="{x:Null}">
<Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
<Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
<Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
<Rectangle Fill="Red" Width="100" Margin="50"></Rectangle>
</StackPanel>
</local:ScrollViewerClickable>
</Grid>
public class ScrollViewerClickable : ScrollViewer
{
protected override HitTestResult HitTestCore(PointHitTestParameters hitTestParameters)
{
return null;
}
}
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.
I have a WPF GridSplitter with a controltemplate being applied to add grips and buttons. The height is set to 20px. When I drag the splitter to resize my grid the preview is also 20px. I'd like to change the height of the preview while it's being dragged.
Is there a simple way to accomplish this?
<Style TargetType="{x:Type GridSplitter}" x:Key="AdvancedGridSplitter">
<Setter Property="Background" Value="{DynamicResource {x:Static themes:PropertyGridCommonDictionary.SummarySplitterBackgroundBrushKey}}" />
<Setter Property="BorderBrush" Value="{DynamicResource {x:Static themes:DockingCommonDictionary.DocumentTabBorderNormalBrushKey}}" />
<Setter Property="BorderThickness" Value="0,1" />
<Setter Property="Height" Value="20" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="ResizeBehavior" Value="PreviousAndNext" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="UIElement.SnapsToDevicePixels" Value="True" />
<Setter Property="UIElement.Focusable" Value="False" />
<Setter Property="ShowsPreview" Value="True" />
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Border x:Name="Root" BorderThickness="{TemplateBinding Border.BorderThickness}" BorderBrush="{TemplateBinding Border.BorderBrush}" Background="{TemplateBinding Panel.Background}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" HorizontalAlignment="Center" Margin="2,0,0,0" Orientation="Horizontal" VerticalAlignment="Center">
<ribbon:Button Context="StatusBarItem" Cursor="Arrow" ImageSourceSmall="/Resources/Splitter/SplitterSwitch.png" ImageSourceSmallSize="11,11" Padding="2,0" />
</StackPanel>
<Grid Grid.Column="1" />
<StackPanel Grid.Column="2" HorizontalAlignment="Center" Orientation="Vertical" VerticalAlignment="Center" x:Name="Grip">
<Rectangle Fill="{DynamicResource {x:Static themes:PropertyGridCommonDictionary.BorderBrushKey}}" Height="1" Margin="1" Width="50">
<Rectangle.Effect>
<DropShadowEffect BlurRadius="1" Color="White" Direction="90" Opacity=".8" ShadowDepth="1" />
</Rectangle.Effect>
</Rectangle>
<Rectangle Fill="{DynamicResource {x:Static themes:PropertyGridCommonDictionary.BorderBrushKey}}" Height="1" Margin="1" Width="50">
<Rectangle.Effect>
<DropShadowEffect BlurRadius="1" Color="White" Direction="90" Opacity=".8" ShadowDepth="1" />
</Rectangle.Effect>
</Rectangle>
</StackPanel>
<Grid Grid.Column="3" />
<StackPanel Grid.Column="4" HorizontalAlignment="Center" Margin="0,0,2,0" Orientation="Horizontal" VerticalAlignment="Center">
<ribbon:Button Context="StatusBarItem" Cursor="Arrow" ImageSourceSmall="/Resources/Splitter/SplitterVertical.png" ImageSourceSmallSize="11,11" Padding="2,0" />
<ribbon:Button Context="StatusBarItem" Cursor="Arrow" ImageSourceSmall="/Resources/Splitter/SplitterHorizontal.png" ImageSourceSmallSize="11,11" IsChecked="True" Padding="2,0" />
<ribbon:Button Context="StatusBarItem" Cursor="Arrow" ImageSourceSmall="/Resources/Splitter/SplitterMinimize.png" ImageSourceSmallSize="11,11" Padding="2,0" />
</StackPanel>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="VerticalAlignment" Value="Stretch">
<Setter TargetName="Grip" Property="Orientation" Value="Vertical"/>
<Setter TargetName="Grip" Property="Visibility" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You need to set the PreviewStyle on your GridSplitter:
PreviewStyle="{StaticResource AdvancedGridSplitterPreview}"
An appropriate style could be:
<Style TargetType="{x:Type Control}" x:Key="AdvancedGridSplitterPreview">
<Setter Property="Height" Value="4"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<Rectangle>
<Rectangle.Fill>
<SolidColorBrush Opacity="0.4" Color="Black"/>
</Rectangle.Fill>
</Rectangle>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
See here in the MSDN for another description with example.
Hope this helps.