How to change width for a scroll bar in WPF?

How to change width for a scroll bar in WPF? - c#

In my WPF application I need to change the width size for a SurfaceScrollViewer. At the moment I am using this code with no success.
Any idea how to sole this?
<Window.Resources>
<Style TargetType="ScrollBar">
<Setter Property="Width" Value="25"/>
</Style>
</Window.Resources>

What you need to do is create a style based on the SurfaceListBox (or whatever element you are using to hold your scrollable items).
This will generate a (very verbose unfortunately) complete listing of elements, including the SurfaceScrollViewer and its associated properties. In here you can find the scrollbar element and change it.
If you're not sure what I mean, have a look into a tutorial on restyling WPF checkboxes as it should give you some context.
I've attached a sample layout below:
<UserControl.Resources>
<!-- Base Grid style for 55 dpi -->
<Style TargetType="{x:Type Control}" x:Key="ControlBaseStyle">
<Setter Property="FocusVisualStyle"
Value="{x:Null}"/>
<Setter Property="SnapsToDevicePixels"
Value="False"/>
<Setter Property="FontFamily"
Value="Segoe360"/>
<Setter Property="FontWeight"
Value="Normal"/>
<Setter Property="FontSize"
Value="17"/>
<Setter Property="Padding"
Value="6,2,10,10"/>
<Setter Property="MinHeight"
Value="38"/>
<Setter Property="MinWidth"
Value="38"/>
<Setter Property="Margin"
Value="1"/>
<Setter Property="HorizontalContentAlignment"
Value="Left"/>
<Setter Property="VerticalContentAlignment"
Value="Top"/>
<Setter Property="BorderThickness"
Value="2"/>
</Style>
<!-- public section -->
<SolidColorBrush x:Key="ControlHitAreaBrush"
Color="#00FFFFFF"/>
<Style x:Key="UnstyledContainer" TargetType="{x:Type controls:SurfaceListBoxItem}" BasedOn="{StaticResource ControlBaseStyle}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static controls:SurfaceColors.ListBoxItemForegroundBrushKey}}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:SurfaceListBoxItem}">
<Grid x:Name="Grid" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Margin="10,0">
<Border x:Name="ButtonBody"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<Border x:Name="PressOverlay"
Opacity="0"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
<ContentPresenter x:Name="Content"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Minimum HitArea Base Style for 55 dpi-->
<Style x:Key="SurfaceHitAreaBaseStyle"
TargetType="{x:Type Control}">
<Setter Property="SnapsToDevicePixels"
Value="False"/>
<Setter Property="Background"
Value="{StaticResource ControlHitAreaBrush}"/>
<Setter Property="IsTabStop"
Value="False"/>
<Setter Property="Focusable"
Value="False"/>
<Setter Property="FocusVisualStyle"
Value="{x:Null}"/>
<Setter Property="MinWidth"
Value="40" />
<Setter Property="MinHeight"
Value="40" />
</Style>
<Style x:Key="SurfaceVertScrollBarRepeatButton"
TargetType="{x:Type controls:SurfaceRepeatButton}" >
<Setter Property="Interval"
Value="150" />
<Setter Property="BorderBrush"
Value="{x:Null}" />
<Setter Property="Background"
Value="{StaticResource ControlHitAreaBrush}" />
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:SurfaceRepeatButton}">
<Grid Width="40" Background="{TemplateBinding Background}">
<Rectangle HorizontalAlignment="Center"
x:Name="Line"
MinWidth="2"
Fill="{DynamicResource {x:Static controls:SurfaceColors.TrackBackgroundBrushKey}}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="Fill"
TargetName="Line"
Value="{DynamicResource {x:Static controls:SurfaceColors.ThumbDisabledBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- ScrollBar Vert Thumb -->
<Style x:Key="SurfaceScrollBarThumbStyle"
TargetType="{x:Type controls:SurfaceThumb}"
BasedOn="{StaticResource SurfaceHitAreaBaseStyle}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:SurfaceThumb}">
<ControlTemplate.Resources>
<Storyboard x:Key="Touch">
<DoubleAnimation Duration="0:0:0.05"
Storyboard.TargetName="Thumb"
Storyboard.TargetProperty="Width"
To="16"/>
<ThicknessAnimation Duration="0:0:0.05"
Storyboard.TargetName="Thumb"
Storyboard.TargetProperty="Margin"
To="-1,0,-1,0" />
</Storyboard>
<Storyboard x:Key="Release">
<DoubleAnimation Duration="0:0:0.1"
Storyboard.TargetName="Thumb"
Storyboard.TargetProperty="Width"
To="14"/>
<ThicknessAnimation Duration="0:0:0.1"
Storyboard.TargetName="Thumb"
Storyboard.TargetProperty="Margin"
To="0,0,0,0" />
</Storyboard>
</ControlTemplate.Resources>
<Grid x:Name="Grid"
Background="{TemplateBinding Background}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
<Rectangle x:Name="Thumb"
Height="Auto"
Width="14"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Fill="{DynamicResource {x:Static controls:SurfaceColors.ThumbEnabledBrushKey}}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="controls:TouchExtensions.AreAnyInputDevicesCapturedWithin"
Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Touch}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource Release}"/>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="Fill"
TargetName="Thumb"
Value="{DynamicResource {x:Static controls:SurfaceColors.ThumbDisabledBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- ScrollBar RepeatButton -->
<Style x:Key="SurfaceHorzScrollBarRepeatButton"
TargetType="{x:Type controls:SurfaceRepeatButton}" >
<Setter Property="Interval"
Value="150" />
<Setter Property="BorderBrush"
Value="{x:Null}" />
<Setter Property="Background"
Value="{StaticResource ControlHitAreaBrush}" />
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:SurfaceRepeatButton}">
<Grid Height="40" Background="{TemplateBinding Background}">
<Rectangle VerticalAlignment="Center"
x:Name="Line"
MinHeight="2"
Fill="{DynamicResource {x:Static controls:SurfaceColors.TrackBackgroundBrushKey}}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="Fill"
TargetName="Line"
Value="{DynamicResource {x:Static controls:SurfaceColors.ThumbDisabledBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SurfaceScrollBarHorizThumbStyle"
TargetType="{x:Type controls:SurfaceThumb}"
BasedOn="{StaticResource SurfaceHitAreaBaseStyle}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:SurfaceThumb}">
<ControlTemplate.Resources>
<!-- Vertical orientation -->
<Storyboard x:Key="Touch">
<DoubleAnimation Duration="0:0:0.05"
Storyboard.TargetName="Thumb"
Storyboard.TargetProperty="Height"
To="16"/>
<ThicknessAnimation Duration="0:0:0.05"
Storyboard.TargetName="Thumb"
Storyboard.TargetProperty="Margin"
To="0,-1,0,-1" />
</Storyboard>
<Storyboard x:Key="Release">
<DoubleAnimation Duration="0:0:0.1"
Storyboard.TargetName="Thumb"
Storyboard.TargetProperty="Height"
To="14"/>
<ThicknessAnimation Duration="0:0:0.1"
Storyboard.TargetName="Thumb"
Storyboard.TargetProperty="Margin"
To="0,0,0,0" />
</Storyboard>
</ControlTemplate.Resources>
<Grid x:Name="Grid"
Background="{TemplateBinding Background}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" >
<Rectangle x:Name="Thumb"
Width="Auto"
Height="14"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Fill="{DynamicResource {x:Static controls:SurfaceColors.ThumbEnabledBrushKey}}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="controls:TouchExtensions.AreAnyInputDevicesCapturedWithin"
Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Touch}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource Release}"/>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="Fill"
TargetName="Thumb"
Value="{DynamicResource {x:Static controls:SurfaceColors.ThumbDisabledBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- ScrollBar -->
<Style x:Key="SurfaceScrollBarStyle"
TargetType="{x:Type controls:SurfaceScrollBar}"
>
<Style.Resources>
<System:Double x:Key="{x:Static SystemParameters.VerticalScrollBarButtonHeightKey}">38</System:Double>
<System:Double x:Key="{x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}">38</System:Double>
</Style.Resources>
<Setter Property="Stylus.IsPressAndHoldEnabled"
Value="False"/>
<Setter Property="Stylus.IsFlicksEnabled"
Value="False"/>
<Setter Property="Width"
Value="38"/>
<Setter Property="Height"
Value="Auto"/>
<Setter Property="Template">
<Setter.Value>
<!-- vertical scroll bar -->
<ControlTemplate TargetType="{x:Type controls:SurfaceScrollBar}">
<Grid x:Name="GridRoot" Background="{TemplateBinding Background}">
<Border x:Name="Track"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch">
<Track x:Name="PART_Track"
IsDirectionReversed="True">
<Track.IncreaseRepeatButton>
<controls:SurfaceRepeatButton x:Name="IncreaseRepeat"
Background="{TemplateBinding Background}"
HorizontalAlignment="Center"
Style="{StaticResource SurfaceVertScrollBarRepeatButton}"
Command="ScrollBar.PageDownCommand"/>
</Track.IncreaseRepeatButton>
<Track.DecreaseRepeatButton>
<controls:SurfaceRepeatButton x:Name="DecreaseRepeat"
Background="{TemplateBinding Background}"
HorizontalAlignment="Center"
Style="{StaticResource SurfaceVertScrollBarRepeatButton}"
Command="ScrollBar.PageUpCommand"/>
</Track.DecreaseRepeatButton>
<Track.Thumb>
<controls:SurfaceThumb Style="{StaticResource SurfaceScrollBarThumbStyle}"
Background="{TemplateBinding Background}"
HorizontalAlignment="Center"
x:Name="Thumb"/>
</Track.Thumb>
</Track>
</Border>
</Grid>
<ControlTemplate.Triggers>
<!-- Animates Scrollbar from small to large state -->
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="IsEnabled"
TargetName="PART_Track"
Value="False"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.BasedOn>
<StaticResource ResourceKey="SurfaceHitAreaBaseStyle"/>
</Style.BasedOn>
<Style.Triggers>
<!-- Horizontal orientation -->
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="Width"
Value="Auto"/>
<Setter Property="Height"
Value="38"/>
<!-- change the whole template -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:SurfaceScrollBar}">
<Grid x:Name="GridRoot" Background="{TemplateBinding Background}">
<Border x:Name="Track"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch">
<Track x:Name="PART_Track">
<Track.DecreaseRepeatButton>
<controls:SurfaceRepeatButton x:Name="DecreaseRepeat"
Background="{TemplateBinding Background}"
VerticalAlignment="Center"
Style="{StaticResource SurfaceHorzScrollBarRepeatButton}"
Command="ScrollBar.PageLeftCommand" />
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<controls:SurfaceRepeatButton x:Name="IncreaseRepeat"
Background="{TemplateBinding Background}"
VerticalAlignment="Center"
Style="{StaticResource SurfaceHorzScrollBarRepeatButton}"
Command="ScrollBar.PageRightCommand"/>
</Track.IncreaseRepeatButton>
<Track.Thumb>
<controls:SurfaceThumb Style="{StaticResource SurfaceScrollBarHorizThumbStyle}"
Background="{TemplateBinding Background}"
VerticalAlignment="Center"
x:Name="Thumb"/>
</Track.Thumb>
</Track>
</Border>
</Grid>
<ControlTemplate.Triggers>
<!-- Animates Scrollbar from small to large state -->
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="Opacity"
TargetName="IncreaseRepeat"
Value="0.33"/>
<Setter Property="Opacity"
TargetName="DecreaseRepeat"
Value="0.33"/>
<Setter Property="IsEnabled"
TargetName="PART_Track"
Value="False"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
<!-- ScrollViewerBase -->
<Style x:Key="SurfaceScrollViewerStyle"
TargetType="{x:Type controls:SurfaceScrollViewer}">
<Setter Property="Elasticity"
Value="0.4,0.4" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility"
Value="Auto" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:SurfaceScrollViewer}">
<Grid Background="{TemplateBinding Background}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border x:Name="PART_ElasticBorder"
Background="{TemplateBinding Background}">
<ScrollContentPresenter
Margin="-1,-1,-1,-1"
Grid.Column="0"
Grid.ColumnSpan="1"
Grid.Row="0"
Grid.RowSpan="1"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
CanContentScroll="{TemplateBinding CanContentScroll}"
CanHorizontallyScroll="False"
CanVerticallyScroll="False"
ScrollViewer.HorizontalScrollBarVisibility="Disabled" />
</Border>
<controls:SurfaceScrollBar Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
x:Name="PART_HorizontalScrollBar"
Grid.Column="0"
Grid.Row="1"
Orientation="Horizontal"
Maximum="{TemplateBinding ScrollableWidth}"
Minimum="0"
Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
AutomationProperties.AutomationId="HorizontalScrollBar"
Height="Auto"
Style="{StaticResource SurfaceScrollBarStyle}"
LargeChange="1"
ViewportSize="{TemplateBinding ViewportWidth}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
HorizontalAlignment="Stretch"
Foreground="{x:Null}"/>
<controls:SurfaceScrollBar Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
x:Name="PART_VerticalScrollBar"
Grid.Column="1"
Grid.Row="0"
Orientation="Vertical"
Maximum="{TemplateBinding ScrollableHeight}"
Minimum="0"
Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
AutomationProperties.AutomationId="VerticalScrollBar"
Width="Auto"
Style="{StaticResource SurfaceScrollBarStyle}"
LargeChange="1"
ViewportSize="{TemplateBinding ViewportHeight}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
HorizontalAlignment="Stretch"
Foreground="{x:Null}"
IsEnabled="True"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="IsEnabled"
TargetName="PART_HorizontalScrollBar"
Value="False" />
<Setter Property="IsEnabled"
TargetName="PART_VerticalScrollBar"
Value="False" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Listbox ScrollView -->
<Style x:Key="SurfaceListBoxScrollViewerStyle"
TargetType="{x:Type controls:SurfaceScrollViewer}"
BasedOn="{StaticResource SurfaceScrollViewerStyle}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:SurfaceScrollViewer}">
<Grid
HorizontalAlignment="Stretch"
Margin="{TemplateBinding BorderThickness}"
VerticalAlignment="Stretch"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border x:Name="PART_ElasticBorder"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
BorderBrush="Transparent"
>
<ScrollContentPresenter Margin="{TemplateBinding Padding}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
CanContentScroll="{TemplateBinding CanContentScroll}"
CanHorizontallyScroll="False"
CanVerticallyScroll="False"
Grid.ColumnSpan="1"
Grid.RowSpan="1"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
<controls:SurfaceScrollBar Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
x:Name="PART_HorizontalScrollBar"
Grid.Row="1"
Orientation="Horizontal"
ViewportSize="{TemplateBinding ViewportWidth}"
Maximum="{TemplateBinding ScrollableWidth}"
Minimum="0"
Background="{TemplateBinding Background}"
Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
AutomationProperties.AutomationId="HorizontalScrollBar"
Height="Auto"
Style="{StaticResource SurfaceScrollBarStyle}"
LargeChange="1"
ClipToBounds="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
<controls:SurfaceScrollBar Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
x:Name="PART_VerticalScrollBar"
Grid.Column="1"
Grid.Row="0"
Orientation="Vertical"
ViewportSize="{TemplateBinding ViewportHeight}"
Maximum="{TemplateBinding ScrollableHeight}"
Minimum="0"
Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
AutomationProperties.AutomationId="VerticalScrollBar"
Width="Auto"
Style="{StaticResource SurfaceScrollBarStyle}"
LargeChange="1"
ClipToBounds="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<Border x:Name="Container"
Grid.Column="1"
Grid.Row="1"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
BorderBrush="Transparent"
/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="IsEnabled"
TargetName="PART_HorizontalScrollBar"
Value="False"/>
<Setter Property="IsEnabled"
TargetName="PART_VerticalScrollBar"
Value="False"/>
<Setter Property="BorderBrush"
TargetName="PART_ElasticBorder"
Value="{DynamicResource {x:Static controls:SurfaceColors.ControlBorderDisabledBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- ListBox -->
<Style x:Key="UnstyledList" TargetType="{x:Type controls:SurfaceListBox}"
BasedOn="{StaticResource ControlBaseStyle}">
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility"
Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll"
Value="False" />
<Setter Property="controls:SurfaceScrollViewer.Elasticity"
Value="0,0.4" />
<Setter Property="MinHeight"
Value="80" />
<Setter Property="Foreground"
Value="{DynamicResource {x:Static controls:SurfaceColors.ButtonForegroundBrushKey}}"/>
<Setter Property="BorderBrush"
Value="{DynamicResource {x:Static controls:SurfaceColors.ListBoxBorderBrushKey}}"/>
<Setter Property="Padding"
Value="0" />
<Setter Property="BorderThickness"
Value="2" />
<Setter Property="Margin"
Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:SurfaceListBox}">
<Grid SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" >
<controls:SurfaceScrollViewer
Style="{StaticResource SurfaceListBoxScrollViewerStyle}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
Focusable="False"
Foreground="{TemplateBinding Foreground}"
Width="Auto"
Height="Auto"
MinHeight="{TemplateBinding MinHeight}"
MinWidth="{TemplateBinding MinWidth}"
x:Name="scrollViewer"
Elasticity="{TemplateBinding controls:SurfaceScrollViewer.Elasticity}">
<ItemsPresenter ClipToBounds="False"
MinHeight="{TemplateBinding MinHeight}"
MinWidth="{TemplateBinding MinWidth}"/>
</controls:SurfaceScrollViewer>
<Border x:Name="Border"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsGrouping"
Value="True">
<Setter Property="ScrollViewer.CanContentScroll"
Value="False" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<s:SurfaceListBox x:Name="someList" Background="{x:Null}" Foreground="{x:Null}" BorderBrush="{x:Null}" ItemContainerStyle="{DynamicResource UnstyledContainer}" Style="{DynamicResource UnstyledList}" />

Related

Thumb of scrollbar not working according to Content height for WPF

I working for a project and i have some trouble with Listview's scrollbar
Problem: this scrollbar thumb is shortly according to content height.
I find it. some solve but i didint find it.
what add to this style ? or discard anything
e.g content height 300 but thumb just going between up/down 0px and 30px
This is style of Scroolbar.xaml
<Style x:Key="ScrollBarTrackThumb" TargetType="{x:Type Thumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Grid x:Name="Grid" Height="19">
<Rectangle HorizontalAlignment="Stretch" />
<Border
x:Name="CornerScrollBarRectangle"
Margin="0,1,0,1"
Background="{TemplateBinding Background}"
CornerRadius="50" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Tag" Value="Horizontal">
<Setter TargetName="CornerScrollBarRectangle" Property="Width" Value="Auto" />
<Setter TargetName="CornerScrollBarRectangle" Property="Height" Value="0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type ScrollBar}">
<Setter Property="Stylus.IsFlicksEnabled" Value="True" />
<Setter Property="Foreground" Value="#5A3CB6" />
<Setter Property="Background" Value="{x:Null}" />
<Setter Property="Width" Value="19" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid
x:Name="GridRoot"
Width="19"
Height="300"
Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="0.5*" />
</Grid.RowDefinitions>
<Rectangle
Width="1"
Margin="0,40"
VerticalAlignment="Stretch"
Stroke="LightGray" />
<Track
x:Name="PART_Track"
Focusable="false"
IsDirectionReversed="true">
<Track.Thumb>
<Thumb
x:Name="Thumb"
Height="19"
Margin="0,30,0,0"
VerticalAlignment="Top"
Background="{TemplateBinding Foreground}"
Style="{DynamicResource ScrollBarTrackThumb}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton
x:Name="PageUp"
Command="ScrollBar.PageDownCommand"
Focusable="false"
Opacity="0" />
</Track.IncreaseRepeatButton>
<Track.DecreaseRepeatButton>
<RepeatButton
x:Name="PageDown"
Command="ScrollBar.PageUpCommand"
Focusable="false"
Opacity="0" />
</Track.DecreaseRepeatButton>
</Track>
</Grid>
<ControlTemplate.Triggers>
<Trigger SourceName="Thumb" Property="IsMouseOver" Value="true">
<Setter TargetName="Thumb" Property="Background" Value="{DynamicResource ButtonSelectBrush}" />
</Trigger>
<Trigger SourceName="Thumb" Property="IsDragging" Value="true">
<Setter TargetName="Thumb" Property="Background" Value="{DynamicResource DarkBrush}" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Thumb" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
What can I do that?

Connecting The ComboBox Popup Border to Main ComboBox Border

I'm trying to match the Style of a ComboBox I'm creating to a design I have.
I'm unable to connect the Popup border to the Main Border that shows the selected ComboBox item.
I took this ComboBox Template from a site, changed some properties to match the design's style, things were coming along good until I realized I can't connect these 2 aforementioned borders. I'm not exactly sure how we could go about doing it.
I also thought about adding 2 Rows and making the ComboBox Popup Rowspawn but that didn't work either.
Creating a StackOverflow post as I ran out of ideas, any ideas are welcome.
Thank you in advance.
Edit: I was able to use VerticalOffset to move the Popup up, where I want it to be but I can't tuck it underneath the Border I create within the ToggleButton template. Panel.ZIndex usage didn't help either. Still working on a way to accomplish this task.
Design:
My ComboBox:
Here's the part I have an issue with (Along with other parts that I'll address myself later):
Here's my code:
<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border x:Name="Border"
Grid.ColumnSpan="2"
CornerRadius="4"
Background="#FFFFFF">
<Border.Effect>
<DropShadowEffect ShadowDepth="0"
Color="Black"
Opacity="0.29"
BlurRadius="5"/>
</Border.Effect>
</Border>
<Border Grid.Column="0"
CornerRadius="4,0,0,4"
Margin="0,0,1,0"
Background="#FFFFFF"
BorderBrush="LightGray"
BorderThickness="0,0,1.7,0">
</Border>
<Canvas Width="30"
Height="30"
Grid.Column="1"
Margin="9,-18,0,0">
<Canvas.LayoutTransform>
<MatrixTransform Matrix="1,0,0,-1,0,0" />
</Canvas.LayoutTransform>
<Path Data="M131.6625 270.6375A21.1875 21.1875 0 0 0 168.4125 270.6375L296.98125 51.88125C305.55 37.29375 295.25625 18.75 278.60625 18.75H21.45C4.78125 18.75 -5.49375 37.3125 3.075 51.88125L131.6625 270.6375z"
Stroke="{x:Null}"
Fill="#707070"
Stretch="Uniform"
Width="10"
Height="10"
SnapsToDevicePixels="False"
UseLayoutRounding="False"
StrokeThickness="0"
StrokeStartLineCap="flat"
StrokeEndLineCap="flat"
StrokeLineJoin="miter"/>
</Canvas>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="ComboBoxTextBox" TargetType="{x:Type TextBox}">
<Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />
</ControlTemplate>
<Style x:Key="{x:Type ComboBox}" TargetType="{x:Type ComboBox}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Visible"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="MinWidth" Value="120"/>
<Setter Property="MinHeight" Value="20"/>
<Setter Property="Foreground" Value="#707070"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<ToggleButton
Name="ToggleButton"
Template="{StaticResource ComboBoxToggleButton}"
Grid.Column="2"
Focusable="false"
IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press">
</ToggleButton>
<ContentPresenter Name="ContentSite" IsHitTestVisible="False" Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="15,3,23,3"
VerticalAlignment="Center"
HorizontalAlignment="Left" />
<TextBox x:Name="PART_EditableTextBox"
Style="{x:Null}"
Template="{StaticResource ComboBoxTextBox}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="15,3,23,3"
Focusable="True"
Background="#FF3F3F3F"
Foreground="Green"
Visibility="Hidden"
IsReadOnly="{TemplateBinding IsReadOnly}"/>
<Popup
Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide">
<Grid Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}"
Margin="15,15,15,15">
<Border
x:Name="DropDownBorder"
Background="White"
BorderThickness="0"
BorderBrush="#888888">
<Border.Effect>
<DropShadowEffect ShadowDepth="0"
Color="Black"
Opacity="0.29"
BlurRadius="5"/>
</Border.Effect>
</Border>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#888888"/>
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
<Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
<Setter TargetName="DropDownBorder" Property="CornerRadius" Value="0"/>
<Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/>
</Trigger>
<Trigger Property="IsEditable" Value="true">
<Setter Property="IsTabStop" Value="false"/>
<Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/>
<Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
</Style.Triggers>
</Style>
<!-- SimpleStyles: ComboBoxItem -->
<Style x:Key="{x:Type ComboBoxItem}" TargetType="{x:Type ComboBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="Foreground" Value="#707070"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border Name="Border"
Padding="2"
SnapsToDevicePixels="true">
<ContentPresenter Margin="8,3,23,3"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

IconPack:FontAwesome Icon Disappearing In Custom TabItem

New to WPF and may have taken a wrong turn a while ago but I have everything working so far it's just the TabItem "Icon" isn't staying after I change to another tab. It disappears as though we only have one close out button.
<UserControl.Resources>
<Style BasedOn="{StaticResource {x:Type Controls:Tile}}" TargetType="Controls:Tile" x:Key="ClosableTabButton">
<Setter Property="Width"
Value="17"/>
<Setter Property="Height"
Value="17"/>
<Setter Property="Content">
<Setter.Value>
<iconPacks:PackIconFontAwesome Margin="0,0,0,0"
Width="15"
Height="15"
Kind="PlusCircleSolid"
Rotation="45"
RenderTransformOrigin="0.5,0.5"
Foreground="#FFFFFF">
</iconPacks:PackIconFontAwesome>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Content">
<Setter.Value>
<iconPacks:PackIconFontAwesome Margin="0,0,0,0"
Width="15"
Height="15"
Kind="PlusCircleSolid"
Rotation="45"
RenderTransformOrigin="0.5,0.5"
Foreground="#ff0000">
</iconPacks:PackIconFontAwesome>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
That's my custom Tile for the Icon/Button.
<Grid>
<TabControl Name="tabControl" ItemsSource="{Binding}" SelectionChanged="tabControl_SelectionChanged">
<TabControl.Template>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid x:Name="templateRoot" ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="ColumnDefinition0"/>
<ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="RowDefinition0" Height="Auto"/>
<RowDefinition x:Name="RowDefinition1" Height="*"/>
</Grid.RowDefinitions>
<WrapPanel x:Name="headerPanel" Background="Transparent" Grid.Column="0" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1"/>
<Border x:Name="contentPanel" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="1" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
<ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="TabStripPlacement" Value="Bottom">
<Setter Property="Grid.Row" TargetName="headerPanel" Value="1"/>
<Setter Property="Grid.Row" TargetName="contentPanel" Value="0"/>
<Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
<Setter Property="Height" TargetName="RowDefinition1" Value="Auto"/>
<Setter Property="Margin" TargetName="headerPanel" Value="2,0,2,2"/>
</Trigger>
<Trigger Property="TabStripPlacement" Value="Left">
<Setter Property="Grid.Row" TargetName="headerPanel" Value="0"/>
<Setter Property="Grid.Row" TargetName="contentPanel" Value="0"/>
<Setter Property="Grid.Column" TargetName="headerPanel" Value="0"/>
<Setter Property="Grid.Column" TargetName="contentPanel" Value="1"/>
<Setter Property="Width" TargetName="ColumnDefinition0" Value="Auto"/>
<Setter Property="Width" TargetName="ColumnDefinition1" Value="*"/>
<Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
<Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
<Setter Property="Margin" TargetName="headerPanel" Value="2,2,0,2"/>
</Trigger>
<Trigger Property="TabStripPlacement" Value="Right">
<Setter Property="Grid.Row" TargetName="headerPanel" Value="0"/>
<Setter Property="Grid.Row" TargetName="contentPanel" Value="0"/>
<Setter Property="Grid.Column" TargetName="headerPanel" Value="1"/>
<Setter Property="Grid.Column" TargetName="contentPanel" Value="0"/>
<Setter Property="Width" TargetName="ColumnDefinition0" Value="*"/>
<Setter Property="Width" TargetName="ColumnDefinition1" Value="Auto"/>
<Setter Property="Height" TargetName="RowDefinition0" Value="*"/>
<Setter Property="Height" TargetName="RowDefinition1" Value="0"/>
<Setter Property="Margin" TargetName="headerPanel" Value="0,2,2,2"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="TextElement.Foreground" TargetName="templateRoot" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</TabControl.Template>
<TabControl.Resources>
<DataTemplate x:Key="TabHeader" DataType="TabItem">
<Border>
<Grid>
<Grid>
<Border x:Name="border"
CornerRadius="5,5,0,0"
Background="#CC647687"
Opacity="80"/>
<Grid x:Name="headerGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Name="Col1" Width="*"></ColumnDefinition>
<ColumnDefinition Name="Col2" Width="22"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock x:Name="textInHeader" FontSize="18" Foreground="#FFFFFF" Grid.Column="0" Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem}}, Path=Header}" Margin="5,0,0,0" HorizontalAlignment="Left"/>
<Controls:Tile x:Name="closeBtn" Background="Transparent" Grid.Column="1" Style="{StaticResource ClosableTabButton}" CommandParameter="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem}}, Path=Name}" ToolTip="Close Tab." Click="closeBtn_Click"/>
</Grid>
</Grid>
</Grid>
</Border>
</DataTemplate>
</TabControl.Resources>
</TabControl>
</Grid>
That's my grid inside the UserControl. I can provide more information if needed.

I figured it out. I was setting the content of the style but it only affected the last tab that was added. It was because I wasn't setting the templates content. Which makes sense.
<UserControl.Resources>
<Style BasedOn="{StaticResource {x:Type Controls:Tile}}" TargetType="Controls:Tile" x:Key="ClosableTabButton">
<Setter Property="Width"
Value="17"/>
<Setter Property="Height"
Value="17"/>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<iconPacks:PackIconFontAwesome Margin="0,0,0,0"
Width="15"
Height="15"
Kind="PlusCircleSolid"
Rotation="45"
RenderTransformOrigin="0.5,0.5"
Foreground="#FFFFFF">
</iconPacks:PackIconFontAwesome>
</DataTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<iconPacks:PackIconFontAwesome Margin="0,0,0,0"
Width="15"
Height="15"
Kind="PlusCircleSolid"
Rotation="45"
RenderTransformOrigin="0.5,0.5"
Foreground="#ff0000">
</iconPacks:PackIconFontAwesome>
</DataTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>

WPF TreeView Disable Children Selection

I am looking for a way to disable a built in action of the WPF TreeView. In WPF, when you select a parent node of a TreeView, it also selects all children nodes in that group. I don't want this. What I want is a single selection. Here is an image showing what is currently happening:
Again, what I am wanting is to only select single rows.
Here is the XAML that I'm currently using:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="VoidwalkerTreeView" TargetType="{x:Type TreeView}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TreeView">
<Border
Name="Border"
Background="{DynamicResource Voidwalker_Brush_ContextArea}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ScrollViewer
Padding="4"
CanContentScroll="False"
Focusable="False">
<ItemsPresenter />
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ExpandCollapseToggleStyle" TargetType="ToggleButton">
<Setter Property="Focusable" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid
Width="15"
Height="13"
Background="Transparent">
<Path
x:Name="Collapsed"
Margin="1,1,1,1"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Data="M 4 0 L 8 4 L 4 8 Z"
Fill="{DynamicResource Voidwalker_Brush_ActiveTextForeground}" />
<Path
x:Name="Expanded"
Margin="1,1,1,1"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Data="M 0 4 L 8 4 L 4 8 Z"
Fill="{DynamicResource Voidwalker_Brush_ActiveTextForeground}"
Visibility="Hidden" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Collapsed" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Expanded" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked" />
<VisualState x:Name="Indeterminate" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="TreeViewItemFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Border>
<Rectangle
Margin="0,0,0,0"
Opacity="0"
Stroke="Black"
StrokeDashArray="1 2"
StrokeThickness="5" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="{x:Type TreeViewItem}" TargetType="{x:Type TreeViewItem}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="HorizontalContentAlignment" Value="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
<Setter Property="VerticalContentAlignment" Value="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" />
<Setter Property="Padding" Value="1,0,0,0" />
<Setter Property="Foreground" Value="{DynamicResource Voidwalker_Brush_ActiveTextForeground}" />
<Setter Property="FocusVisualStyle" Value="{StaticResource TreeViewItemFocusVisual}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TreeViewItem}">
<Grid x:Name="itemGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="19" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<ToggleButton
x:Name="Expander"
ClickMode="Press"
IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
Style="{StaticResource ExpandCollapseToggleStyle}" />
<Border
x:Name="Bd"
Grid.Column="1"
Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="true">
<ContentPresenter
x:Name="PART_Header"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
ContentSource="Header"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
<ItemsPresenter
x:Name="ItemsHost"
Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="2" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="false">
<Setter TargetName="ItemsHost" Property="Visibility" Value="Collapsed" />
</Trigger>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="Expander" Property="Visibility" Value="Hidden" />
</Trigger>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="itemGrid" Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true" />
<Condition Property="IsSelectionActive" Value="false" />
</MultiTrigger.Conditions>
<Setter TargetName="itemGrid" Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
</MultiTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Does anyone know how to change this XAML, or point me in the correct direction as to how I can allow only single row selection? A good example of the desired behavior is how Visual Studio treats it's solution treeview. You can only do single selection, unless you deliberately hold down shift or something.

In your IsSelected trigger for the TreeViewItem style, you are changing the background colour of itemGrid. itemGrid contains everything - the header and child items. Try targeting to something more specific (e.g. the border Bd):
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Bd" Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
</Trigger>

custom combobox in wpf Application

Im new to WPF Application. I need to customize my combobox like this image.
I have tried this example
http://www.eidias.com/Blog/2012/2/20/customizing-wpf-combo-box-style
<Window x:Class="win.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300" Background="Red">
<Window.Resources>
<ControlTemplate x:Key="CustomToggleButton" TargetType="ToggleButton">
<Grid>
<Border Name="Border" />
<Border Name="SmallBorder" />
<Path Name="Arrow" />
</Grid>
</ControlTemplate>
<Style TargetType="{x:Type ComboBoxItem}">
<Setter Property="FrameworkElement.OverridesDefaultStyle" Value="True" />
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border>
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type ComboBox}">
<Setter Property="FrameworkElement.OverridesDefaultStyle" Value="True" />
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<ToggleButton Template="{StaticResource CustomToggleButton}" />
<ContentPresenter />
<TextBox />
<Popup>
<Grid>
<Border>
<ScrollViewer>
<ItemsPresenter />
</ScrollViewer>
</Border>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<ComboBox Grid.Column="1" Height="40" Width="200" >
<ComboBoxItem Name="item1">item1</ComboBoxItem>
<ComboBoxItem Name="item2">item2</ComboBoxItem>
<ComboBoxItem Name="item3">item3</ComboBoxItem>
</ComboBox>
</Grid>
</Window>
This output works like textbox.Please help me guys!

I also liked the format and decided to reproduce it. Please find the XAML below. Hope it helps someone...
<Window x:Class="ComboStyle.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Border
x:Name="Border"
Grid.ColumnSpan="2"
CornerRadius="0"
Background="#FF3F3F3F"
BorderBrush="#FF97A0A5"
BorderThickness="1" />
<Border
Grid.Column="0"
CornerRadius="0"
Margin="1"
Background="#FF3F3F3F"
BorderBrush="#FF97A0A5"
BorderThickness="0,0,1,0" />
<Path
x:Name="Arrow"
Grid.Column="1"
Fill="White"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z"
/>
</Grid>
<!--<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsMouseOver" Value="true">
<Setter TargetName="Border" Property="Background" Value="#808080" />
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="true">
<Setter TargetName="Border" Property="Background" Value="#E0E0E0" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="Background" Value="#EEEEEE" />
<Setter TargetName="Border" Property="BorderBrush" Value="#AAAAAA" />
<Setter Property="Foreground" Value="#888888"/>
<Setter TargetName="Arrow" Property="Fill" Value="#888888" />
</Trigger>
</ControlTemplate.Triggers>-->
</ControlTemplate>
<ControlTemplate x:Key="ComboBoxTextBox" TargetType="{x:Type TextBox}">
<Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />
</ControlTemplate>
<Style x:Key="{x:Type ComboBox}" TargetType="{x:Type ComboBox}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="MinWidth" Value="120"/>
<Setter Property="MinHeight" Value="20"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<ToggleButton
Name="ToggleButton"
Template="{StaticResource ComboBoxToggleButton}"
Grid.Column="2"
Focusable="false"
IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press">
</ToggleButton>
<ContentPresenter Name="ContentSite" IsHitTestVisible="False" Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="3,3,23,3"
VerticalAlignment="Center"
HorizontalAlignment="Left" />
<TextBox x:Name="PART_EditableTextBox"
Style="{x:Null}"
Template="{StaticResource ComboBoxTextBox}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="3,3,23,3"
Focusable="True"
Background="#FF3F3F3F"
Foreground="Green"
Visibility="Hidden"
IsReadOnly="{TemplateBinding IsReadOnly}"/>
<Popup
Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide">
<Grid Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border
x:Name="DropDownBorder"
Background="#FF3F3F3F"
BorderThickness="1"
BorderBrush="#888888"/>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#888888"/>
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
<Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
<Setter TargetName="DropDownBorder" Property="CornerRadius" Value="0"/>
<Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/>
</Trigger>
<Trigger Property="IsEditable" Value="true">
<Setter Property="IsTabStop" Value="false"/>
<Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/>
<Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
</Style.Triggers>
</Style>
<!-- SimpleStyles: ComboBoxItem -->
<Style x:Key="{x:Type ComboBoxItem}" TargetType="{x:Type ComboBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border Name="Border"
Padding="2"
SnapsToDevicePixels="true">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="true">
<Setter TargetName="Border" Property="Background" Value="#FF4F4F4F"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#888888"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Border Padding="10" Background="#FF3F3F3F">
<ComboBox Grid.Column="1" Height="30" Width="250" >
<ComboBoxItem Name="Item1">Item1</ComboBoxItem>
<ComboBoxItem Name="Item2">Item2</ComboBoxItem>
<ComboBoxItem Name="Item3">Item3</ComboBoxItem>
<ComboBoxItem Name="Item4">Item4</ComboBoxItem>
<ComboBoxItem Name="Item5">Item5</ComboBoxItem>
<ComboBoxItem Name="Item6">Item6</ComboBoxItem>
</ComboBox>
</Border>
</Grid>

Check out this link:
http://www.eidias.com/Blog/2012/2/20/customizing-wpf-combo-box-style
This is a blog with example code on how to make a custom Combobox. The custom combobox he is making looks very much like the one you need. So I think this will be very useful to you.

Here is a complete style for WPF ComboBox. It is also easy to customize.
http://www.wpfhelper.com/index.php/styles-in-wpf/combobox/15-combobox-style-in-wpf
The codes are quite long so I will not post them all here. However, here is the base ComboBox style:
<Style TargetType="{x:Type ComboBox}">
<Setter Property="Foreground" Value="Gray" />
<Setter Property="BorderBrush" Value="Gray" />
<Setter Property="Background" Value="White" />
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="FontSize" Value="16" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="MinWidth" Value="50"/>
<Setter Property="MinHeight" Value="32"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<ToggleButton
Name="ToggleButton"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
Foreground="{TemplateBinding Foreground}"
Style="{StaticResource ComboBoxToggleButton}"
Grid.Column="2"
Focusable="false"
IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press">
</ToggleButton>
<ContentPresenter
Name="ContentSite"
IsHitTestVisible="False"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="10,3,30,3"
VerticalAlignment="Center"
HorizontalAlignment="Center" />
<TextBox x:Name="PART_EditableTextBox"
Style="{x:Null}"
Template="{StaticResource ComboBoxTextBox}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="3,3,23,3"
Focusable="True"
Visibility="Hidden"
IsReadOnly="{TemplateBinding IsReadOnly}"/>
<Popup
Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide">
<Grid
Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border
x:Name="DropDownBorder"
Background="White"
BorderThickness="2"
BorderBrush="Gray"/>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
<Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
<Setter TargetName="DropDownBorder" Property="CornerRadius" Value="0"/>
<Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/>
</Trigger>
<Trigger Property="IsEditable" Value="true">
<Setter Property="IsTabStop" Value="false"/>
<Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/>
<Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

We Keep Coding

C# (C-Sharp) is a programming language developed by Microsoft that runs on the .NET Framework.

How to change width for a scroll bar in WPF? - c#

In my WPF application I need to change the width size for a SurfaceScrollViewer. At the moment I am using this code with no success. Any idea how to sole this? <Window.Resources> <Style TargetType="ScrollBar"> <Setter Property="Width" Value="25"/> </Style> </Window.Resources>

Related

Thumb of scrollbar not working according to Content height for WPF

Connecting The ComboBox Popup Border to Main ComboBox Border

IconPack:FontAwesome Icon Disappearing In Custom TabItem

WPF TreeView Disable Children Selection

custom combobox in wpf Application

Categories

Resources