We Keep Coding

Binding to ItemsSource and SelectedItem of a ComboBox with custom Style (WPF .NET Core MVVM)

I am trying to bind the ItemsSource and SelectedItem properties of a ComboBox and the items are not displaying properly. The ComboBox is populated with the values of an Enum based on a solution suggested in this post. I have defined the ComboBox on the View as follows:
<ComboBox
Grid.Column="1"
Grid.Row="2"
ItemContainerStyle="{DynamicResource ComboBoxItemStyle}"
Style="{DynamicResource MaterialComboBox}"
SelectedItem="{Binding SelectedSetting}" ItemsSource="{Binding SettingOptions}" />
The properties on ViewModel I bind to are defined as follows:
private DataUpdateRate _selectedSetting;
public DataUpdateRate SelectedSetting
{
get { return _selectedSetting; }
set
{
_selectedSetting = value;
OnPropertyChanged("SelectedMyEnumType");
}
}
public IEnumerable<DataUpdateRate> SettingOptions
{
get
{
return Enum.GetValues(typeof(DataUpdateRate))
.Cast<DataUpdateRate>();
}
}
To the same ComboBox, I have also applied a custom style and template. My guess is that the issue lies in the DataTemplate I defined for the ContentPresenter
<!-- ItemTemplate-->
<Style x:Key="ComboBoxItemStyle" TargetType="{x:Type ComboBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Padding" Value="6 4"/>
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border
x:Name="itemBorder"
Background="{TemplateBinding Background}"
Padding="{TemplateBinding Padding}"
SnapsToDevicePixels="true">
<TextBlock
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Text="{TemplateBinding Content}"
FontSize="16"
FontWeight="Medium"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="itemBorder" Value="{StaticResource SurfaceElevation5Brush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Toggle Button (main button with arrow) -->
<Style x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="ClickMode" Value="Press"/>
<Setter Property="Height" Value="40" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border
x:Name="templateRoot"
Background="{StaticResource SurfaceElevation2Brush}"
BorderBrush="{StaticResource SurfaceElevation5Brush}"
BorderThickness="0 0 0 1.5"
CornerRadius="5 5 0 0"
SnapsToDevicePixels="true">
<Border
SnapsToDevicePixels="true"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Margin="6 0">
<Viewbox Width="15" Height="15">
<Path
x:Name="arrow"
Stretch="Fill"
Data="M24 30 14 20.05H34Z"
Fill="{StaticResource SurfaceElevation5Brush}"/>
</Viewbox>
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource PrimaryLightBrush}" />
<Setter Property="Fill" TargetName="arrow" Value="{StaticResource PrimaryLightBrush}"/>
</Trigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsChecked, RelativeSource={RelativeSource Self}}" Value="True"/>
</MultiDataTrigger.Conditions>
<Setter Property="BorderBrush" TargetName="templateRoot" Value="{StaticResource PrimaryBrush}" />
<Setter Property="Fill" TargetName="arrow" Value="{StaticResource PrimaryBrush}"/>
</MultiDataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="ComboBoxTemplate" TargetType="{x:Type ComboBox}">
<Grid SnapsToDevicePixels="True">
<!-- Popup -->
<Popup
x:Name="PART_Popup"
AllowsTransparency="true"
IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
Placement="Bottom"
PopupAnimation="Slide">
<!-- This is the actual dropdown part-->
<Border
x:Name="dropDownBorder"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding FrameworkElement.ActualWidth}"
MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}"
Background="{StaticResource SurfaceElevation3Brush}"
CornerRadius="0 0 5 5">
<ScrollViewer x:Name="DropDownScrollViewer">
<ItemsPresenter
x:Name="ItemsPresenter"
KeyboardNavigation.DirectionalNavigation="Contained"
SnapsToDevicePixels="True"
/>
</ScrollViewer>
</Border>
</Popup>
<!-- ToggleButton -->
<ToggleButton
x:Name="toggleButton"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
Style="{StaticResource ComboBoxToggleButton}"/>
<!-- ContentPresenter -->
<ContentPresenter
x:Name="contentPresenter"
ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
IsHitTestVisible="false"
Margin="10 0"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<ContentPresenter.ContentTemplate>
<DataTemplate>
<TextBlock Text="{TemplateBinding Content}" FontSize="16"/>
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
</Grid>
</ControlTemplate>
<!-- Main ComboBo Style -->
<Style x:Key="MaterialComboBox" TargetType="{x:Type ComboBox}">
<Setter Property="Foreground" Value="{StaticResource ForegroundLightBrush}"/>
<Setter Property="Padding" Value="6,3,5,3"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Margin" Value="20 0" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="ScrollViewer.PanningMode" Value="Both"/>
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template" Value="{StaticResource ComboBoxTemplate}"/>
</Style>
When I run the application the ComboBox expands according to the number of elements in the Enum, suggesting that it does generate the ComboBoxItems correctly, but doesn't display the values of the items. I have also tried another solution from the post I referenced earlier with the same result.
I assume that I have done something wrong with the ComboBox template, but I can't put my finger on it. If anyone has a solution I would greatly appreciate it.

I can't click combobox and change item.in wpf

I was trying to make a transparent combo box.
I found this article and followed.
WPF combobox transparent background not working with Windows 10
It was successful to make this combo box transparent. Like below.
But after that, I can't control the combo box. I can't click and change
items.
This is my style for combo box.
<Style x:Key="ComboBoxStyle_transparent" TargetType="{x:Type ComboBox}">
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
<Setter Property="Background" Value="{StaticResource ComboBox.Static.Background}"/>
<Setter Property="BorderBrush" Value="{StaticResource ComboBox.Static.Border}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="Padding" Value="6,3,5,3"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="ScrollViewer.PanningMode" Value="Both"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="Template" Value="{StaticResource ComboBoxTemplate}"/>
<Style.Triggers>
<Trigger Property="IsEditable" Value="true">
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Padding" Value="2"/>
<Setter Property="Template" Value="{StaticResource ComboBoxEditableTemplate}"/>
</Trigger>
</Style.Triggers>
</Style>
And this is setting I did to make background clear.
<SolidColorBrush x:Key="ComboBox.Static.Background" Color="Transparent"/>
<SolidColorBrush x:Key="ComboBox.Static.Border" Color="Transparent"/>
And this is Xaml code.
<ComboBox Name="ReferenceCombobox"
Grid.Column="1" Grid.ColumnSpan="3"
Grid.Row="1"
Height="30" MinWidth="120"
VerticalAlignment="Top"
HorizontalAlignment="Left"
ItemsSource ="{Binding Path=ReferenceNameList, Mode=TwoWay}"
SelectedItem="{Binding Path=SelectedReference, Mode=TwoWay}"
Text="Choose item to use." Style="{DynamicResource ComboBoxStyle_transparent}"
IsEditable="True"
IsEnabled="True"
SelectedIndex="0"
>
</ComboBox>
I have tried to change & add the properties I found. but it doesn't work at all.
Is there anything I missed?
Thanks for the help. here is ComboBoxEditableTemplate xaml code.
<ControlTemplate x:Key="ComboBoxEditableTemplate" TargetType="{x:Type ComboBox}">
<Grid x:Name="templateRoot" SnapsToDevicePixels="true">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/>
</Grid.ColumnDefinitions>
<Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom">
<Themes:SystemDropShadowChrome x:Name="shadow" Color="Transparent" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=templateRoot}">
<Border x:Name="dropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">
<ScrollViewer x:Name="DropDownScrollViewer">
<Grid x:Name="grid" RenderOptions.ClearTypeHint="Enabled">
<Canvas x:Name="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>
</Border>
</Themes:SystemDropShadowChrome>
</Popup>
<ToggleButton x:Name="toggleButton" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ComboBoxToggleButton}"/>
<Border x:Name="border" Background="{StaticResource TextBox.Static.Background}" Margin="{TemplateBinding BorderThickness}">
<TextBox x:Name="PART_EditableTextBox" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsReadOnly="{Binding IsReadOnly, RelativeSource={RelativeSource TemplatedParent}}" Margin="{TemplateBinding Padding}" Style="{StaticResource ComboBoxEditableTextBox}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" TargetName="border" Value="0.56"/>
</Trigger>
<Trigger Property="IsKeyboardFocusWithin" Value="true">
<Setter Property="Foreground" Value="Black"/>
</Trigger>
<Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true">
<Setter Property="Margin" TargetName="shadow" Value="0,0,5,5"/>
<Setter Property="Color" TargetName="shadow" Value="#71000000"/>
</Trigger>
<Trigger Property="HasItems" Value="false">
<Setter Property="Height" TargetName="dropDownBorder" Value="95"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsGrouping" Value="true"/>
<Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</MultiTrigger>
<Trigger Property="ScrollViewer.CanContentScroll" SourceName="DropDownScrollViewer" Value="false">
<Setter Property="Canvas.Top" TargetName="opaqueRect" Value="{Binding VerticalOffset, ElementName=DropDownScrollViewer}"/>
<Setter Property="Canvas.Left" TargetName="opaqueRect" Value="{Binding HorizontalOffset, ElementName=DropDownScrollViewer}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
And this is ComboBoxTemplate code.
<ControlTemplate x:Key="ComboBoxTemplate" TargetType="{x:Type ComboBox}">
<Grid x:Name="templateRoot" SnapsToDevicePixels="true">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/>
</Grid.ColumnDefinitions>
<Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Margin="1" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom">
<Themes:SystemDropShadowChrome x:Name="shadow" Color="Transparent" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=templateRoot}">
<Border x:Name="dropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">
<ScrollViewer x:Name="DropDownScrollViewer">
<Grid x:Name="grid" RenderOptions.ClearTypeHint="Enabled">
<Canvas x:Name="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>
</Border>
</Themes:SystemDropShadowChrome>
</Popup>
<ToggleButton x:Name="toggleButton" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ComboBoxToggleButton}"/>
<ContentPresenter x:Name="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="HasDropShadow" SourceName="PART_Popup" Value="true">
<Setter Property="Margin" TargetName="shadow" Value="0,0,5,5"/>
<Setter Property="Color" TargetName="shadow" Value="#71000000"/>
</Trigger>
<Trigger Property="HasItems" Value="false">
<Setter Property="Height" TargetName="dropDownBorder" Value="95"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsGrouping" Value="true"/>
<Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</MultiTrigger>
<Trigger Property="ScrollViewer.CanContentScroll" SourceName="DropDownScrollViewer" Value="false">
<Setter Property="Canvas.Top" TargetName="opaqueRect" Value="{Binding VerticalOffset, ElementName=DropDownScrollViewer}"/>
<Setter Property="Canvas.Left" TargetName="opaqueRect" Value="{Binding HorizontalOffset, ElementName=DropDownScrollViewer}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

WPF How To Hide ComboBoxItem BorderBrush On MouseOver? (the blue selection rectangle)

I want to display an Imagebased Combobox in WPF. It works with some templating but I don't figure out how to get rid of the blueish mousehover rectangle.
See the light blue box:
OK I found the solution, the question is solved now See the solution down here:
The Solution:
<ComboBox x:Name="comboBox"
Width="158"
Height="44"
Background="Transparent"
BorderBrush="#551B2830"
Foreground="Black">
<ComboBoxItem TextBlock.TextAlignment="Center">Mousehover me</ComboBoxItem>
<ComboBoxItem TextBlock.TextAlignment="Center">To see the bad </ComboBoxItem>
<ComboBoxItem TextBlock.TextAlignment="Center">blue rectangle</ComboBoxItem>
<ComboBox.ItemContainerStyle>
<Style TargetType="ComboBoxItem">
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Template">
<Setter.Value>
<!--This Does the Magic-->
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border x:Name="Bd"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
SnapsToDevicePixels="true">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="True" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ComboBox.ItemContainerStyle>
</ComboBox>
</Grid>

Ok found out how to do it .. I can add a template for the comboboxItem without Border or with Invisible Border.
I also updated the question with the solution.
Edit: And here also to mark it as answered..
<ComboBox x:Name="comboBox"
Width="158"
Height="44"
Background="Transparent"
BorderBrush="#551B2830"
Foreground="Black">
<ComboBoxItem TextBlock.TextAlignment="Center">Mousehover me</ComboBoxItem>
<ComboBoxItem TextBlock.TextAlignment="Center">To see the bad </ComboBoxItem>
<ComboBoxItem TextBlock.TextAlignment="Center">blue rectangle</ComboBoxItem>
<ComboBox.ItemContainerStyle>
<Style TargetType="ComboBoxItem">
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Template">
<Setter.Value>
<!--This Does the Magic-->
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border x:Name="Bd"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
SnapsToDevicePixels="true">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="True" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ComboBox.ItemContainerStyle>
</ComboBox>

This will work for you :
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"KeyboardNavigation.DirectionalNavigation="Contained"/>
</ScrollViewer></Border>
</Microsoft_Windows_Themes:SystemDropShadowChrome></Popup>
<Microsoft_Windows_Themes:ListBoxChrome x:Name="Border" Grid.ColumnSpan="2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" RenderFocused="{TemplateBinding IsKeyboardFocusWithin}" RenderMouseOver="{TemplateBinding IsMouseOver}"/>
<TextBox x:Name="PART_EditableTextBox" Margin="{TemplateBinding Padding}" Style="{StaticResource ComboBoxEditableTextBox}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" IsReadOnly="{Binding IsReadOnly, RelativeSource={RelativeSource TemplatedParent}}"/>
<ToggleButton Style="{StaticResource ComboBoxToggleButton}"Grid.Column="1" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocusWithin" Value="true">
<Setter Property="Foreground" Value="Black"/></Trigger>
<Trigger Property="IsDropDownOpen" Value="true">
<Setter Property="RenderFocused" TargetName="Border" Value="true"/></Trigger>
<Trigger Property="HasItems" Value="false">
<Setter Property="Height" TargetName="DropDownBorder" Value="95"/></Trigger>
<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>
<Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true">
<Setter Property="Margin" TargetName="Shdw" Value="0,0,5,5"/>
<Setter Property="Color" TargetName="Shdw" Value="#71000000"/></Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="ComboBoxStyle1" TargetType="{x:Type ComboBox}">
<Setter Property="FocusVisualStyle" Value="{StaticResource ComboBoxFocusVisual}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/>
<Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
<Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="Padding" Value="4,3"/>
<Setter Property="Template"><Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid x:Name="MainGrid" SnapsToDevicePixels="true">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/>
</Grid.ColumnDefinitions>
<Popup x:Name="PART_Popup" Margin="1" AllowsTransparency="true" IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}"Placement="Bottom" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Grid.ColumnSpan="2">
<Microsoft_Windows_Themes:SystemDropShadowChrome x:Name="Shdw" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=MainGrid}" Color="Transparent">
<Border x:Name="DropDownBorder" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}"BorderThickness="1">
<ScrollViewer CanContentScroll="true">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"KeyboardNavigation.DirectionalNavigation="Contained"/>
</ScrollViewer></Border>
</Microsoft_Windows_Themes:SystemDropShadowChrome></Popup>
<ToggleButton Style="{StaticResource ComboBoxReadonlyToggleButton}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" Grid.ColumnSpan="2" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" IsHitTestVisible="false" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"Content="{TemplateBinding SelectionBoxItem}" ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true">
<Setter Property="Margin" TargetName="Shdw" Value="0,0,5,5"/>
<Setter Property="Color" TargetName="Shdw" Value="#71000000"/></Trigger>
<Trigger Property="HasItems" Value="false">
<Setter Property="Height" TargetName="DropDownBorder" Value="95"/></Trigger>
<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>
</Window.Resources>
<StackPanel>
<ComboBox Style="{DynamicResource ComboBoxStyle1}">
<ComboBoxItem Content="abc"/>
<ComboBoxItem Content="abc"/>
<ComboBoxItem Content="abc"/>
</ComboBox>
</StackPanel>
</Window>

How to change width for a scroll bar in WPF?

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

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

CheckComboBox in WPF Toolkit Template Customize

I am using CheckComboBox of WPF toolkit. I need to change Popup style of CheckComboBox. (I.e. when CheckBox is checked, Backcolor of Item should be changed, and etc). While trying Exploring control with Blend, I could not find any template to edit its item template.
Can anyone suggest how to customize template of CheckComboBox?
I tried this using Blend.
Thanks in anticipation.

May be the question is outdated, but there is some code for mentioned control on git: https://github.com/samoatesgames/mui.extended.toolkit/blob/master/ModernUI.Xceed/ModernUI.Xceed.Toolkit/Assets/Controls/CheckComboBox.xaml
Here is the style of CheckComboBox, where you can find Popup and other elements of template.
<xctk:InverseBoolConverter x:Key="InverseBoolConverter" />
<Geometry x:Key="DownArrowGeometry">M 0,1 C0,1 0,0 0,0 0,0 3,0 3,0 3,0 3,1 3,1 3,1 4,1 4,1 4,1 4,0 4,0 4,0 7,0 7,0 7,0 7,1 7,1 7,1 6,1 6,1 6,1 6,2 6,2 6,2 5,2 5,2 5,2 5,3 5,3 5,3 4,3 4,3 4,3 4,4 4,4 4,4 3,4 3,4 3,4 3,3 3,3 3,3 2,3 2,3 2,3 2,2 2,2 2,2 1,2 1,2 1,2 1,1 1,1 1,1 0,1 0,1 z</Geometry>
<Style x:Key="ComboBoxToggleButton"
TargetType="{x:Type ToggleButton}">
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="IsTabStop" Value="false" />
<Setter Property="Focusable" Value="false" />
<Setter Property="Padding" Value="2" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<xctk:ButtonChrome x:Name="Chrome"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
CornerRadius="0"
RenderEnabled="{TemplateBinding IsEnabled}"
RenderMouseOver="{Binding IsMouseOver, ElementName=PART_DropDownButton}"
RenderNormal="False"
RenderPressed="{Binding IsPressed, ElementName=PART_DropDownButton}"
SnapsToDevicePixels="true">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0" />
</Grid.ColumnDefinitions>
<TextBox x:Name="TextBox"
Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
Foreground="{TemplateBinding Foreground}"
BorderThickness="0"
Background="Transparent"
IsReadOnly="True"
Focusable="False"
Cursor="Arrow"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden" />
<Grid Grid.Column="1"
HorizontalAlignment="Right"
Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}">
<Path x:Name="Arrow"
Data="{StaticResource DownArrowGeometry}"
Fill="{DynamicResource ItemText}"
HorizontalAlignment="Center"
Margin="3,0,3,0"
VerticalAlignment="Center" />
</Grid>
</Grid>
</xctk:ButtonChrome>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked"
Value="true">
<Setter Property="RenderPressed"
TargetName="Chrome"
Value="true" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Fill" TargetName="Arrow" Value="{DynamicResource ItemTextDisabled}" />
</Trigger>
<DataTrigger Binding="{Binding IsEditable, RelativeSource={RelativeSource AncestorType={x:Type xctk:CheckComboBox}}}" Value="True">
<Setter Property="IsReadOnly" Value="False" TargetName="TextBox" />
<Setter Property="Focusable" Value="True" TargetName="TextBox" />
<Setter Property="Cursor" Value="{x:Null}" TargetName="TextBox" />
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type xctk:CheckComboBox}">
<Setter Property="Foreground" Value="{DynamicResource ItemText}" />
<Setter Property="Background" Value="{DynamicResource WindowBackground}" />
<Setter Property="BorderBrush" Value="{DynamicResource ItemBorder}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="Padding" Value="2" />
<Setter Property="ScrollViewer.CanContentScroll" Value="true" />
<Setter Property="ScrollViewer.PanningMode" Value="Both" />
<Setter Property="Stylus.IsFlicksEnabled" Value="False" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type xctk:CheckComboBox}">
<Grid x:Name="MainGrid"
SnapsToDevicePixels="true">
<Popup x:Name="PART_Popup"
AllowsTransparency="true"
IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
StaysOpen="False"
Margin="1"
PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}"
Placement="Bottom">
<Grid MinWidth="{Binding ActualWidth, ElementName=MainGrid}">
<Border x:Name="DropDownBorder"
Padding="2"
MaxHeight="{Binding MaxDropDownHeight, RelativeSource={RelativeSource TemplatedParent}}"
BorderBrush="{DynamicResource WindowBorderActive}"
BorderThickness="1"
Background="{DynamicResource PopupBackground}">
<ScrollViewer x:Name="DropDownScrollViewer">
<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="PART_ItemsPresenter"
KeyboardNavigation.DirectionalNavigation="Contained"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Grid>
</ScrollViewer>
</Border>
</Grid>
</Popup>
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" />
<ToggleButton x:Name="PART_DropDownButton"
Content="{Binding Text, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
Focusable="False"
IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
Style="{StaticResource ComboBoxToggleButton}"
Padding="{TemplateBinding Padding}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
IsHitTestVisible="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource InverseBoolConverter}}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="BorderBrush" Value="{DynamicResource Accent}" />
</Trigger>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter Property="BorderBrush" Value="{DynamicResource Accent}" />
</Trigger>
</Style.Triggers>
</Style>
However, if you need to change background of selected item, you need to modify SelectorItem Style, something like
<Style TargetType="xctk:SelectorItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type xctk:SelectorItem}">
<Border x:Name="_background"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<CheckBox IsChecked="{Binding IsSelected, RelativeSource={RelativeSource TemplatedParent}}"
Padding="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<CheckBox.Content>
<ContentControl Content="{TemplateBinding Content}"
ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Foreground="{TemplateBinding Foreground}" />
</CheckBox.Content>
</CheckBox>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="_background" Property="Background" Value="Red" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>