Tuesday, August 3, 2010

WPF Combo Box Style & Control template for combo box with rounded corners

<'LinearGradientBrush x:Key="NormalBrush" StartPoint="0,0" EndPoint="0,1"'>
<'GradientBrush.GradientStops'>
<'GradientStopCollection'>
<'GradientStop Color="#FFF" Offset="0.0"/'>
<'GradientStop Color="#CCC" Offset="1.0"/'>
<'/GradientStopCollection'>
<'/GradientBrush.GradientStops'>
<'/LinearGradientBrush'>
<'SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE" /'>

<'SolidColorBrush x:Key="WindowBackgroundBrush" Color="WhiteSmoke" /'>

<'SolidColorBrush x:Key="SelectedBackgroundBrush" Color="#DDD" /'>

<'LinearGradientBrush x:Key="NormalBorderBrush" StartPoint="0,0" EndPoint="0,1"'>
<'GradientBrush.GradientStops'>
<'GradientStopCollection'>
<'GradientStop Color="#CCC" Offset="0.0"/'>
<'GradientStop Color="#444" Offset="1.0"/'>
<'/GradientStopCollection'>
<'/GradientBrush.GradientStops'>
<'/LinearGradientBrush'>

<'SolidColorBrush x:Key="SolidBorderBrush" Color="#888" /'>
<'SolidColorBrush x:Key="GlyphBrush" Color="#444" /'>

<'ControlTemplate x:Key="ComboBoxToggleButton" TargetType="ToggleButton"'>
<'Grid'>
<'Grid.ColumnDefinitions'>
<'ColumnDefinition '/>
<'ColumnDefinition Width="20" '/>
<'/Grid.ColumnDefinitions'>
<'Border
x:Name="Border"
Grid.ColumnSpan="2"
CornerRadius="15,15,15,15"
Background="{StaticResource NormalBrush}"
BorderBrush="{StaticResource NormalBorderBrush}"
BorderThickness="1" /'>

<'Path
x:Name="Arrow"
Grid.Column="1"
Fill="{StaticResource GlyphBrush}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z"/'>

<'/Grid'>

<'/ControlTemplate'>

<'ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox"''>
<'Border x:Name="PART_ContentHost" BorderThickness="2" Focusable="False" Background="{TemplateBinding Background}" CornerRadius="10,10,10,10" /'>
<'/ControlTemplate'>

<'ControlTemplate x:Key="ComboBoxTemplate" TargetType="{x:Type ComboBox}"'>
<'Grid'>
<'ToggleButton
Name="ToggleButton"
Template="{StaticResource ComboBoxToggleButton}"
Grid.Column="2"
Focusable="false"

IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press">
<'/ToggleButton'>

<'TextBox x:Name="PART_EditableTextBox"
Style="{x:Null}"
Template="{StaticResource ComboBoxTextBox}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="3,3,23,3"
Focusable="True"
Background="LightGray"
Visibility="Hidden"
IsReadOnly="{TemplateBinding IsReadOnly}"/'>

<'ContentPresenter
Name="ContentSite"
IsHitTestVisible="False"

Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="3,3,23,3"
VerticalAlignment="Center"
HorizontalAlignment="Center" /'>

<'Popup
Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide"'>

<'Grid
Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<'Border
x:Name="DropDownBorder"
Background="{StaticResource WindowBackgroundBrush}"
BorderThickness="1"
BorderBrush="{StaticResource SolidBorderBrush}"/'>
<'ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True"'>

<'/ScrollViewer'>
<'/Grid'>
<'/Popup'>
<'/Grid'>
<'ControlTemplate.Triggers '>
<'Trigger Property="IsMouseOver" Value="true"'>

<'/Trigger'>
<'/ControlTemplate.Triggers'>
<'/ControlTemplate'>

1 comment: