Design or edit a Combo box (like following image)?

رضا جافری 1,296 Reputation points
2021-01-08T19:57:24.013+00:00

Hi to all
First and foremost, I apologize for my grammatical errors; my first language is Persian (Iran).

How to make/edit a Combo box like the one below that has the following features?
Corner radius==9 and Toggle button like following image

54942-combobox.jpg

Thanks

Developer technologies | Universal Windows Platform (UWP)
Developer technologies | Windows Presentation Foundation
0 comments No comments
{count} votes

Accepted answer
  1. Peter Fleischer (former MVP) 19,341 Reputation points
    2021-01-09T10:03:45+00:00

    Hi,
    you can create your own style like this:

    <Window x:Class="Window073"  
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
            xmlns:local="clr-namespace:WpfApp1"  
            mc:Ignorable="d"  
            Title="Window073" Height="450" Width="800">  
      
      <Window.Resources>  
      
        <!--Control colors.-->  
        <Color x:Key="WindowColor">#FFE8EDF9</Color>  
        <Color x:Key="ContentAreaColorLight">#FFC5CBF9</Color>  
        <Color x:Key="ContentAreaColorDark">#FF7381F9</Color>  
      
        <Color x:Key="DisabledControlLightColor">#FFE8EDF9</Color>  
        <Color x:Key="DisabledControlDarkColor">#FFC5CBF9</Color>  
        <Color x:Key="DisabledForegroundColor">#FF888888</Color>  
      
        <Color x:Key="SelectedBackgroundColor">#FFC5CBF9</Color>  
        <Color x:Key="SelectedUnfocusedColor">#FFDDDDDD</Color>  
      
        <Color x:Key="ControlLightColor">White</Color>  
        <Color x:Key="ControlMediumColor">#FF7381F9</Color>  
        <Color x:Key="ControlDarkColor">#FF211AA9</Color>  
      
        <Color x:Key="ControlMouseOverColor">#FF3843C4</Color>  
        <Color x:Key="ControlPressedColor">#FF211AA9</Color>  
      
      
        <Color x:Key="GlyphColor">#FF444444</Color>  
        <Color x:Key="GlyphMouseOver">sc#1, 0.004391443, 0.002428215, 0.242281124</Color>  
      
        <!--Border colors-->  
        <Color x:Key="BorderLightColor">#FFCCCCCC</Color>  
        <Color x:Key="BorderMediumColor">#FF888888</Color>  
        <Color x:Key="BorderDarkColor">#FF444444</Color>  
      
        <Color x:Key="PressedBorderLightColor">#FF888888</Color>  
        <Color x:Key="PressedBorderDarkColor">#FF444444</Color>  
      
        <Color x:Key="DisabledBorderLightColor">#FFAAAAAA</Color>  
        <Color x:Key="DisabledBorderDarkColor">#FF888888</Color>  
      
        <Color x:Key="DefaultBorderBrushDarkColor">Black</Color>  
      
        <!--Control-specific resources.-->  
        <Color x:Key="HeaderTopColor">#FFC5CBF9</Color>  
        <Color x:Key="DatagridCurrentCellBorderColor">Black</Color>  
        <Color x:Key="SliderTrackDarkColor">#FFC5CBF9</Color>  
      
        <Color x:Key="NavButtonFrameColor">#FF3843C4</Color>  
      
        <LinearGradientBrush x:Key="MenuPopupBrush" EndPoint="0.5,1" StartPoint="0.5,0">  
          <GradientStop Color="{DynamicResource ControlLightColor}" Offset="0" />  
          <GradientStop Color="{DynamicResource ControlMediumColor}" Offset="0.5" />  
          <GradientStop Color="{DynamicResource ControlLightColor}" Offset="1" />  
        </LinearGradientBrush>  
      
        <LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill" StartPoint="0,0" EndPoint="1,0">  
          <LinearGradientBrush.GradientStops>  
            <GradientStopCollection>  
              <GradientStop Color="#000000FF" Offset="0" />  
              <GradientStop Color="#600000FF" Offset="0.4" />  
              <GradientStop Color="#600000FF" Offset="0.6" />  
              <GradientStop Color="#000000FF" Offset="1" />  
            </GradientStopCollection>  
          </LinearGradientBrush.GradientStops>  
        </LinearGradientBrush>  
      
        <ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">  
          <Grid>  
            <Grid.ColumnDefinitions>  
              <ColumnDefinition />  
              <ColumnDefinition Width="1" />  
              <ColumnDefinition Width="15" />  
            </Grid.ColumnDefinitions>  
            <VisualStateManager.VisualStateGroups>  
              <VisualStateGroup x:Name="CommonStates">  
                <VisualState x:Name="Normal" />  
                <VisualState x:Name="MouseOver">  
                  <Storyboard>  
                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="Border">  
                      <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColor}" />  
                    </ColorAnimationUsingKeyFrames>  
                  </Storyboard>  
                </VisualState>  
                <VisualState x:Name="Pressed" />  
                <VisualState x:Name="Disabled">  
                  <Storyboard>  
                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="Border">  
                      <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledControlDarkColor}" />  
                    </ColorAnimationUsingKeyFrames>  
                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Arrow">  
                      <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledForegroundColor}" />  
                    </ColorAnimationUsingKeyFrames>  
                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="Border">  
                      <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledBorderDarkColor}" />  
                    </ColorAnimationUsingKeyFrames>  
                  </Storyboard>  
                </VisualState>  
              </VisualStateGroup>  
              <VisualStateGroup x:Name="CheckStates">  
                <VisualState x:Name="Checked">  
                  <Storyboard>  
                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="Border">  
                      <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlPressedColor}" />  
                    </ColorAnimationUsingKeyFrames>  
                  </Storyboard>  
                </VisualState>  
                <VisualState x:Name="Unchecked" />  
                <VisualState x:Name="Indeterminate" />  
              </VisualStateGroup>  
            </VisualStateManager.VisualStateGroups>  
            <Border x:Name="Border" Grid.ColumnSpan="3" CornerRadius="5" BorderThickness="1">  
              <Border.BorderBrush>  
                <SolidColorBrush Color="LightGray"/>  
              </Border.BorderBrush>  
              <Border.Background>  
                <SolidColorBrush Color="LightGray"/>  
              </Border.Background>  
            </Border>  
            <Border BorderThickness="1" Grid.Column="2" Margin="1" CornerRadius="0,4,4,0">  
              <Border.BorderBrush>  
                <SolidColorBrush Color="{DynamicResource ControlLightColor}"/>  
              </Border.BorderBrush>  
            </Border>  
            <Rectangle Grid.Column="1" Fill="LightGray"/>  
            <Border Grid.Column="0" CornerRadius="5,0,0,5" Margin="1,1,0,1">  
              <Border.Background>  
                <SolidColorBrush Color="{DynamicResource ControlLightColor}"/>  
              </Border.Background>  
            </Border>  
            <Path x:Name="Arrow" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 3 3 L 6 0 Z" >  
              <Path.Fill>  
                <SolidColorBrush Color="{DynamicResource GlyphColor}"/>  
              </Path.Fill>  
            </Path>  
          </Grid>  
        </ControlTemplate>  
      
        <ControlTemplate x:Key="ComboBoxTextBox" TargetType="{x:Type TextBox}">  
          <Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />  
        </ControlTemplate>  
      
        <Style x:Key="{x:Type ComboBox}" TargetType="{x:Type ComboBox}">  
          <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="MinWidth" Value="120" />  
          <Setter Property="MinHeight" Value="20" />  
          <Setter Property="Template">  
            <Setter.Value>  
              <ControlTemplate TargetType="{x:Type ComboBox}">  
                <Grid>  
                  <VisualStateManager.VisualStateGroups>  
                    <VisualStateGroup x:Name="CommonStates">  
                      <VisualState x:Name="Normal" />  
                      <VisualState x:Name="MouseOver" />  
                      <VisualState x:Name="Disabled">  
                        <Storyboard>  
                          <ColorAnimationUsingKeyFrames Storyboard.TargetName="PART_EditableTextBox"                                                Storyboard.TargetProperty="(TextElement.Foreground).                      (SolidColorBrush.Color)">  
                            <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledForegroundColor}" />  
                          </ColorAnimationUsingKeyFrames>  
                        </Storyboard>  
                      </VisualState>  
                    </VisualStateGroup>  
                    <VisualStateGroup x:Name="EditStates">  
                      <VisualState x:Name="Editable">  
                        <Storyboard>  
                          <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"                                                 Storyboard.TargetName="PART_EditableTextBox">  
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />  
                          </ObjectAnimationUsingKeyFrames>  
                          <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ContentSite">  
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}" />  
                          </ObjectAnimationUsingKeyFrames>  
                        </Storyboard>  
                      </VisualState>  
                      <VisualState x:Name="Uneditable" />  
                    </VisualStateGroup>  
                  </VisualStateManager.VisualStateGroups>  
                  <ToggleButton x:Name="ToggleButton"  
                            Template="{StaticResource ComboBoxToggleButton}"  
                            Grid.Column="2"  
                            Focusable="false"  
                            ClickMode="Press"  
                            IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>  
                  <ContentPresenter x:Name="ContentSite"  
                                    IsHitTestVisible="False"  
                                    Content="{TemplateBinding SelectionBoxItem}"  
                                    ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"  
                                    ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"  
                                    Margin="3,3,23,3"  
                                    VerticalAlignment="Stretch"  
                                    HorizontalAlignment="Left">  
                  </ContentPresenter>  
                  <TextBox x:Name="PART_EditableTextBox"  
                           Style="{x:Null}"  
                           Template="{StaticResource ComboBoxTextBox}"  
                           HorizontalAlignment="Left"  
                           VerticalAlignment="Bottom"  
                           Margin="3,3,23,3"  
                           Focusable="True"  
                           Background="Transparent"  
                           Visibility="Hidden"  
                           IsReadOnly="{TemplateBinding IsReadOnly}" />  
                  <Popup x:Name="Popup"  
                         Placement="Bottom"  
                         IsOpen="{TemplateBinding IsDropDownOpen}"  
                         AllowsTransparency="True"  
                         Focusable="False"  
                         PopupAnimation="Slide">  
                    <Grid x:Name="DropDown"  
                          SnapsToDevicePixels="True"  
                          MinWidth="{TemplateBinding ActualWidth}"  
                          MaxHeight="{TemplateBinding MaxDropDownHeight}">  
                      <Border x:Name="DropDownBorder" BorderThickness="1">  
                        <Border.BorderBrush>  
                          <SolidColorBrush Color="{DynamicResource BorderMediumColor}" />  
                        </Border.BorderBrush>  
                        <Border.Background>  
                          <SolidColorBrush Color="{DynamicResource ControlLightColor}" />  
                        </Border.Background>  
                      </Border>  
                      <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 SourceName="Popup" Property="AllowsTransparency" Value="true">  
                    <Setter TargetName="DropDownBorder" Property="CornerRadius" Value="4" />  
                    <Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0" />  
                  </Trigger>  
                </ControlTemplate.Triggers>  
              </ControlTemplate>  
            </Setter.Value>  
          </Setter>  
        </Style>  
      
        <Style x:Key="{x:Type ComboBoxItem}"  
           TargetType="{x:Type ComboBoxItem}">  
          <Setter Property="SnapsToDevicePixels" Value="true" />  
          <Setter Property="OverridesDefaultStyle" Value="true" />  
          <Setter Property="Template">  
            <Setter.Value>  
              <ControlTemplate TargetType="{x:Type ComboBoxItem}">  
                <Border x:Name="Border" Padding="2" SnapsToDevicePixels="true" Background="Transparent">  
                  <VisualStateManager.VisualStateGroups>  
                    <VisualStateGroup x:Name="SelectionStates">  
                      <VisualState x:Name="Unselected" />  
                      <VisualState x:Name="Selected">  
                        <Storyboard>  
                          <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">  
                            <EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedBackgroundColor}" />  
                          </ColorAnimationUsingKeyFrames>  
                        </Storyboard>  
                      </VisualState>  
                      <VisualState x:Name="SelectedUnfocused">  
                        <Storyboard>  
                          <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">  
                            <EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedUnfocusedColor}" />  
                          </ColorAnimationUsingKeyFrames>  
                        </Storyboard>  
                      </VisualState>  
                    </VisualStateGroup>  
                  </VisualStateManager.VisualStateGroups>  
                  <ContentPresenter />  
                </Border>  
              </ControlTemplate>  
            </Setter.Value>  
          </Setter>  
        </Style>  
      
      </Window.Resources>  
      
      <Grid Background="Aquamarine">  
        <ComboBox Height="20" Width="200"/>  
      </Grid>  
      
    </Window>  
    

    Result:

    55003-x.png

    1 person found this answer helpful.

0 additional answers

Sort by: Most helpful

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.