WPF ComboBox ControlTemplate: C#, WPF, .NET, ControlTemplate, ComboBox

Hello LiorWN,

Below is some XAML that displays three buttons as part of a combo box control.

If you wish to have a toolbar like firefox, I suggest using a menu,

I will create acopy of the firefox menu and post the XAML if you wish.

Regards,

TommyTwoPints

<ResourceDictionary
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Royale">
	<Style x:Key="ComboBoxFocusVisual">
			<Setter Property="Control.Template">
				<Setter.Value>
					<ControlTemplate>
						<Rectangle SnapsToDevicePixels="true" Margin="4,4,21,4" Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1"/>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<SolidColorBrush x:Key="ListBorder" Color="#FFA7A6AA"/>
		<Style x:Key="ComboBoxTransparentButtonStyle" TargetType="{x:Type ToggleButton}">
			<Setter Property="MinWidth" Value="0"/>
			<Setter Property="MinHeight" Value="0"/>
			<Setter Property="Width" Value="Auto"/>
			<Setter Property="Height" Value="Auto"/>
			<Setter Property="Background" Value="Transparent"/>
			<Setter Property="Focusable" Value="false"/>
			<Setter Property="ClickMode" Value="Press"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type ToggleButton}">
						<Grid SnapsToDevicePixels="true" Background="{TemplateBinding Background}">
							<Grid.ColumnDefinitions>
								<ColumnDefinition Width="*"/>
								<ColumnDefinition Width="Auto" SharedSizeGroup="ComboBoxButton"/>
							</Grid.ColumnDefinitions>
							<Microsoft_Windows_Themes:ScrollChrome x:Name="Chrome" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Grid.Column="1" HasOuterBorder="false" Padding="1,0,0,0" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsChecked}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="DownArrow"/>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<Style x:Key="ComboBoxEditableTextBox" TargetType="{x:Type TextBox}">
			<Setter Property="OverridesDefaultStyle" Value="true"/>
			<Setter Property="AllowDrop" Value="true"/>
			<Setter Property="MinWidth" Value="0"/>
			<Setter Property="MinHeight" Value="0"/>
			<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type TextBox}">
						<ScrollViewer Focusable="false" Background="Transparent" x:Name="PART_ContentHost" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<ControlTemplate x:Key="ComboBoxEditableTemplate" TargetType="{x:Type ComboBox}">
			<Grid SnapsToDevicePixels="true">
				<Border x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="1">
					<Grid Grid.IsSharedSizeScope="true">
						<Grid.ColumnDefinitions>
							<ColumnDefinition Width="1"/>
							<ColumnDefinition Width="*"/>
							<ColumnDefinition Width="Auto" SharedSizeGroup="ComboBoxButton"/>
						</Grid.ColumnDefinitions>
						<TextBox HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" x:Name="PART_EditableTextBox" Style="{StaticResource ComboBoxEditableTextBox}" Grid.Column="1" IsReadOnly="{Binding Path=IsReadOnly, RelativeSource={RelativeSource TemplatedParent}}"/>
						<ToggleButton Background="{x:Null}" Style="{StaticResource ComboBoxTransparentButtonStyle}" Grid.ColumnSpan="3" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>
					</Grid>
				</Border>
				<Popup Focusable="false" AllowsTransparency="true" IsOpen="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Bottom" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" x:Name="PART_Popup">
					<Microsoft_Windows_Themes:SystemDropShadowChrome MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding ActualWidth}" x:Name="Shdw" Color="Transparent">
						<Border x:Name="DropDownBorder" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1">
							<ScrollViewer>
								<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.DirectionalNavigation="Contained"/>
							</ScrollViewer>
						</Border>
					</Microsoft_Windows_Themes:SystemDropShadowChrome>
				</Popup>
			</Grid>
			<ControlTemplate.Triggers>
				<Trigger Property="HasItems" Value="false">
					<Setter Property="MinHeight" TargetName="DropDownBorder" Value="95"/>
				</Trigger>
				<Trigger Property="IsMouseOver" Value="true">
					<Setter Property="BorderBrush" TargetName="Bd" Value="#335EA8"/>
				</Trigger>
				<Trigger Property="IsEnabled" Value="false">
					<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
					<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
				</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="CustomDropDown" TargetType="{x:Type ComboBox}">
			<Setter Property="FocusVisualStyle" Value="{StaticResource ComboBoxFocusVisual}"/>
			<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/>
			<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
			<Setter Property="BorderBrush" Value="{StaticResource ListBorder}"/>
			<Setter Property="BorderThickness" Value="1"/>
			<Setter Property="Padding" Value="0,1"/>
			<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
			<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
			<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
			<Setter Property="VerticalContentAlignment" Value="Center"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type ComboBox}">
						<Grid x:Name="PlaceButtonsHere">
							<Grid SnapsToDevicePixels="true" Margin="0,0,100,0" x:Name="Grid_DropDown">
								<Border x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="1">
									<Grid Grid.IsSharedSizeScope="true">
										<Grid.ColumnDefinitions>
											<ColumnDefinition Width="1"/>
											<ColumnDefinition Width="*"/>
											<ColumnDefinition Width="Auto" SharedSizeGroup="ComboBoxButton"/>
										</Grid.ColumnDefinitions>
										<Border Margin="{TemplateBinding Padding}" x:Name="SelectedItemBorder" Grid.ColumnSpan="2"/>
										<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Grid.Column="1" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"/>
										<ToggleButton Style="{StaticResource ComboBoxTransparentButtonStyle}" Grid.ColumnSpan="3" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>
									</Grid>
								</Border>
								<Popup Focusable="false" AllowsTransparency="true" IsOpen="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Bottom" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" x:Name="PART_Popup" Width="{Binding Path=Width, ElementName=Grid_DropDown, Mode=Default}">
									<Microsoft_Windows_Themes:SystemDropShadowChrome MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding ActualWidth}" x:Name="Shdw" Color="Transparent">
										<Border x:Name="DropDownBorder" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1">
											<ScrollViewer>
												<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.DirectionalNavigation="Contained"/>
											</ScrollViewer>
										</Border>
									</Microsoft_Windows_Themes:SystemDropShadowChrome>
								</Popup>
							</Grid>
							<Button HorizontalAlignment="Right" Margin="0,0,65.917,0" VerticalAlignment="Stretch" Width="30.083" Content="Button"/>
							<Button HorizontalAlignment="Right" Margin="0,0,31.834,0" VerticalAlignment="Stretch" Width="30.083" Content="Button"/>
							<Button HorizontalAlignment="Right" Margin="0,0,-2.249,0" VerticalAlignment="Stretch" Width="30.083" Content="Button"/>
						</Grid>
						<ControlTemplate.Triggers>
							<MultiTrigger>
								<MultiTrigger.Conditions>
									<Condition Property="IsSelectionBoxHighlighted" Value="true"/>
									<Condition Property="IsDropDownOpen" Value="false"/>
								</MultiTrigger.Conditions>
								<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
							</MultiTrigger>
							<Trigger Property="IsSelectionBoxHighlighted" Value="true">
								<Setter Property="Background" TargetName="SelectedItemBorder" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
							</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>
							<Trigger Property="HasItems" Value="false">
								<Setter Property="MinHeight" TargetName="DropDownBorder" Value="95"/>
							</Trigger>
							<Trigger Property="IsMouseOver" Value="true">
								<Setter Property="BorderBrush" TargetName="Bd" Value="#335EA8"/>
							</Trigger>
							<Trigger Property="IsEnabled" Value="false">
								<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
								<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
							</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="IsTabStop" Value="false"/>
					<Setter Property="Template" Value="{StaticResource ComboBoxEditableTemplate}"/>
				</Trigger>
			</Style.Triggers>
		</Style>
</ResourceDictionary>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:

Select all Open in new window

Question

WPF ComboBox ControlTemplate

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Need individual assistance?

Our experts are ready to help.

Want to learn from the best?

Read articles from industry experts.

Working on a long term project?

Store your work and research.

What Makes Experts Exchange Unique?

Trusted by the world's most respected brands.

Faithfully serving IT professionals since 1996.

Related Solutions

Free Tech Articles

Cloud Class Webinars

Join the Community

Give a Little. Get a Lot.

Answers

3 Ways to Join

The Experts

The Experts

Testimonials

Testimonials

Testimonials

Business Clients

Business Clients

In the Press

In the Press

In the Press