WPF Expander control dropdown panel - wpf

I would like to style my expander control in such way that it can have a drop down panel like that of combobox control.
Drop down panel should be like it can overlay above other items like that of combobox.
Here's the XAML style for expander which i'm using :
<Style TargetType="{x:Type Expander}">
<Setter Property="Background" Value="{StaticResource Brush_ButtonFill}"/>
<Setter Property="BorderBrush" Value="{StaticResource Brush_ContainerButtonBorder}"/>
<Setter Property="Foreground" Value="{StaticResource Brush_FontReadonly}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Expander}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" x:Name="ContentRow"/>
</Grid.RowDefinitions>
<Border Visibility="Collapsed" Grid.Row="1" x:Name="ExpandSite" Background="{StaticResource BrushTransparent}" BorderBrush="{StaticResource Brush_DropdownShadow}">
<ContentPresenter Focusable="false"/>
</Border>
<Border Grid.Row="0" x:Name="Border" Background="{StaticResource Brush_ButtonBorder}" Visibility="Collapsed" BorderThickness="1"/>
<ToggleButton Template="{StaticResource ExpanderToggleButtonControlTemplate}" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" OverridesDefaultStyle="True" Background="{StaticResource Brush_ButtonFill}" BorderBrush="{StaticResource Brush_ButtonBorder}" BorderThickness="{TemplateBinding BorderThickness}" Foreground="{StaticResource Brush_ButtonBorder}" d:LayoutOverrides="VerticalAlignment" />
<ContentPresenter Margin="15,2,2,2" RecognizesAccessKey="True" ContentSource="Header" VerticalAlignment="Center" HorizontalAlignment="Left" IsHitTestVisible="False"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Setter Property="Visibility" Value="Visible" TargetName="ExpandSite"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ExpanderStyle_Dropdown" TargetType="{x:Type Expander}" BasedOn="{StaticResource TextStyle_BaseControl}">
<Setter Property="Background" Value="{StaticResource Brush_ButtonFill}"/>
<Setter Property="BorderBrush" Value="{StaticResource Brush_ButtonBorder}"/>
<Setter Property="Foreground" Value="Black"/>
<!--<Setter Property="Foreground" Value="{StaticResource Brush_FontReadonly}"/>-->
<Setter Property="FontSize" Value="{StaticResource FontSizeMedium}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Expander}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="54"/>
<RowDefinition Height="*" x:Name="ContentRow"/>
</Grid.RowDefinitions>
<Border Visibility="Collapsed" Grid.Row="1" x:Name="ExpandSite" Background="{StaticResource Brush_ButtonShadow}" CornerRadius="0,0,5,5" Margin="0,-5,0,0" Panel.ZIndex="1000">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Focusable="false" Margin="5,10,5,5" Panel.ZIndex="1000"/>
</Border>
<Border Grid.Row="0" x:Name="Border" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="7" Padding="5" Background="{StaticResource Brush_CZBlueSelected}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="5,0,0,5" Padding="5" Grid.ColumnSpan="1" Margin="0,0,1,0"/>
<Border x:Name="Shadow" CornerRadius="5" Padding="5" Grid.ColumnSpan="2" BorderBrush="{StaticResource Brush_SearchinputBorder}" BorderThickness="0,0,0,2" Margin="0,0,0,-2"/>
<ToggleButton Template="{StaticResource ExpanderToggleButtonControlTemplate_DropDown}" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" OverridesDefaultStyle="True" Background="{StaticResource Brush_ButtonFill}" BorderBrush="{StaticResource Brush_ButtonBorder}" Grid.Column="1" BorderThickness="{TemplateBinding BorderThickness}" Foreground="{StaticResource Brush_ButtonBorder}" Margin="1,0,0,0" Height="44" />
<ContentPresenter Margin="4" RecognizesAccessKey="True" ContentSource="Header" VerticalAlignment="Center" HorizontalAlignment="Center" IsHitTestVisible="False"/>
</Grid>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="True">
<Setter Property="Visibility" Value="Visible" TargetName="ExpandSite"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Now using the same in XAML screen as:
<Expander Name="expanderNextScan" Header="{Binding ElementName=listBoxExpander,Path=SelectedItem.Content}" ExpandDirection="Up" Grid.Column="3" Height="54" Width="Auto" Style="{DynamicResource ExpanderStyle_Dropdown}" >
<Grid Background="#FFE5E5E5" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<ListBox x:Name="listBoxExpander" Height="100" Width="{Binding ElementName=expanderNextScan,Path=ActualWidth}" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Visible" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" Margin="0,-10,0,0" Panel.ZIndex="5">
<ListBoxItem Content="Go to Next Scan" FontSize="{StaticResource FontSizeMedium}" IsSelected="True"/>
<ListBoxItem FontSize="{StaticResource FontSizeMedium}" Content="Print with preview" />
<ListBoxItem FontSize="{StaticResource FontSizeMedium}" Content="Export as PDF"/>
<ListBoxItem FontSize="{StaticResource FontSizeMedium}" Content="Export to DICOM"/>
</ListBox>
</Grid>
</Expander>
Now want to style it in such a way that the list box coming in the expander drop down should have a z-index greater than the other controls on the screen such that it can overlay over other controls like that of combobox dropdown.
Please reply ASAP.

Related

Insert an icon in menu item that uses an user defined Template

I want to have a dropdown menu with custom background color of the menu item. I was able to achieve this with the help of this answer. The root menu item in my GUI has only an icon with no Header. The code I used to define the menu item icon is as follows:
<Style x:Key="MenuIcon" TargetType="{x:Type MenuItem}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<Menu Background="Orange">
<MenuItem ToolTip="Menu" BorderBrush="White">
<MenuItem.Header>
<StackPanel
Width="60"
Height="50"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="Orange"
Orientation="Horizontal">
<Viewbox
Margin="9"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Stretch="Fill">
<Grid Margin="-8,0,0,0">
<Path
x:Name="MenuIconFillStyle"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M6 36v-3h36v3Zm0-10.5v-3h36v3ZM615v-3h36v3Z"
Fill="White" />
</Grid>
</Viewbox>
</StackPanel>
</MenuItem.Header>
</MenuItem>
</Menu>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="MenuIconFillStyle" Property="Fill" Value="Yellow" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I added the following in the <ControlTemplate x:Key="MenuItemControlTemplate1" TargetType="{x:Type MenuItem}"> taken from here:
<ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" ContentSource="Icon" HorizontalAlignment="Center" Height="16" Margin="3" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" Width="16"/>
and the following in the ControlTemplate.Triggers:
<Trigger Property="Icon" Value="True">
<Setter Property="Visibility" TargetName="Icon" Value="Visible"/>
</Trigger>
The Template="{DynamicResource MenuItemControlTemplate1}" is as follows:
<ControlTemplate x:Key="MenuItemControlTemplate1" TargetType="{x:Type MenuItem}">
<Border x:Name="templateRoot"
BorderBrush="#535353"
CornerRadius="3"
BorderThickness="1"
Background="{TemplateBinding Background}"
SnapsToDevicePixels="True">
<Grid VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="Icon" Content="{TemplateBinding Icon}" ContentSource="Icon" HorizontalAlignment="Center" Width="26" Height="16" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" />
<ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<Popup x:Name="PART_Popup" AllowsTransparency="True" Focusable="False" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Bottom" HorizontalOffset="-2">
<Border x:Name="SubMenuBorder" BorderBrush="#595959" BorderThickness="1" Background="#3A3A3A" Padding="2">
<ScrollViewer x:Name="SubMenuScrollViewer" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
<Grid RenderOptions.ClearTypeHint="Enabled">
<Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
<Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=SubMenuBorder}" Height="{Binding ActualHeight, ElementName=SubMenuBorder}" Width="{Binding ActualWidth, ElementName=SubMenuBorder}"/>
</Canvas>
<ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/>
</Grid>
</ScrollViewer>
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Icon" Value="True">
<Setter Property="Visibility" TargetName="Icon" Value="Visible"/>
</Trigger>
<Trigger Property="IsSuspendingPopupAnimation" Value="True">
<Setter Property="PopupAnimation" TargetName="PART_Popup" Value="None"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="True">
<Setter Property="Background" TargetName="templateRoot" Value="{StaticResource DarkBrush}"/>
<Setter Property="BorderBrush" TargetName="templateRoot" Value="#2C2C2C"/>
<Setter Property="BorderThickness" TargetName="templateRoot" Value="1"></Setter>
</Trigger>
<Trigger Property="CanContentScroll" SourceName="SubMenuScrollViewer" Value="False">
<Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="{Binding VerticalOffset, ElementName=SubMenuScrollViewer}"/>
<Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="{Binding HorizontalOffset, ElementName=SubMenuScrollViewer}"/>
</Trigger>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter TargetName="templateRoot" Property="Background" Value="{StaticResource Clicked}" />
<Setter Property="Header" Value="Test" />
<Setter Property="BorderBrush" Value="#2C2C2C"></Setter>
<Setter Property="BorderThickness" Value="1"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
The custom background and the icon for the MenuItem is specified as in the following code snippet:
<Grid Background="#535353">
<Menu Width="100" Height="22" Margin="10, 10, 5, 5" HorizontalAlignment="Left" Background="White" VerticalAlignment="Top">
<MenuItem Style="{StaticResource MenuIcon}" Template="{DynamicResource MenuItemControlTemplate1}">
</Menu>
</Grid>
The icon defined in Style is not rendering in the MenuItem along with the Template (Template="{DynamicResource MenuItemControlTemplate1}") used for setting the background color. How can this be achieved?
Edit
Based on the suggestion of #mm8, I tried to combine the Styles that are responsible for changing the background color (The Style with x:Key="TopLevelHeaderStyle" which is borrowed from here) and inserting a menu item icon in the root menu and came up with the following:
<Style x:Key="TopLevelHeaderStyle" TargetType="{x:Type MenuItem}">
<Setter Property="Background" Value="#000d18"/>
<Setter Property="Foreground" Value="#d8d8d8"/>
<Setter Property="Width" Value="72"/>
<Setter Property="Height" Value="42"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<Border x:Name="MenuItemBorder" Width="72" Height="42" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<Grid VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentPresenter Content="{TemplateBinding Header}" ContentSource="Header" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<Popup AllowsTransparency="True" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Bottom" PlacementTarget="{Binding ElementName=MenuItemBorder}"
HorizontalOffset="1" VerticalOffset="-1">
<Border BorderBrush="#414141" Background="#414141">
<ScrollViewer Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</ScrollViewer>
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="True">
<Setter Property="Background" Value="#1271C8"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--MenuIcon-->
<Style x:Key="MenuIcon" TargetType="{x:Type MenuItem}" BasedOn="{StaticResource TopLevelHeaderStyle}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<Menu>
<MenuItem>
<MenuItem.Header>
<StackPanel
Width="60"
Height="50"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="Orange"
Orientation="Horizontal">
<Viewbox
Margin="9"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Stretch="Fill">
<Grid Margin="-8,0,0,0">
<Path x:Name="MenuIconFillStyle"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Fill="White"
Data="M6 36v-3h36v3Zm0-10.5v-3h36v3ZM6 15v-3h36v3Z"
/>
</Grid>
</Viewbox>
</StackPanel>
</MenuItem.Header>
</MenuItem>
</Menu>
And used it as follows:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Menu Grid.Column="0" FontSize="24" HorizontalAlignment="Left" VerticalAlignment="Top">
<MenuItem Header="File" Style="{StaticResource TopLevelHeaderStyle}">
<MenuItem Header="New"/>
<MenuItem Header="Open"/>
<MenuItem Header="Close"/>
</MenuItem>
</Menu>
<Menu Grid.Column="1" FontSize="24" HorizontalAlignment="Left" VerticalAlignment="Top">
<MenuItem Margin="-11, 0,0,0" Width="50" Header="File" Style="{StaticResource MenuIcon}">
<MenuItem Header="New1"/>
<MenuItem Header="Open1"/>
<MenuItem Header="Close1"/>
</MenuItem>
</Menu>
</Grid>
Now the drop down menu having an icon in the root menu item is not showing the other menu item contents New1, Open1 and Close1 What mistake am I making?
The MenuItem control has a DependencyProperty of type Object named 'Icon'. This property is reserved for your exact purpose.
First you need to bind the Data in the Path within your MenuItem ControlTemplate to the Icon property of the parent MenuItem. Like this:
<Path x:Name="MenuIconFillStyle"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="{TemplateBinding Icon}"
Fill="White" />
Now you may specify a PathGeometry in XAML like this. Its contents will be your SVG data:
<PathGeometry x:Key="MySpecialPath">M2 0C0.89687</PathGeometry>
Finally, apply this path using its Key to any MenuItem as a StaticResource:
<Menu Width="100" Height="22" Margin="10, 10, 5, 5" HorizontalAlignment="Left" Background="White" VerticalAlignment="Top">
<MenuItem Template="{DynamicResource MenuItemControlTemplate1}"
Icon="{StaticResource MySpecialPath}">
</Menu>
If you want a bit more control out of your icons (multiple colors, different size, margin, etc..) It is a bit more involved. Just remember that the 'Path' property on MenuItem is an Object so you can hypothetically use any 'Presenting' element (Does not need to be Path) in your MenuItem ControlTemplate and TemplateBind it to MenuItem.Path - then pass any type of 'Presented' object to the MenuItem (does not need to be PathGeometry). You can look into using a
<ContentPresenter Content="{TemplateBinding Icon}" />
instead of the Path control in the MenuItem ControlTemplate - and then giving literally any "Icon" control to your MenuItem.Path property in your XAML.

In WPF, how to customize the style of ScrollBar in ScrollViewer

I can add a ScrollBar style as global. But that will alse change all the ScrollBar except in ScrollViewer.
How can I just change the style of ScrollBar in ScrollViewer. Maybe add a style with a Key and specify it to somewhere like a ControlTemplate.
Here is my fully ScrollBar 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}">
<Border x:Name="rectangle"
SnapsToDevicePixels="True"
Background="{StaticResource WordBlueBrush}"
Opacity="0.3"
CornerRadius="4"
Height="{TemplateBinding Height}"
Width="{TemplateBinding Width}"/>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="rectangle" Property="Opacity" Value="1" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type ScrollBar}">
<Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
<Setter Property="Width" Value="14"/>
<Setter Property="Margin" Value="-14 0 0 0" />
<Setter Property="MinWidth" Value="{Binding Height, RelativeSource={RelativeSource Self}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid x:Name="Bg" SnapsToDevicePixels="true">
<Border Padding="0 4">
<Track x:Name="PART_Track"
IsDirectionReversed="true"
IsEnabled="{TemplateBinding IsMouseOver}"
Width="8"
HorizontalAlignment="Center"
>
<Track.DecreaseRepeatButton>
<RepeatButton Opacity="0" Command="{x:Static ScrollBar.PageUpCommand}" />
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<RepeatButton Opacity="0" Command="{x:Static ScrollBar.PageDownCommand}" />
</Track.IncreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource ScrollBarThumb }" />
</Track.Thumb>
</Track>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Finally, I got my solution.
1st, add a key to the ScrollBar style:
<Style x:Key="ViewerScrollBar" TargetType="{x:Type ScrollBar}">
2nd, right click the ScrollViewer in Visual Studio XAML Designer. Chose 'Edit Template'->'Edit a Copy':
Add ControlTemplate for ScrollViewer
3rd, in the 'Create Style Resource' dialog, specify a key for the ScrollViewer style and click 'OK':
Create Style Resource Dialog
4th, Visual Studio will automatically create the ControlTemplate for my ScrollViewer. Now, add Style="{StaticResource ViewerScrollBar}" for the horizontal ScrollBar and verticalScrollBar:
<ControlTemplate x:Key="ScrollViewerControlTemplate" TargetType="{x:Type ScrollViewer}">
<Grid x:Name="Grid" Background="{TemplateBinding Background}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Rectangle x:Name="Corner" Grid.Column="1" Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" Grid.Row="1"/>
<ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Margin="{TemplateBinding Padding}" Grid.Row="0"/>
<ScrollBar Style="{StaticResource ViewerScrollBar}" x:Name="PART_VerticalScrollBar" AutomationProperties.AutomationId="VerticalScrollBar" Cursor="Arrow" Grid.Column="1" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Grid.Row="0" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}"/>
<ScrollBar Style="{StaticResource ViewerScrollBar}" x:Name="PART_HorizontalScrollBar" AutomationProperties.AutomationId="HorizontalScrollBar" Cursor="Arrow" Grid.Column="0" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Orientation="Horizontal" Grid.Row="1" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}"/>
</Grid>
</ControlTemplate>

How can modify the wpf Expander so that the expander button is next to header text and center aligned and gets expanded down

I want to customize my expander
I have a grid and one of the column is expander with header text before the expander button. And the expander should expand and fill the complete row as shown in the picture.
I couldn't post images so the link is below.
http://i.stack.imgur.com/zVkpR.png
Can please somebody give me some thoughts how can I achieve this.
Update:
I have used the control template and was able to modify as needed but struck with one thing how to make the expanded portion fill the entire row of the containing grid.
Here is the sample code:
<Window x:Class="ExpanderStyles.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>
<Style x:Key="ExpanderHeaderStyle"
TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Padding="{TemplateBinding Padding}">
<Grid Background="Transparent"
SnapsToDevicePixels="False">
<Grid.RowDefinitions>
<RowDefinition Height="19"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="19"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Path x:Name="arrow" Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Stroke="{TemplateBinding Foreground}"
StrokeThickness="1.5"
SnapsToDevicePixels="false"
Data="M 2,8 L 5.5,4.5 L 2,1">
<Path.LayoutTransform>
<RotateTransform Angle="0"/>
</Path.LayoutTransform>
</Path>
<ContentPresenter Grid.Column="0"
Margin="0,4,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Top"
SnapsToDevicePixels="True"
RecognizesAccessKey="True"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked"
Value="true">
<Setter Property="Data"
Value="M 1,4.5 L 4.5,1 L 8,4.5"
TargetName="arrow"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="{x:Type Expander}"
TargetType="{x:Type Expander}">
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/>
<Setter Property="Background"
Value="Transparent"/>
<Setter Property="HorizontalContentAlignment"
Value="Center"/>
<Setter Property="VerticalContentAlignment"
Value="Stretch"/>
<Setter Property="BorderBrush"
Value="Transparent"/>
<Setter Property="BorderThickness"
Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Expander}">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
CornerRadius="3"
SnapsToDevicePixels="true">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="19"/>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Canvas HorizontalAlignment="Center">
<ToggleButton x:Name="HeaderSite"
Margin="1"
MinWidth="0"
MinHeight="0"
Style="{StaticResource ExpanderHeaderStyle}"
IsChecked="{Binding Path=IsExpanded,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
Foreground="{TemplateBinding Foreground}"
Padding="{TemplateBinding Padding}"
FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}"
FontStyle="{TemplateBinding FontStyle}"
FontStretch="{TemplateBinding FontStretch}"
FontWeight="{TemplateBinding FontWeight}"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"/>
</Canvas>
<ContentPresenter Grid.Row="1" x:Name="ExpandSite"
DockPanel.Dock="Bottom"
Visibility="Collapsed"
Focusable="false"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="{TemplateBinding Padding}">
</ContentPresenter>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded"
Value="true">
<Setter Property="Visibility"
Value="Visible"
TargetName="ExpandSite"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0">Column 1</TextBlock>
<Expander Grid.Row="0" Grid.Column="1" Header="Details" ExpandDirection="Left">
<Grid Background="Blue">
<TextBlock Text="Details content" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="5" Foreground="White"></TextBlock>
</Grid>
</Expander>
<TextBlock Grid.Column="2" Grid.Row="0">Column 3</TextBlock>
</Grid>
</Window>
Any body has idea how to fill the parent grid row from control template?

WPF Bind Setter Property Value to another Setter Property Value in different style

I have 2 elements - window and button.
I want to bind the Window's BorderBrush Value to the Button's isPressed Background Value.
Both elements has custom style. here are the styles:
Button Style:
<Style x:Key="TitleBarButton" TargetType="Button">
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Padding" Value="12,8.5"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="FontFamily" Value="Marlett"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
<Grid>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" TextBlock.FontFamily="{TemplateBinding FontFamily}" TextBlock.FontSize="{TemplateBinding FontSize}" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#EFEFF2" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="#007ACC"/>
<Setter Property="Foreground" Value="White"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Window Style:
<Style TargetType="{x:Type local:MetroWindow}">
<Setter Property="Background" Value="White"/>
<Setter Property="WindowStyle" Value="None"/>
<Setter Property="ResizeMode" Value="CanResize"/>
<Setter Property="AllowsTransparency" Value="True"/>
<Setter Property="BorderBrush" Value="#007ACC"/>
<Setter Property="BorderThickness" Value="0.5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:MetroWindow}">
<Grid Name="BaseGrid" Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="4" />
<RowDefinition Height="*" />
<RowDefinition Height="4" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="4" />
</Grid.ColumnDefinitions>
<DockPanel LastChildFill="true" Grid.RowSpan="3" Grid.ColumnSpan="3">
<Border Name="TopBorder" DockPanel.Dock="Top" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
<Border Name="RightBorder" DockPanel.Dock="Right" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
<Border Name="BottomBorder" DockPanel.Dock="Bottom" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
<Border Name="LeftBorder" DockPanel.Dock="Left" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
<DockPanel LastChildFill="True">
<DockPanel LastChildFill="True" DockPanel.Dock="Top">
<StackPanel Orientation="Horizontal" DockPanel.Dock="Right">
<Button x:Name="Minimize" ToolTip="Minimize" Content="0" Style="{StaticResource TitleBarButton}"/>
<Button x:Name="Restore" ToolTip="Restore" Content="2" Style="{StaticResource TitleBarButton}" Visibility="Collapsed"/>
<Button x:Name="Maximize" ToolTip="Maximize" Content="1" Style="{StaticResource TitleBarButton}"/>
<Button x:Name="Close" ToolTip="Close" Content="r" Style="{StaticResource TitleBarButton}"/>
</StackPanel>
<DockPanel x:Name="TitleBar">
<Border x:Name="IconBorder" Padding="5,0,0,0">
<Image Width="16" Height="16" Source="{Binding Icon, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}" RenderOptions.BitmapScalingMode="NearestNeighbor" RenderOptions.EdgeMode="Aliased"/>
</Border>
<Label x:Name="Title" VerticalAlignment="Center" FontSize="14" Content="{Binding Title, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}"/>
</DockPanel>
</DockPanel>
<Grid>
<AdornerDecorator>
<ContentPresenter/>
</AdornerDecorator>
</Grid>
</DockPanel>
</DockPanel>
<Rectangle x:Name="TopLeftRectangle" Fill="Transparent" />
<Rectangle x:Name="TopRectangle" Fill="Transparent" Grid.Column="1" />
<Rectangle x:Name="TopRightRectangle" Fill="Transparent" Grid.Column="2" />
<Rectangle Name="RightRectangle" Fill="Transparent" Grid.Row="1" Grid.Column="2" />
<Rectangle Name="BottomRightRectangle" Fill="Transparent" Grid.Row="2" Grid.Column="2" />
<Rectangle Name="BottomRectangle" Fill="Transparent" Grid.Row="2" Grid.Column="1" />
<Rectangle Name="BottomLeftRectangle" Fill="Transparent" Grid.Row="2" />
<Rectangle Name="LeftRectangle" Fill="Transparent" Grid.Row="1" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
In your Button ControlTemplate.Trigger for IsPressed you can bind the Background in
Setter like:
<Setter Property="Background" Value="{Binding BorderBrush, RelativeSource= {RelativeSource AncestorType={x:Type local:MetroWindow}}}"/>
In your Button ControlTemplate.Trigger for IsPressed you can bind the Background in Setter like:
Setter Property="Background" Value="{Binding Path=BorderBrush, RelativeSource={RelativeSource TemplatedParent}}"

How to change the CornerRadius of the Combobox WPF

I want to use a ComboBox with different CornerRadius, how can I change that simply? I've tried with Style and ControlTemplate, but without any success.
I don't know if this is simple, but creating a ControlTemplate based on the default ComboBox should do the trick. Here is an example:
<Style x:Key="ComboBoxTextBoxStyle" TargetType="{x:Type TextBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid>
<Border CornerRadius="5,0,0,5"
BorderThickness="1"
Background="{TemplateBinding Background}"
BorderBrush="Black">
<ScrollViewer x:Name="PART_ContentHost"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type ComboBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition MaxWidth="18"/>
</Grid.ColumnDefinitions>
<TextBox Name="PART_EditableTextBox"
Style="{StaticResource ComboBoxTextBoxStyle}"
Padding="5,0,0,0"
Height="{TemplateBinding Height}"/>
<ToggleButton Grid.Column="1" Margin="0"
Height="{TemplateBinding Height}"
Style="{StaticResource ComboBoxButtonStyle}"
Focusable="False"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press">
<Path Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z"
Fill="DodgerBlue" />
</ToggleButton>
<ContentPresenter Name="ContentSite"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="5,0,0,0"/>
<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"
BorderThickness="1"
CornerRadius="5"
Background="Azure"
BorderBrush="Black"/>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You will need to define the VisualStates/Triggers in the Style if required
Thanks Richard E!
Here a clean version of Richard E's answer:
<Style x:Key="ComboBoxTextBoxStyle" TargetType="{x:Type TextBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid>
<Border CornerRadius="5,0,0,5"
BorderThickness="1,1,0,1"
Background="{TemplateBinding Background}"
BorderBrush="Black">
<ScrollViewer x:Name="PART_ContentHost"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ComboBoxButtonStyle" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border
Background="White"
x:Name="border"
CornerRadius="0,5,5,0"
BorderThickness="0,1,1,1"
BorderBrush="Black">
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="RoundComboBox" TargetType="{x:Type ComboBox}">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition MaxWidth="18"/>
</Grid.ColumnDefinitions>
<TextBox Name="PART_EditableTextBox"
Style="{StaticResource ComboBoxTextBoxStyle}"
Padding="5,0,0,0"
Height="{TemplateBinding Height}"/>
<ToggleButton Grid.Column="1" Margin="0"
Height="{TemplateBinding Height}"
Style="{StaticResource ComboBoxButtonStyle}"
Focusable="False"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press">
<Path Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z"
Fill="DodgerBlue" />
</ToggleButton>
<ContentPresenter Name="ContentSite"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="5,0,0,0"/>
<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"
BorderThickness="1"
CornerRadius="5"
Background="Azure"
BorderBrush="Black"/>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
UPDATE:
After changing to get my custom version I found out it wasn't the best example to start with (editable combobox, not optimized, missing style etc ...), I found a good example on this website:
http://www.wpfhelper.com/index.php/styles-in-wpf/combobox/15-combobox-style-in-wpf
And here my custom version (to implement in Resources ex: in tag <UserControl.Resources>):
<Style x:Key="ComboBoxToggleButton" TargetType="ToggleButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="32" />
</Grid.ColumnDefinitions>
<Border
x:Name="Border"
Grid.ColumnSpan="2"
CornerRadius="8"
Background="{TemplateBinding Background}"
BorderBrush="#F6F6F6"
BorderThickness="1"
/>
<Path
x:Name="Arrow"
Grid.Column="1"
Fill="{TemplateBinding Foreground}"
Stroke="{TemplateBinding Foreground}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox">
<Border x:Name="PART_ContentHost" Focusable="True" />
</ControlTemplate>
<Style x:Key="theComboBox" TargetType="{x:Type ComboBox}">
<Setter Property="Foreground" Value="#333" />
<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="13" />
<Setter Property="MinWidth" Value="150"/>
<Setter Property="MinHeight" Value="35"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<ToggleButton
Cursor="Hand"
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"/>
<ContentPresenter
Name="ContentSite"
IsHitTestVisible="False"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="10,3,30,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"
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
CornerRadius="8"
x:Name="DropDownBorder"
Background="White"
BorderThickness="1"
BorderBrush="#F6F6F6"
/>
<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 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>
<Style x:Key="theComboBoxItem" TargetType="{x:Type ComboBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="FontSize" Value="13" />
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<Border
Name="Border"
Padding="5"
Margin="2"
BorderThickness="2,0,0,0"
CornerRadius="0"
Background="Transparent"
BorderBrush="Transparent">
<TextBlock TextAlignment="Left">
<ContentPresenter />
</TextBlock>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="true">
<Setter TargetName="Border" Property="BorderBrush" Value="#B3CB37"/>
<Setter TargetName="Border" Property="Background" Value="#F8FAEB"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And here the Combobox and style implementation:
<ComboBox
FontSize="13"
Style="{DynamicResource theComboBox}"
Padding="15,5,15,5"
HorizontalContentAlignment="Left"
VerticalAlignment="Center"
MinWidth="100"
MaxWidth="375"
Grid.Row="1"
Grid.Column="1"
ItemContainerStyle="{DynamicResource theComboBoxItem}"
>
<ComboBoxItem>Available</ComboBoxItem>
<ComboBoxItem>Busy</ComboBoxItem>
<ComboBoxItem>On Duty</ComboBoxItem>
<ComboBoxItem>On Meeting</ComboBoxItem>
<ComboBoxItem>On Vacation</ComboBoxItem>
<ComboBoxItem>On Weekend</ComboBoxItem>
</ComboBox>
Add a ComboBox in your WPF project, right click on it and select EditTemplate> Edit a copy...
Choose a name for style and click ok.
vs create a ComboBoxTemplate for ComboBox.
now you can add a border and set desired CornerRadius to ComboBoxTemplate.

Resources