XAML (WPF) BLOG

Hi,

Today I have designed a slick ComboBox, which is composed of a ToggleButton and a PopUp.

Here is the code for TogleButton:

<Style x:Key="ComboBoxReadonlyToggleButton" 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="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type ToggleButton}">

<Border x:Name="Chrome" SnapsToDevicePixels="true" BorderBrush="#7F4FAD36" BorderThickness="0,0,1,1" CornerRadius="4,4,4,4">

<Border.Background>

<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">

<GradientStop Color="#FFFFFFFF" Offset="0"/>

<GradientStop Color="#FFD7E9C1" Offset="1"/>

</LinearGradientBrush>

</Border.Background>

<Grid HorizontalAlignment="Right" Width="20">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="3"/>

<ColumnDefinition/>

</Grid.ColumnDefinitions>

<Rectangle Width="1" Fill="{DynamicResource BurshDots}" Margin="0,3,0,4"/>

<Path Grid.Column="1" Fill="#FF436B13" HorizontalAlignment="Center" Margin="3,1,0,0" x:Name="Arrow" VerticalAlignment="Center" Data="{StaticResource DownArrowGeometry}"/>

</Grid>

</Border>

<ControlTemplate.Triggers>

<Trigger Property="IsChecked" Value="True">

<Setter Property="BorderThickness" TargetName="Chrome" Value="1,1,1,0"/>

<Setter Property="CornerRadius" TargetName="Chrome" Value="4,4,0,0"/>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

The style for the PopUp which actualy is in the template of the ComboBox:

<Popup Margin="1" x:Name="PART_Popup" AllowsTransparency="true" IsOpen="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Bottom" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Grid.ColumnSpan="2">

<Border x:Name="DropDownBorder" Background="#FFD7E9C1" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding Path=ActualWidth, ElementName=MainGrid}" BorderBrush="#7F4FAD36" BorderThickness="1,0,1,1" CornerRadius="0,0,4,4">

<ScrollViewer CanContentScroll="true">

<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.DirectionalNavigation="Contained"/>

</ScrollViewer>

</Border>

</Popup>

And here is the style for the ComboBox:

<Style x:Key="ComboBoxStyle" TargetType="{x:Type ComboBox}">

<Setter Property="FocusVisualStyle" Value="{StaticResource ComboBoxFocusVisual}"/>

<Setter Property="Foreground" Value="#FF436B13"/>

<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="Margin" Value="5"/>

<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 Margin="1" x:Name="PART_Popup" AllowsTransparency="true" IsOpen="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Bottom" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Grid.ColumnSpan="2">

<Border x:Name="DropDownBorder" Background="#FFD7E9C1" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding Path=ActualWidth, ElementName=MainGrid}" BorderBrush="#7F4FAD36" BorderThickness="1,0,1,1" CornerRadius="0,0,4,4">

<ScrollViewer CanContentScroll="true">

<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.DirectionalNavigation="Contained"/>

</ScrollViewer>

</Border>

</Popup>

<ToggleButton Style="{StaticResource ComboBoxReadonlyToggleButton}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" Grid.ColumnSpan="2" IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>

<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" IsHitTestVisible="false" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"/>

</Grid>

<ControlTemplate.Triggers>

<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>

<Setter Property="FontFamily" Value="Tahoma"/>

<Setter Property="FontSize" Value="11"/>

<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>

Sources for the project and here is the Microsoft Expressions Design source which isthe drawing brush you can see between the arrow and the selected item.