TabControl TabItems Boarder color in WPF - wpf

I have following XAML Code that renders following TabControl
<UserControl x:Class="WpfControlLibrary1.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-
compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
xmlns:Microsoft_Windows_Themes="clr-
namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Classic"
Height="423" Width="639" MinHeight="300" MinWidth="500"
MaxHeight="470" MaxWidth="673"
xmlns:dxwui="http://schemas.devexpress.com/winfx/2008/xaml/windowsui"
xmlns:dxm="http://schemas.devexpress.com/winfx/2008/xaml/map">
<UserControl.Resources>
<SolidColorBrush x:Key="OutlookButtonForeground" Color="White" >
</SolidColorBrush>
<LinearGradientBrush x:Key="OutlookButtonBackground" EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="#0264AD" Offset="0"/>
<GradientStop Color="#0264AD" Offset="0.445"/>
<GradientStop Color="#0264AD" Offset="1"/>
<GradientStop Color="#0264AD" Offset="0.53"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="OutlookButtonHighlight" EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="#03538E" Offset="0"/>
<GradientStop Color="#03538E" Offset="0.0967"/>
<GradientStop Color="#03538E" Offset="0.2580"/>
<GradientStop Color="#03538E" Offset="0.3870"/>
<GradientStop Color="#03538E" Offset="0.9677"/>
<GradientStop Color="#03538E" Offset="1"/>
</LinearGradientBrush>
<Style x:Key="OutlookTabControlStyle" TargetType="{x:Type TabControl}">
<Setter Property="Foreground"
Value="{DynamicResource OutlookButtonForeground}"/>
<Setter Property="Background" Value="White"/>
<Setter Property="BorderBrush" Value="White"/>
<Setter Property="BorderThickness" Value="3"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="MinWidth" Value="10"/>
<Setter Property="MinHeight" Value="10"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid ClipToBounds="true" SnapsToDevicePixels="true"
KeyboardNavigation.TabNavigation="Local">
<Grid.RowDefinitions>
<RowDefinition x:Name="RowDefinition0"
Height="Auto"/>
<RowDefinition x:Name="RowDefinition1"
Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="ColumnDefinition0"/>
<ColumnDefinition x:Name="ColumnDefinition1"
Width="0"/>
</Grid.ColumnDefinitions>
<Grid x:Name="ContentPanel" Grid.Column="0"
Grid.Row="1"
KeyboardNavigation.DirectionalNavigation="Contained"
KeyboardNavigation.TabIndex="2"
KeyboardNavigation.TabNavigation="Local">
<Microsoft_Windows_Themes:ClassicBorderDecorator
Background="White"
BorderBrush="White"
BorderStyle="Raised"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter SnapsToDevicePixels=
"{TemplateBinding SnapsToDevicePixels}"
Margin="2,2,2,2"
x:Name="PART_SelectedContentHost"
ContentSource="SelectedContent"/>
</Microsoft_Windows_Themes:ClassicBorderDecorator>
</Grid>
<StackPanel HorizontalAlignment="Stretch"
Margin="0,-2,0,0"
x:Name="HeaderPanel" VerticalAlignment="Top" Width="Auto"
Height="Auto" Grid.Row="1" IsItemsHost="True"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="TabStripPlacement"
Value="Bottom">
<Setter Property="Grid.Row"
TargetName="ContentPanel" Value="0"/>
<Setter Property="Height"
TargetName="RowDefinition0" Value="*"/>
<Setter Property="Height"
TargetName="RowDefinition1" Value="Auto"/>
</Trigger>
<Trigger Property="TabStripPlacement" Value="Left">
<Setter Property="Grid.Row"
TargetName="ContentPanel" 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"/>
</Trigger>
<Trigger Property="TabStripPlacement" Value="Right">
<Setter Property="Grid.Row"
TargetName="ContentPanel" Value="0"/>
<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"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground"
Value="{DynamicResource
{x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="OutlookTabItemStyle" TargetType="{x:Type TabItem}">
<!--BorderBrush="#FF6593CF"-->
<Setter Property="Padding" Value="12,2,12,2"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static
SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Background" Value="{DynamicResource {x:Static
SystemColors.ControlBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border SnapsToDevicePixels="true" x:Name="shadow"
Background="{TemplateBinding Background}"
BorderThickness="0.5" >
<ContentPresenter SnapsToDevicePixels= "
{TemplateBinding SnapsToDevicePixels}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{Binding
Path=VerticalContentAlignment,
RelativeSource={RelativeSource AncestorType={x:Type
ItemsControl}}}" ContentSource="Header" RecognizesAccessKey="True"
HorizontalAlignment="Left" />
<Border.BorderBrush>
<SolidColorBrush Color="White">
</SolidColorBrush>
</Border.BorderBrush>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Selector.IsSelected"
Value="True">
<!--<Setter Property="Background"
TargetName="shadow" Value="{DynamicResource
OutlookButtonHighlight}"/>-->
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid Height="420" Width="664">
<TabControl Name="RouteProcessingTabControl" VerticalAlignment="Stretch"
Width="200" Height="Auto" TabStripPlacement="Top" Style="
{DynamicResource OutlookTabControlStyle}" HorizontalAlignment="Left">
<TabItem Height="60" Style="{DynamicResource
OutlookTabItemStyle}" Background="{DynamicResource
OutlookButtonBackground}" Foreground="{DynamicResource
OutlookButtonForeground}">
<Grid DataContext="{Binding}" />
<TabItem.Header>
<StackPanel Orientation="Horizontal" Margin="0,2,0,0">
<Image Height="25"
Source="Image\RoutingPreferences.png"></Image>
<TextBlock Text="Routing Preferences" Margin="2,0,0,0"
VerticalAlignment="Center" HorizontalAlignment="Left"
FontWeight="Bold" FontSize="13" />
</StackPanel>
</TabItem.Header>
</TabItem>
<TabItem Height="60" Style="{DynamicResource OutlookTabItemStyle}"
Background="{DynamicResource OutlookButtonBackground}" Foreground="
{DynamicResource OutlookButtonForeground}">
<Grid/>
<TabItem.Header>
<StackPanel Orientation="Horizontal" Margin="0,2,0,0">
<Image Height="20"
Source="Image\HazardousMaterialsRestrictions.png"></Image>
<TextBlock Text="Hazardous Materials Restrictions"
Width="160" TextWrapping="Wrap" Margin="2,0,0,0"
VerticalAlignment="Center" HorizontalAlignment="Left"
FontWeight="Bold" FontSize="13" />
</StackPanel>
</TabItem.Header>
</TabItem>
<TabItem Height="60" Style="{DynamicResource OutlookTabItemStyle}"
Background="{DynamicResource OutlookButtonBackground}"
Foreground="{DynamicResource OutlookButtonForeground}">
<Grid/>
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Height="20" Source="Image\DisplayOption.png">
</Image>
<TextBlock Text="Display Option" Margin="2,0,0,0"
VerticalAlignment="Center" HorizontalAlignment="Left"
FontWeight="Bold" FontSize="13" />
</StackPanel>
</TabItem.Header>
</TabItem>
<TabItem Height="60" Style="{DynamicResource OutlookTabItemStyle}"
Background="{DynamicResource OutlookButtonBackground}"
Foreground="{DynamicResource OutlookButtonForeground}">
<Grid/>
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Height="20" Source="Image\RoutingCostInputs.png">
</Image>
<TextBlock Text="Routing Cost Inputs" Margin="2,0,0,0"
VerticalAlignment="Center" HorizontalAlignment="Left"
FontWeight="Bold" FontSize="13" />
</StackPanel>
</TabItem.Header>
</TabItem>
<TabItem Height="60" Style="{DynamicResource OutlookTabItemStyle}"
Background="{DynamicResource OutlookButtonBackground}"
Foreground="{DynamicResource OutlookButtonForeground}">
<Grid/>
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Height="20" Source="Image\RoadWork.png"></Image>
<TextBlock Text="RoadWork" Margin="2,0,0,0"
VerticalAlignment="Center" HorizontalAlignment="Left"
FontWeight="Bold" FontSize="13" />
</StackPanel>
</TabItem.Header>
</TabItem>
<TabItem Height="60" Style="{DynamicResource OutlookTabItemStyle}"
Background="{DynamicResource OutlookButtonBackground}"
Foreground="{DynamicResource OutlookButtonForeground}">
<Grid/>
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Height="20"
Source="Image\TruckConfiguration.png"></Image>
<TextBlock Text="Truck Configuration" Margin="2,0,0,0"
VerticalAlignment="Center" HorizontalAlignment="Left"
FontWeight="Bold" FontSize="13" />
</StackPanel>
</TabItem.Header>
</TabItem>
<TabItem Height="60" Style="{DynamicResource OutlookTabItemStyle}"
Background="{DynamicResource OutlookButtonBackground}"
Foreground="{DynamicResource OutlookButtonForeground}">
<Grid/>
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Height="20" Source="Image\Tolls.png"></Image>
<TextBlock Text="Tolls" Margin="2,0,0,0"
VerticalAlignment="Center" HorizontalAlignment="Left"
FontWeight="Bold" FontSize="13" />
</StackPanel>
</TabItem.Header>
</TabItem>
</TabControl>
</Grid>
</UserControl>
Even I have Boarder Color White, its generating Slightly Sky Blue boarder color, this is not I want, I want White and Thin Boarder like below Picture! Can anyone suggest solution here? Thank you!

This looks like a Layout Rounding issue. Try changing your <Border> in the Template of the OutlookTabItemStyle style to:
<Border
x:Name="shadow"
SnapsToDevicePixels="True"
UseLayoutRounding="True"
Background="{TemplateBinding Background}"
BorderThickness="1"
>

Related

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.

WPF User Control Draw Border Conditionally

I am drawing a custom control with the following xaml. The control has property named Angle, to rotate the control. If the angle is 90 degree, i want to draw the border differently. How can I conditionally do that in xaml?
<local:BaseControl x:Class="WPFManualControls.Valve"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WPFManualControls" x:Name="ValveControl" Loaded="ValveControl_Loaded">
<local:BaseControl.Resources>
<local:ValveMenuEnableConverter x:Key="ValveMenuEnableConverter"/>
<local:PinVisibleConverter x:Key="PinVisibleConverter"/>
<local:UnknownPinVisibleConverter x:Key="UnknownPinVisibleConverter"/>
<local:MenuVisibleConverter x:Key="MenuVisibleConverter"/>
<LinearGradientBrush x:Key="MenuBorderBrush" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA2A5A7" Offset="0"/>
<GradientStop Color="#FFA2A5A7" Offset="1"/>
<GradientStop Color="#FFA2A5A7" Offset="0.502"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="MenuItemBrush" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA1B3C5" Offset="0"/>
<GradientStop Color="#FFA1B3C5" Offset="1"/>
<GradientStop Color="#FFFEFEFE" Offset="0.534"/>
</LinearGradientBrush>
<Style TargetType="{x:Type MenuItem}">
<EventSetter Event="MenuItem.Click" Handler="OnValveMenuItemClick"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Background" Value="Black"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<Border x:Name="Border" Width="150" Height="30" Background="#FF222624" CornerRadius="5"
Margin="3" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" HorizontalAlignment="Stretch" VerticalAlignment="Center">
<Grid VerticalAlignment="Center">
<!-- The Grid is used to hold together columns for an Icon, Content, Glyph checkmark and Arrow to show the next level
Size sharing is used in Grid so that the Icon, Content, Arrow for each MenuItem align together -->
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="17" Width="Auto" SharedSizeGroup="MenuItemIconColumnGroup"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIGTColumnGroup"/>
<ColumnDefinition Width="14"/>
</Grid.ColumnDefinitions>
<!-- ContentPresenter to show an Icon if needed -->
<ContentPresenter Margin="4,0,6,0" x:Name="Icon" VerticalAlignment="Center"
ContentSource="Icon"/>
<!-- Glyph is a checkmark if needed for a checkable menu -->
<Grid Visibility="Hidden" Margin="4,0,6,0" x:Name="GlyphPanel" VerticalAlignment="Center">
<Path x:Name="GlyphPanelpath" VerticalAlignment="Center" Fill="{TemplateBinding Foreground}" Data="M0,2 L0,4.8 L2.5,7.4 L7.1,2.8 L7.1,0 L2.5,4.6 z" FlowDirection="LeftToRight"/>
</Grid>
<!-- Content for the menu text etc -->
<ContentPresenter Grid.Column="1"
Margin="{TemplateBinding Padding}"
x:Name="HeaderHost" RecognizesAccessKey="True"
ContentSource="Header" />
<!-- Arrow drawn path which points to the next level of the menu -->
<Grid Grid.Column="3" Margin="4,0,6,0" x:Name="ArrowPanel" VerticalAlignment="Center">
<Path x:Name="ArrowPanelPath" VerticalAlignment="Center" Fill="{TemplateBinding Foreground}" Data="M0,0 L0,8 L4,4 z"/>
</Grid>
<!-- The Popup is the body of the menu which expands down or across depending on the level of the item -->
<Popup IsOpen="{Binding Path=IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}"
Placement="Right" x:Name="SubMenuPopup" Focusable="false" AllowsTransparency="true"
PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}"
VerticalOffset="-3">
<Grid x:Name="SubMenu" VerticalAlignment="Center">
<Border VerticalAlignment="Center" x:Name="SubMenuBorder" BorderBrush="{DynamicResource SolidBorderBrush}" BorderThickness="1"/>
<!-- StackPanel holds children of the menu. This is set bu IsItemsHost=True -->
<StackPanel VerticalAlignment="Center" IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle"/>
</Grid>
</Popup>
</Grid>
</Border>
<!-- These triggers re-configure the four arrangements of MenuItem to show different levels of menu via Role -->
<ControlTemplate.Triggers>
<!-- Role = TopLevelHeader : this is the root menu item in a menu; the Popup expands down -->
<Trigger Property="Role" Value="TopLevelHeader">
<Setter Property="Margin" Value="0,1,0,1"/>
<Setter Property="Padding" Value="6,3,6,3"/>
<Setter Property="Grid.IsSharedSizeScope" Value="true"/>
<Setter Property="Placement" Value="Bottom" TargetName="SubMenuPopup"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
</Trigger>
<!-- Role = TopLevelItem : this is a child menu item from the top level without any child items-->
<Trigger Property="Role" Value="TopLevelItem">
<Setter Property="Margin" Value="0,1,0,1"/>
<Setter Property="Padding" Value="6,3,6,3"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
</Trigger>
<!-- Role = SubMenuHeader : this is a child menu item which does not have children -->
<Trigger Property="Role" Value="SubmenuHeader">
<Setter Property="DockPanel.Dock" Value="Top"/>
<Setter Property="Padding" Value="0,2,0,2"/>
<Setter Property="Grid.IsSharedSizeScope" Value="true"/>
</Trigger>
<!-- Role = SubMenuItem : this is a child menu item which has children-->
<Trigger Property="Role" Value="SubmenuItem">
<Setter Property="DockPanel.Dock" Value="Top"/>
<Setter Property="Padding" Value="0,2,0,2"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
</Trigger>
<Trigger Property="IsSuspendingPopupAnimation" Value="true">
<Setter Property="PopupAnimation" Value="None" TargetName="SubMenuPopup"/>
</Trigger>
<!-- If no Icon is present the we collapse the Icon Content -->
<Trigger Property="Icon" Value="{x:Null}">
<Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>
</Trigger>
<!-- The GlyphPanel contains the CheckMark -->
<Trigger Property="IsChecked" Value="true">
<Setter Property="Visibility" Value="Visible" TargetName="GlyphPanel"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>
</Trigger>
<Trigger Property="AllowsTransparency" SourceName="SubMenuPopup" Value="true">
<Setter Property="Margin" Value="0,0,3,3" TargetName="SubMenu"/>
<Setter Property="SnapsToDevicePixels" Value="true" TargetName="SubMenu"/>
<Setter Property="BitmapEffect" Value="{DynamicResource PopupDropShadow}" TargetName="SubMenuBorder"/>
</Trigger>
<!-- Using the system colors for the Menu Highlight and IsEnabled-->
<Trigger Property="IsHighlighted" Value="true">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" TargetName="Border"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="DarkGray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="FontWeight" Value="Bold"/>
</Style>
<Style TargetType="{x:Type local:Valve}">
<EventSetter Event="MouseLeftButtonUp" Handler="onMouseLeftDown">
</EventSetter>
<!--width= 35 height = 30-->
<Setter Property="Width" Value="33"/>
<Setter Property="Height" Value="28"/>
<Setter Property="ContextMenu">
<Setter.Value>
<ContextMenu Visibility="{Binding IsReadOnly, Converter={StaticResource MenuVisibleConverter}}" Name="ValveMenu" Background="{StaticResource MenuBorderBrush}">
<MenuItem Header="Open" Tag="{Binding ValveOpenCmdValue}"
IsEnabled="{Binding ValveStatus, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay, ConverterParameter=Open,
Converter={StaticResource ValveMenuEnableConverter}}">
</MenuItem>
<MenuItem Header="Close" Tag="{Binding ValveCloseCmdValue}"
IsEnabled="{Binding Path=ValveStatus, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay, ConverterParameter=Close, Converter={StaticResource ValveMenuEnableConverter}}">
</MenuItem>
</ContextMenu>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="ValveType" Value="SimpleValve">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:Valve}">
<Viewbox Stretch="None" >
<Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Background="White" Name="grid" RenderTransformOrigin="0.5,0.5" >
<Border Background="#FF338471" BorderBrush="Black" BorderThickness="0,0,1,0">
<Border Background="#FF338471" BorderBrush="Black" BorderThickness="0,0,0,1">
<Border Background="#FF338471" BorderBrush="White" BorderThickness="1,1,0,0">
<Path x:Name="path" StrokeThickness="0.5" Fill="{Binding StateBackground,ElementName=ValveControl, UpdateSourceTrigger=PropertyChanged}" Margin="7,3,7,3"
Stretch="Fill" Stroke="#FF000000"
Data="M0.58299745,0.57220548 L0.5,35.822212 24.874998,17.947205 z M49.589987,35.749308 L49.826791,0.49999999 25.374882,18.072205 z" >
</Path>
</Border>
</Border>
</Border>
<Grid.RenderTransform>
<RotateTransform Angle="{Binding Angle, ElementName=ValveControl, UpdateSourceTrigger=PropertyChanged}" />
<!--<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="{Binding Angle, ElementName=ValveControl, UpdateSourceTrigger=PropertyChanged}" />
<TranslateTransform/>
</TransformGroup>-->
</Grid.RenderTransform>
</Grid>
</Viewbox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="Angle" Value="90">
<Setter Property="Width" Value="33"/>
<Setter Property="Height" Value="28"/>
</Trigger>
<Trigger Property="ValveType" Value="ThrottleValve">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:Valve}">
<Grid Background="#FF338471" >
<Viewbox>
<!--<Border Width="35" Height="35" Background="#FF338471" BorderBrush="Black" BorderThickness="1,1,1,1">
<Grid Margin="1" >
<Path Fill="Black" Stretch="Fill" Stroke="Black" Margin="0,5.577,0,3.242" Data="M15.75,3 L18.5,0.5 98.5,79.5 95.5,82.25 z M0.5,41.25 L0.5,44.5 119.25,44.75 119.25,41 z M6.25,40.75 L16.627914,20.841994 20.377999,23.466998 11.750134,40.75 z M9.9354524,17.376201 L24.944459,13.383842 27.511961,27.641038 z"/>
<Path Fill="{Binding Path=StateBackground, ElementName=ValveControl}" Stretch="Fill" Stroke="Black"
Margin="8.349,0,8,0" Data="M258.75,98.5 L323,98.75 301.75,119.25 300.5,172.73734 324.25,194.75 259.75,194.48734 280.75,173 280.75,120 z"/>
</Grid>
</Border>-->
<Border HorizontalAlignment="Left" Margin="5" VerticalAlignment="Top" Width="60" Height="50" >
<Grid >
<Path Fill="Black" Stretch="Fill" Stroke="Black" Margin="0,5.577,0,3.242" Data="M15.75,3 L18.5,0.5 98.5,79.5 95.5,82.25 z M0.5,41.25 L0.5,44.5 119.25,44.75 119.25,41 z M6.25,40.75 L16.627914,20.841994 20.377999,23.466998 11.750134,40.75 z M9.9354524,17.376201 L24.944459,13.383842 27.511961,27.641038 z"/>
<Path Fill="{Binding Path=StateBackground, ElementName=ValveControl}" Stretch="Fill" Stroke="Black" Margin="12.349,0,14.22,0" Data="M258.75,98.5 L323,98.75 301.75,119.25 300.5,172.73734 324.25,194.75 259.75,194.48734 280.75,173 280.75,120 z"/>
</Grid>
</Border>
</Viewbox>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="ValveType" Value="SlotValve">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:Valve}">
<Viewbox Stretch="Fill">
<Grid >
<Rectangle Fill="{Binding Path=StateBackground, ElementName=ValveControl}" Stroke="Transparent" Width="20" Height="150"/>
</Grid>
</Viewbox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger><!--{Binding PumpBackground, ElementName=ValveControl}-->
<Trigger Property="ValveType" Value="PinValve">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:Valve}">
<Viewbox>
<DockPanel LastChildFill="True" Height="20" Width="200" >
<Rectangle Fill="YellowGreen" Stroke="Black" DockPanel.Dock="Top" Height="7" Margin="30,0,30,0" Visibility="{Binding ValveStatus, ElementName=ValveControl, Converter={StaticResource PinVisibleConverter}}" />
<DockPanel DockPanel.Dock="Bottom" Height="7">
<Rectangle Fill="Black" Stroke="Black" DockPanel.Dock="Bottom" Height="7"/>
</DockPanel>
<DockPanel DockPanel.Dock="Top" Margin="0,-10,0,-7" >
<Rectangle Visibility="{Binding ValveStatus, ElementName=ValveControl, Converter={StaticResource PinVisibleConverter}}"
Fill="{Binding StateBackground, ElementName=ValveControl}" Stroke="Black"
HorizontalAlignment="Left" Margin="30,0,0,0" VerticalAlignment="Top" Width="8" Height="18"/>
<Rectangle Visibility="{Binding ValveStatus, ElementName=ValveControl, Converter={StaticResource PinVisibleConverter}}"
Fill="{Binding StateBackground, ElementName=ValveControl}" Stroke="Black"
DockPanel.Dock="Right" HorizontalAlignment="Right" Margin="0,0,30,0" VerticalAlignment="Top" Width="8" Height="18"/>
<Rectangle Visibility="{Binding ValveStatus, ElementName=ValveControl, Converter={StaticResource UnknownPinVisibleConverter}}"
Fill="{Binding StateBackground, ElementName=ValveControl}" Stroke="Black"
HorizontalAlignment="Left" Margin="30,0,0,0" VerticalAlignment="Bottom" Width="8" Height="8"/>
<Rectangle Visibility="{Binding ValveStatus, ElementName=ValveControl, Converter={StaticResource UnknownPinVisibleConverter}}"
Fill="{Binding StateBackground, ElementName=ValveControl}" Stroke="Black"
DockPanel.Dock="Right" HorizontalAlignment="Right" Margin="0,0,30,0" VerticalAlignment="Bottom" Width="8" Height="8"/>
</DockPanel>
</DockPanel>
<!--<DockPanel LastChildFill="True" Height="20" Width="200" >
<Rectangle Fill="YellowGreen" Stroke="Black" DockPanel.Dock="Top" Height="7" Margin="30,0,30,0" Visibility="{Binding ValveStatus, ElementName=ValveControl, Converter={StaticResource PinVisibleConverter}}" />
<Rectangle Fill="Black" Stroke="Black" DockPanel.Dock="Bottom" Height="7"/>
<DockPanel DockPanel.Dock="Top" Margin="0,-10,0,-7" >
<Rectangle Visibility="{Binding ValveStatus, ElementName=ValveControl, Converter={StaticResource PinVisibleConverter}}"
Fill="{Binding StateBackground, ElementName=ValveControl}" Stroke="Black" HorizontalAlignment="Left" Margin="30,0,0,0" VerticalAlignment="Top" Width="8" Height="18"/>
<Rectangle Visibility="{Binding ValveStatus, ElementName=ValveControl, Converter={StaticResource PinVisibleConverter}}"
Fill="{Binding StateBackground, ElementName=ValveControl}" Stroke="Black" HorizontalAlignment="Right" Margin="0,0,30,0" VerticalAlignment="Top" Width="8" Height="18"/>
</DockPanel>
</DockPanel>-->
</Viewbox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</local:BaseControl.Resources>
<!--<Grid Width="35" Height="30" Background="#FF338471">
<Path x:Name="path" Fill="{Binding ControlBackground,ElementName=ValveControl, UpdateSourceTrigger=PropertyChanged}" Margin="5,2,5,2"
Stretch="Fill" Stroke="#FF000000"
Data="M0.58299745,0.57220548 L0.5,35.822212 24.874998,17.947205 z M49.589987,35.749308 L49.826791,0.49999999 25.374882,18.072205 z" />
</Grid>-->
<!--<Grid Name="LayoutRoot">
<Viewbox Stretch="Fill">
<Grid MouseDown="OnValveMouseDown" Width="50" Height="30" Background="#FF338471" >
<Path x:Name="path" Fill="{Binding ControlBackground,ElementName=ValveControl, UpdateSourceTrigger=PropertyChanged}" Margin="0,3,10,0"
Stretch="Fill" Stroke="#FF000000"
Data="M0.58299745,0.57220548 L0.5,35.822212 24.874998,17.947205 z M49.589987,35.749308 L49.826791,0.49999999 25.374882,18.072205 z" VerticalAlignment="Top" HorizontalAlignment="Right" Height="24" Width="30" />
<Grid.ContextMenu>
<ContextMenu Name="ValveMenu"
Background="{StaticResource MenuBorderBrush}"
>
</ContextMenu>
</Grid.ContextMenu>
</Grid>
</Viewbox>
</Grid>-->
<!--<local:BaseControl.RenderTransform>
<RotateTransform Angle="{Binding Angle, ElementName=ValveControl, UpdateSourceTrigger=PropertyChanged}" CenterX="25" CenterY="25"/>
</local:BaseControl.RenderTransform>-->
<!--<DockPanel LastChildFill="True" Height="20" Width="200" >
<Rectangle Fill="Black" Stroke="Black" DockPanel.Dock="Bottom" Height="7"/>
<DockPanel DockPanel.Dock="Top" Margin="0,0,0,-7" >
<Rectangle Visibility="{Binding ValveStatus, ElementName=ValveControl, Converter={StaticResource PinVisibleConverter}}"
Fill="{Binding ControlBackground, ElementName=ValveControl}" Stroke="Black" HorizontalAlignment="Left" Margin="30,0,0,0" VerticalAlignment="Top" Width="5" Height="18"/>
<Rectangle Visibility="{Binding ValveStatus, ElementName=ValveControl, Converter={StaticResource PinVisibleConverter}}"
Fill="{Binding ControlBackground, ElementName=ValveControl}" Stroke="Black" HorizontalAlignment="Right" Margin="0,0,30,0" VerticalAlignment="Top" Width="5" Height="18"/>
</DockPanel>
</DockPanel>-->
</local:BaseControl>
You already have a Trigger defined for the Angle Property:
<Trigger Property="Angle" Value="90">
<Setter Property="Width" Value="33"/>
<Setter Property="Height" Value="28"/>
</Trigger>
It is just a matter of adding an additional Setter, which would modify an element inside the ControlTemplate:
<Trigger Property="Angle" Value="90">
<Setter Property="Width" Value="33"/>
<Setter Property="Height" Value="28"/>
<!-- This setter will affect the Path.Data property when Angle=90 -->
<Setter TargetName="path" Property="Data" Value="M1.5,Etc"/>
</Trigger>

Change height of GridSplitter preview

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.

How set property background "Transparent" in listbox

I have ListBox and i need set background "Transparent".
I've selected in red, then that should be transparent:
style ListBox, ListBoxItem, ScrollViewer and ScrollBar:
<Style TargetType="{x:Type ScrollBar}">
<Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid x:Name="GridRoot" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}">
<Grid.RowDefinitions>
<RowDefinition MaxHeight="18"/>
<RowDefinition Height="0.00001*"/>
<RowDefinition MaxHeight="18"/>
</Grid.RowDefinitions>
<Rectangle Grid.RowSpan="5" RadiusX="0" RadiusY="0" StrokeThickness="1" Stroke="#FFF0F0F0" Fill="#FFEFEFEF"/>
<RepeatButton x:Name="DecreaseRepeat" Style="{DynamicResource NuclearRepeatButton}" Command="ScrollBar.LineUpCommand">
<Grid>
<Path x:Name="ArrowUp" Height="6" Width="10" Data="F1 M 541.537,173.589L 531.107,173.589L 536.322,167.49L 541.537,173.589 Z " HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform" IsHitTestVisible="False">
<Path.Fill>
<LinearGradientBrush EndPoint="0.7,0.75" StartPoint="0.25,0">
<GradientStop Color="#CC000000" Offset="0.25"/>
<GradientStop Color="#7F000000" Offset="0.75"/>
<GradientStop Color="#33000000" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
</Grid>
</RepeatButton>
<Track Grid.Row="1" x:Name="PART_Track" Orientation="Vertical" IsDirectionReversed="true">
<Track.Thumb>
<Thumb Style="{DynamicResource NuclearThumbStyle}"/>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton x:Name="PageUp" Style="{DynamicResource NuclearScrollRepeatButtonStyle}" Command="ScrollBar.PageDownCommand"/>
</Track.IncreaseRepeatButton>
<Track.DecreaseRepeatButton>
<RepeatButton x:Name="PageDown" Style="{DynamicResource NuclearScrollRepeatButtonStyle}" Command="ScrollBar.PageUpCommand"/>
</Track.DecreaseRepeatButton>
</Track>
<RepeatButton Grid.Row="2" x:Name="IncreaseRepeat" Style="{DynamicResource NuclearRepeatButton}" Command="ScrollBar.LineDownCommand">
<Grid>
<Path x:Name="ArrowDown" Grid.Row="4" Height="6" Width="10" Data="F1 M 531.107,321.943L 541.537,321.943L 536.322,328.042L 531.107,321.943 Z " HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform" IsHitTestVisible="False">
<Path.Fill>
<LinearGradientBrush EndPoint="0.4,1" StartPoint="-0.3,0">
<GradientStop Color="#CC000000" Offset="0.25"/>
<GradientStop Color="#7F000000" Offset="0.75"/>
<GradientStop Color="#33000000" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
</Grid>
</RepeatButton>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="LayoutTransform" TargetName="GridRoot">
<Setter.Value>
<RotateTransform Angle="-90"/>
</Setter.Value>
</Setter>
<Setter TargetName="PART_Track" Property="Orientation" Value="Vertical"/>
<Setter Property="Command" Value="ScrollBar.LineLeftCommand" TargetName="DecreaseRepeat"/>
<Setter Property="Command" Value="ScrollBar.LineRightCommand" TargetName="IncreaseRepeat"/>
<Setter Property="Command" Value="ScrollBar.PageLeftCommand" TargetName="PageDown"/>
<Setter Property="Command" Value="ScrollBar.PageRightCommand" TargetName="PageUp"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type ScrollViewer}" BasedOn="{x:Null}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollViewer}">
<Grid Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ScrollContentPresenter Grid.Column="0" Grid.Row="0" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" CanContentScroll="{TemplateBinding CanContentScroll}"/>
<ScrollBar Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Grid.Column="0" Grid.Row="1" x:Name="PART_HorizontalScrollBar" Orientation="Horizontal" Value="{Binding Path=HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}" Minimum="0" Maximum="{TemplateBinding ScrollableWidth}" AutomationProperties.AutomationId="HorizontalScrollBar"/>
<ScrollBar Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Grid.Column="1" Grid.Row="0" x:Name="PART_VerticalScrollBar" Orientation="Vertical" Value="{Binding Path=VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}" Minimum="0" Maximum="{TemplateBinding ScrollableHeight}" AutomationProperties.AutomationId="VerticalScrollBar"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!---->
<ControlTemplate x:Key="ScrollViewerControlTemplate1" TargetType="{x:Type ScrollViewer}">
<Grid x:Name="Grid" Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollContentPresenter x:Name="PART_ScrollContentPresenter" Margin="{TemplateBinding Padding}" Grid.Column="0" Grid.Row="0" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False"/>
<ScrollBar x:Name="PART_HorizontalScrollBar" Cursor="Arrow" AutomationProperties.AutomationId="HorizontalScrollBar" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" Orientation="Horizontal" Style="{DynamicResource ScrollBarStyle1}" Height="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"/>
</Grid>
</ControlTemplate>
<LinearGradientBrush x:Key="VerticalScrollBarBackground" EndPoint="1,0" StartPoint="0,0">
<GradientStop Color="#E1E1E1" Offset="0"/>
<GradientStop Color="#EDEDED" Offset="0.20"/>
<GradientStop Color="#EDEDED" Offset="0.80"/>
<GradientStop Color="#E3E3E3" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ScrollBarDisabledBackground" Color="#FFFFFF"/>
<Style x:Key="ScrollBarButton" TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Microsoft_Windows_Themes:ScrollChrome x:Name="Chrome" SnapsToDevicePixels="true" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="{TemplateBinding Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="VerticalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Rectangle Fill="{TemplateBinding Background}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Microsoft_Windows_Themes:ScrollChrome x:Name="Chrome" SnapsToDevicePixels="true" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsDragging}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="{TemplateBinding Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<LinearGradientBrush x:Key="HorizontalScrollBarBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#E1E1E1" Offset="0"/>
<GradientStop Color="#EDEDED" Offset="0.20"/>
<GradientStop Color="#EDEDED" Offset="0.80"/>
<GradientStop Color="#E3E3E3" Offset="1"/>
</LinearGradientBrush>
<Style x:Key="HorizontalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Rectangle Fill="{TemplateBinding Background}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrollBarStyle1" TargetType="{x:Type ScrollBar}">
<Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Width" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>
<Setter Property="MinWidth" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid x:Name="Bg" SnapsToDevicePixels="true" Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
<RowDefinition Height="0.00001*"/>
<RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
</Grid.RowDefinitions>
<RepeatButton Style="{StaticResource ScrollBarButton}" IsEnabled="{TemplateBinding IsMouseOver}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="UpArrow" Command="{x:Static ScrollBar.LineUpCommand}"/>
<Track x:Name="PART_Track" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="1" IsDirectionReversed="true">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource VerticalScrollBarPageButton}" Command="{x:Static ScrollBar.PageUpCommand}"/>
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource VerticalScrollBarPageButton}" Command="{x:Static ScrollBar.PageDownCommand}"/>
</Track.IncreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource ScrollBarThumb}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="VerticalGripper"/>
</Track.Thumb>
</Track>
<RepeatButton Style="{StaticResource ScrollBarButton}" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="2" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="DownArrow" Command="{x:Static ScrollBar.LineDownCommand}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="Width" Value="Auto"/>
<Setter Property="MinWidth" Value="0"/>
<Setter Property="Height" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>
<Setter Property="MinHeight" Value="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarHeightKey}}"/>
<Setter Property="Background" Value="{StaticResource HorizontalScrollBarBackground}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid x:Name="Bg" SnapsToDevicePixels="true" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
<ColumnDefinition Width="0.00001*"/>
<ColumnDefinition MaxWidth="{DynamicResource {x:Static SystemParameters.HorizontalScrollBarButtonWidthKey}}"/>
</Grid.ColumnDefinitions>
<RepeatButton Style="{StaticResource ScrollBarButton}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="LeftArrow" Command="{x:Static ScrollBar.LineLeftCommand}" Background="#FFEB0707"/>
<RepeatButton Style="{StaticResource ScrollBarButton}" Grid.Column="2" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="RightArrow" Command="{x:Static ScrollBar.LineRightCommand}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
<!---->
<Style TargetType="{x:Type ListBox}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="BorderBrush" Value="{StaticResource btnPressStroke2}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Foreground" Value="{StaticResource OutsideFontColor}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBox}">
<Grid>
<Border BorderThickness="{TemplateBinding BorderThickness}" Background="#FFFFFFFF" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="2">
<ScrollViewer Template="{StaticResource ScrollViewerControlTemplate1}" Margin="1" Focusable="false" Background="Transparent">
<WrapPanel Margin="2" IsItemsHost="True" />
</ScrollViewer>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false"/>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style d:IsControlPart="True" TargetType="{x:Type ListBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Padding" Value="3" />
<Setter Property="Foreground" Value="{StaticResource OutsideFontColor}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<ControlTemplate.Resources>
<Storyboard x:Key="HoverOn">
<DoubleAnimation Duration="00:00:00.1000000" Storyboard.TargetName="BackgroundGradientOver" Storyboard.TargetProperty="Opacity" To="0.73"/>
</Storyboard>
<Storyboard x:Key="HoverOff">
<DoubleAnimation Duration="00:00:00.4000000" Storyboard.TargetName="BackgroundGradientOver" Storyboard.TargetProperty="Opacity" To="0"/>
</Storyboard>
<Storyboard x:Key="SelectedOn">
<DoubleAnimation Duration="00:00:00.1000000" Storyboard.TargetName="BackgroundGradientSelected" Storyboard.TargetProperty="Opacity" To="0.84"/>
<DoubleAnimation Duration="00:00:00.1000000" Storyboard.TargetName="BackgroundGradientSelectedDisabled" Storyboard.TargetProperty="Opacity" To="1"/>
</Storyboard>
<Storyboard x:Key="SelectedOff">
<DoubleAnimation Duration="00:00:00.4000000" Storyboard.TargetName="BackgroundGradientSelected" Storyboard.TargetProperty="Opacity" To="0"/>
<DoubleAnimation Duration="00:00:00.4000000" Storyboard.TargetName="BackgroundGradientSelectedDisabled" Storyboard.TargetProperty="Opacity" To="0"/>
</Storyboard>
</ControlTemplate.Resources>
<Grid SnapsToDevicePixels="true">
<Rectangle x:Name="BackgroundGradientOver" Fill="{StaticResource hoverGradient}" Stroke="{StaticResource hoverStroke}" RadiusX="2" RadiusY="2" Opacity="0"/>
<Rectangle x:Name="BackgroundGradientSelectedDisabled" Fill="{StaticResource grayGradient}" Stroke="#7F8E8F8F" RadiusX="2" RadiusY="2" Opacity="0"/>
<Rectangle x:Name="BackgroundGradientSelected" Fill="{StaticResource BtnOverFill}" Stroke="{StaticResource selectedStroke}" RadiusX="2" RadiusY="2" Opacity="0"/>
<Rectangle x:Name="BackgroundHighlight" Margin="1" Stroke="#A0FFFFFF" RadiusX="1" RadiusY="1"/>
<ContentPresenter
x:Name="contentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource SelectedOff}" x:Name="SelectedOff_BeginStoryboard"/>
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource SelectedOn}" x:Name="SelectedOn_BeginStoryboard"/>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource HoverOff}" x:Name="HoverOff_BeginStoryboard"/>
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource HoverOn}"/>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource DisabledForegroundBrush}"/>
<Setter Property="Visibility" TargetName="BackgroundGradientSelected" Value="Hidden"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ExpanderHeaderFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Border>
<Rectangle SnapsToDevicePixels="true" Margin="0" Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
ListBox in XAML:
<ListBox Grid.Row="2" x:Name="list_category" Background="Transparent" ItemsSource="{Binding Tables[0]}" VerticalContentAlignment="Stretch" >
<ListBox.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"/>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black"/>
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="#00FFFFFF"/>
</ListBox.Resources>
<ListBox.ItemTemplate>
<DataTemplate>
<GroupBox Header="Сопровождающие" Width="300" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch" HorizontalAlignment="Stretch" x:Name="GroupBox" Background="Transparent">
<DockPanel Tag="{Binding id_Person}" VerticalAlignment="Stretch">
<Button Click="Button_Click" DockPanel.Dock="Top">
<Button.Content>
<DockPanel VerticalAlignment="Stretch">
<StackPanel DockPanel.Dock="Top" Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock Text="{Binding surname}" Padding="5" HorizontalAlignment="Center" Foreground="#FFB51414" />
<TextBlock Text="{Binding name}" Padding="5" HorizontalAlignment="Center" Foreground="#FFB51414" />
<TextBlock Text="{Binding lastname}" Padding="5" HorizontalAlignment="Center" Foreground="#FFB51414" />
</StackPanel>
<Grid DockPanel.Dock="Bottom">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding quarter}" x:Name="quarter" Padding="5" Grid.Column="2" Grid.Row="1" HorizontalAlignment="Center" Foreground="#FFB51414" />
<TextBlock Text="{Binding halfyear}" x:Name="halfyear" Padding="5" Grid.Column="3" Grid.Row="1" HorizontalAlignment="Center" Foreground="#FFB51414" />
<TextBlock Text="{Binding year}" x:Name="year" Padding="5" Grid.Column="4" Grid.Row="1" HorizontalAlignment="Center" Foreground="#FFB51414" />
<TextBlock Text="Период: " Padding="5" Grid.Column="1" HorizontalAlignment="Center" Foreground="#FFB51414" />
<TextBlock Text="Квартал" Padding="5" Grid.Column="2" HorizontalAlignment="Center" Foreground="#FFB51414" />
<TextBlock Text="Полгода" Padding="5" Grid.Column="3" HorizontalAlignment="Center" Foreground="#FFB51414" />
<TextBlock Text="Год" Padding="5" Grid.Column="4" HorizontalAlignment="Center" Foreground="#FFB51414" />
<TextBlock Text="Цена: " Padding="5" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center" Foreground="#FFB51414" />
</Grid>
<Grid DockPanel.Dock="Top" MinHeight="180" MaxHeight="180">
<Image Source="{Binding photo}"/>
</Grid>
</DockPanel>
</Button.Content>
</Button>
<Button DockPanel.Dock="Bottom" x:Name="send_mess" Tag="{Binding id_Person}" Click="send_mess_Click" Content="Написать сопровождающему"/>
<DockPanel DockPanel.Dock="Bottom" HorizontalAlignment="Center" Tag="{Binding id_Person}" >
<ComboBox VerticalAlignment="Top" x:Name="combobox_term">
<ComboBoxItem Content="Квартал" Tag="1"/>
<ComboBoxItem Content="Полгода" Tag="2"/>
<ComboBoxItem Content="Год" Tag="3" IsSelected="True"/>
</ComboBox>
<CheckBox Checked="CheckBox_Checked" Unchecked="CheckBox_Unchecked" IsChecked="{Binding id_Person, Converter={StaticResource CheckBoxToCheked}}" Content="Выбрать" />
</DockPanel>
</DockPanel>
</GroupBox>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
In your control template, you have a statement saying
<Border ... Background="#FFFFFFFF">...
Since that doesnt inherrit the background of the style, you are hardcoding the background for your Listbox.
Try changing that to Background={TemplateBinding Background}
N.B.
Its in the default style for ListBox... The complete statement is
<Border BorderThickness="{TemplateBinding BorderThickness}" Background="#FFFFFFFF" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="2">
<ScrollViewer Template="{StaticResource ScrollViewerControlTemplate1}" Margin="1" Focusable="false" Background="Transparent">
<WrapPanel Margin="2" IsItemsHost="True" />
</ScrollViewer>
</Border>

Put a "column header" over the ScrollViewer of a WPF ComboBox ControlTemplate

here is my sample project updated from this thread:
WPF: Refine the look of a grouped ComboBox vs. a grouped DataGrid -sample attached -
http://www.sendspace.com/file/ru8hju (VS2010 .Net 4.0 project)
My question is now HOW can I add a "column header" like stackpanel horizontal with 2 TextBlocks ADD to my existing ComboBox ControlTemplate ABOVE the ScrollViewer when I have a custom ComboBoxItem stuff and there is the ItemPresenter in the default ComboBox ControlTemplate.
Thats my existing grouped uneditable ComboBox. Over the Scrollviewr (above the December...) I want 2 Textblocks.
How can I do that with MY XAML code see at the bottom:
<Window x:Class="TestComboGrouped.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="600" Width="200">
<Window.Resources>
<SolidColorBrush x:Key="SelectedBackgroundBrush" Color="Orange" />
<SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />
<Style x:Key="ComboBoxItemStyle" TargetType="ComboBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<Grid HorizontalAlignment="Stretch"
Margin="-5,0,0,0"
Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="45"/>
</Grid.ColumnDefinitions>
<Border Name="border1"
BorderThickness="0,0,1,1"
BorderBrush="#FFCEDFF6"
Grid.Column="0">
<TextBlock Foreground="Purple"
HorizontalAlignment="Right"
Margin="0,0,5,0"
Text="{Binding WeeklyLessonDate, StringFormat='yyyy-MM-dd'}"/>
</Border>
<Border Name="border2"
BorderThickness="0,0,1,1"
BorderBrush="#FFCEDFF6"
Grid.Column="1">
<TextBlock HorizontalAlignment="Center"
Text="{Binding WeekNumber}"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="true">
<Setter TargetName="border1" Property="Background" Value="{StaticResource SelectedBackgroundBrush}"/>
<Setter TargetName="border2" Property="Background" Value="{StaticResource SelectedBackgroundBrush}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="Red"/>
<Style.Triggers>
<Trigger Property="ComboBox.AlternationIndex" Value="0">
<Setter Property="Background" Value="White"></Setter>
</Trigger>
<Trigger Property="ComboBox.AlternationIndex" Value="1">
<Setter Property="Background" >
<Setter.Value>
<LinearGradientBrush RenderOptions.EdgeMode="Aliased" StartPoint="0.5,0.0" EndPoint="0.5,1.0">
<GradientStop Color="#FFFEFEFF" Offset="0"/>
<GradientStop Color="#FFE4F0FC" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
<!-- Grouped CollectionView -->
<CollectionViewSource Source="{Binding WeeklyDateList,IsAsync=False}" x:Key="WeeklyView">
<CollectionViewSource.GroupDescriptions>
<PropertyGroupDescription PropertyName="MonthName"/>
</CollectionViewSource.GroupDescriptions>
</CollectionViewSource>
</Window.Resources>
<StackPanel>
<ComboBox
ItemsSource="{Binding Source={StaticResource ResourceKey=WeeklyView}}"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ItemContainerStyle="{StaticResource ComboBoxItemStyle}"
AlternationCount="2"
MaxDropDownHeight="300"
Width="Auto"
x:Name="comboBox"
>
<ComboBox.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock
Padding="5,0,0,0"
Background="White"
Foreground="DarkBlue"
FontSize="14"
FontWeight="DemiBold"
Text="{Binding Name}"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ComboBox.GroupStyle>
<!--<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Border Style="{StaticResource ComboBoxBorderStyle}">
<TextBlock Width="100" Foreground="Purple" Text="{Binding WeeklyLessonDate, StringFormat='yyyy-MM-dd'}"/>
</Border>
<Border Style="{StaticResource ComboBoxBorderStyle}">
<TextBlock Padding="5,0,5,0" Width="40" Text="{Binding WeekNumber}"/>
</Border>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>-->
</ComboBox>
</StackPanel>
</Window>
UPDATE:
OK very good news, I found my old code again which I thought I lost it somehow :)
Below you see the Style for a ComboBox. I have pasted some own xaml there see my comment
inside the ControlTemplate below. There is the Column Header of a former ComboBox.
What I want now is to merge this Column Header with my above project and its custom ComboBoxItem
style.
<Border x:Name="DropDownBorder" BorderBrush="DarkBlue" BorderThickness="2" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">
// ColumnHeader START
<StackPanel >
<StackPanel Orientation="Horizontal">
<TextBlock HorizontalAlignment="Stretch" Text="lesson day" />
<TextBlock HorizontalAlignment="Stretch" Text="week" />
</StackPanel>
// ColumnHeader END
<ScrollViewer x:Name="DropDownScrollViewer" Background="Green">
<Grid RenderOptions.ClearTypeHint="Enabled">
<Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
<Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=DropDownBorder}" Height="{Binding ActualHeight, ElementName=DropDownBorder}" Width="{Binding ActualWidth, ElementName=DropDownBorder}"/>
</Canvas>
<ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
</ScrollViewer>
</StackPanel>
</Border>
</Popup>
<ToggleButton BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ComboBoxReadonlyToggleButton}"/>
<ContentPresenter ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Content="{TemplateBinding SelectionBoxItem}" ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="false" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
<Setter Property="Background" Value="#FFF4F4F4"/>
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEditable" Value="true">
<Setter Property="BorderBrush" Value="{StaticResource TextBoxBorder}"/>
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Padding" Value="3"/>
<Setter Property="Template" Value="{StaticResource ComboBoxEditableTemplate}"/>
</Trigger>
</Style.Triggers>
</Style>
combobox with column header =>
http://img573.imageshack.us/img573/4202/columnheader.png
Hello,
UPDATE 2:
This is the code with a column header but trashed POPUP + Scrollbars do not work properly... I could not post the code due to 30000 chars limitation lol so grab it here:
http://www.sendspace.com/file/8puii8
Update again
Also fixed it in your example, just changed the Popup from the one I had below. Download if from here.
This screenshot is from this link

Resources