How to create a custom combox button?

Question

Below is my combo box code,it has two combo box one inside other,now i want the combobox2 toggle button to change its direction of point,i.e the toggle button should point towards right and also on clicking that toggle button combo box should open on the right side so that it does not hide my combo box 1 items,how to do this?

<Window x:Class="ComboBox.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
 <Window.Resources>
        <Color x:Key="GrayColor_">#FF928B81</Color>
        <Color x:Key="LightGrayColor_">#FFC3C3C3</Color>
        <Color x:Key="LightLightGrayColor_">#FFF1F1F1</Color>
        <SolidColorBrush x:Key="GrayColor" Color="{StaticResource GrayColor_}"/>
        <SolidColorBrush x:Key="LightGrayColor" Color="{StaticResource LightGrayColor_}"/>
        <SolidColorBrush x:Key="LightLightGrayColor" Color="{StaticResource LightLightGrayColor_}"/>

        <Color x:Key="BlueColor_">#0073b0</Color>
        <Color x:Key="DarkBlueColor_">#FF004165</Color>
        <Color x:Key="LightBlueColor_">#FFa4ddfa</Color>
        <SolidColorBrush x:Key="BlueColor" Color="{StaticResource BlueColor_}" />
        <SolidColorBrush x:Key="DarkBlueColor" Color="{StaticResource DarkBlueColor_}" />
        <SolidColorBrush x:Key="LightBlueColor" Color="{StaticResource LightBlueColor_}" />

        <SolidColorBrush x:Key="Foreground" Color="Black"/>
        <SolidColorBrush x:Key="ForegroundWhite" Color="White"/>


        <Style x:Key="LightGrayBox" TargetType="{x:Type Border}">
            <Setter Property="Background" Value="White"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="SnapsToDevicePixels" Value="True"/>
            <Setter Property="BorderBrush" Value="{StaticResource LightGrayColor}" />
        </Style>


        <Style x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition Width="20"/>
                            </Grid.ColumnDefinitions>
                            <Border x:Name="Border" Style="{DynamicResource LightGrayBox}" Grid.ColumnSpan="2" Background="{StaticResource BlueColor}" />
                            <Path x:Name="Arrow" Grid.Column="1" Opacity="0.6" Fill="{StaticResource LightBlueColor}" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 4 4 L 8 0 Z"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="ToggleButton.IsMouseOver" Value="true">
                                <Setter TargetName="Arrow" Property="Opacity" Value="1" />
                                <Setter TargetName="Arrow" Property="Fill" Value="{StaticResource LightBlueColor}" />
                                <Setter TargetName="Border" Property="BorderBrush" Value="{DynamicResource BlueColor}"/>
                            </Trigger>
                            <Trigger Property="ToggleButton.IsChecked" Value="true">
                                <Setter TargetName="Arrow" Property="Opacity" Value="1" />
                                <Setter TargetName="Arrow" Property="Fill" Value="{StaticResource LightBlueColor}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="ComboBoxToggleButtonActive" TargetType="{x:Type ToggleButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition Width="20"/>
                            </Grid.ColumnDefinitions>
                            <Border x:Name="Border" Grid.ColumnSpan="2" Background="{DynamicResource BlueColor}" />
                            <Path x:Name="Arrow" Grid.Column="1" Opacity="1" Fill="{StaticResource LightBlueColor}" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 4 4 L 8 0 Z"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsFocused" Value="true">
                                <Setter TargetName="Border" Property="Background" Value="{DynamicResource BlueColor}" />
                                <Setter TargetName="Border" Property="BorderBrush" Value="White"/>
                                <Setter Property="Foreground" Value="White" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox">
            <Border x:Name="PART_ContentHost" Background="{TemplateBinding Background}" />
        </ControlTemplate>

        <Style x:Key="StandardComboBox" TargetType="{x:Type ComboBox}">
            <Setter Property="Foreground" Value="{StaticResource Foreground}"/>
            <Setter Property="Height" Value="25"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="IsEditable" Value="True" />
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="SnapsToDevicePixels" Value="true"/>
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
            <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
            <Setter Property="VerticalAlignment" Value="Top"/>
            <Setter Property="Width" Value="120"/>
            <Setter Property="IsSelected" Value="{Binding IsKeyboardFocusWithin, RelativeSource={RelativeSource Self}, Mode=OneWay}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ComboBox">
                        <Grid>
                            <ToggleButton Name="ToggleButton" Style="{StaticResource ComboBoxToggleButton}" Grid.Column="2" Focusable="false" ClickMode="Press"
                                      IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" />
                            <Label Name="ContentSite" IsHitTestVisible="False" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                               ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Margin="3,3,23,3" VerticalAlignment="Center" HorizontalAlignment="Left" />
                            <!--<ContentPresenter Name="ContentSite" IsHitTestVisible="False" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" 
                                          ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Margin="3,3,23,3" VerticalAlignment="Center" HorizontalAlignment="Left" />-->
                            <TextBox x:Name="PART_EditableTextBox" 
                                 CaretBrush="{DynamicResource ForegroundWhite}"
                                 Style="{x:Null}" 
                                 Template="{StaticResource ComboBoxTextBox}" 
                                 HorizontalAlignment="Left" 
                                 VerticalAlignment="Center" 
                                 Margin="3,3,23,3" 
                                 Focusable="True" 
                                 Background="Transparent" 
                                 Foreground="{StaticResource ForegroundWhite}" 
                                 Visibility="Hidden"
                                 IsReadOnly="{TemplateBinding IsReadOnly}"/>
                            <Popup VerticalOffset="-1" SnapsToDevicePixels="True" Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True"  Focusable="False" PopupAnimation="Fade">
                                <Grid Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="200">
                                    <Border x:Name="DropDownBorder" Style="{DynamicResource LightGrayBox}"/>
                                    <ScrollViewer 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="20"/>
                            </Trigger>
                            <Trigger Property="IsGrouping" Value="true">
                                <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                            </Trigger>
                            <Trigger Property="IsSelected"  Value="True">
                                <Setter TargetName="ToggleButton" Property="Style" Value="{StaticResource ComboBoxToggleButtonActive}" />
                                <Setter TargetName="ContentSite" Property="Foreground" Value="{DynamicResource ForegroundWhite}"/>
                            </Trigger>
                            <Trigger Property="IsSelected" Value="False">
                                <Setter TargetName="PART_EditableTextBox" Property="Foreground" Value="{DynamicResource Foreground}"/>
                                <Setter TargetName="ContentSite" Property="Foreground" Value="{DynamicResource Foreground}"/>
                            </Trigger>
                            <Trigger Property="IsEditable" Value="true">
                                <Setter Property="IsTabStop" Value="false"/>
                                <Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/>
                                <Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Resources>
                <Style TargetType="ComboBoxItem">
                    <Setter Property="SnapsToDevicePixels" Value="true"/>
                    <Setter Property="OverridesDefaultStyle" Value="true"/>
                    <Setter Property="HorizontalContentAlignment" Value="Left" />
                    <Setter Property="VerticalContentAlignment" Value="Center" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ComboBoxItem">
                                <Border Name="Border" Padding="2" SnapsToDevicePixels="true" BorderThickness="1" Background="{StaticResource BlueColor}">
                                    <ContentPresenter />
                                </Border>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsHighlighted" Value="true">
                                        <Setter TargetName="Border" Property="Background" Value="{DynamicResource BlueColor}"/>
                                        <Setter TargetName="Border" Property="Padding" Value="2,3,2,3" />
                                        <Setter Property="Foreground" Value="White" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>

                </Style>

            </Style.Resources>
        </Style>
    </Window.Resources>


    <Grid>
        <ComboBox Height="23" Margin="122,32,100,0" Style="{StaticResource StandardComboBox}"  Name="comboBox1" VerticalAlignment="Top" IsEditable="True" Text="Settings">
            <ComboBoxItem>
                <ComboBox Style="{StaticResource StandardComboBox}" Name="comboBox2" VerticalAlignment="Top" >

                   <StackPanel Orientation="Horizontal">
                        <Label Content="Logout Time:"></Label>
                        <Label></Label>
                    </StackPanel>
                    <ComboBoxItem Content="10 Min"></ComboBoxItem>
                    <ComboBoxItem Content="20 Min"></ComboBoxItem>
                    <ComboBoxItem Content="30 Min"></ComboBoxItem>
                    <ComboBoxItem Content="40 Min"></ComboBoxItem>
                    <ComboBoxItem Content="50 Min"></ComboBoxItem>
                </ComboBox>
            </ComboBoxItem>
            <ComboBoxItem Content="Logout"></ComboBoxItem>
        </ComboBox>
    </Grid>
</Window>

Sheridan-how to change Data="M 0 0 L 4 4 L 8 0 Z" so that toggle button of combo box points towards right in wpf — NikitaGupta
You need animation or more exactly DoubleAnimation and event triggers. In your style you should be able to override default behavior of your ComboBox to suite your needs. — XAMlMAX
I dont know how to use,please tell me how to include this in my code — NikitaGupta

Sheridan Sheridan · Accepted Answer · 2014-04-03T11:16:43

You will need to define a new ControlTemplate for your ComboBox control. You can find out how to define a new ControlTemplate in the Customizing the Appearance of an Existing Control by Using a ControlTemplate article on MSDN. A good place to start is by implementing the default ControlTemplate and then customising it as you see fit. You can find the default ControlTemplate of the ComboBox in the ComboBox Styles and Templates page on MSDN.

As a start point, find the following controls from the default ControlTemplate in the linked page on MSDN:

<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}" />

The ToggleButton is clearly the Button within the ComboBox control, the ContentSite ContentPresenter is where the selected item is displayed next to the Button and the PART_EditableTextBox TextBox is the editable TextBox used when the control is set to IsEditable="True". If you can write XAML, then you can simply arrange these inner controls to suit your requirements.

UPDATE >>>

In order to rotate a control, the simplest way is to use a RotateTransform... try this:

<Path x:Name="Arrow" Grid.Column="1" HorizontalAlignment="Center" 
    VerticalAlignment="Center" Data="M 0 0 L 4 4 L 8 0 Z" >
    <Path.Fill>
        <SolidColorBrush Color="{DynamicResource GlyphColor}"/>
    </Path.Fill>
    <Path.LayoutTransform>
        <RotateTransform Angle="90" />
    </Path.LayoutTransform>
</Path>

UPDATE 2 (and hopefully last one) >>>

The ComboBox pop up is a Popup control, so to find out how to open it to the right, you need to research how to open a Popup to the right. For that, I'd take a look at the Positioning the Popup section of the Popup Placement Behavior page on MSDN.

Now, please bear in mind that we are not here to do all of your work for you. I feel I have armed you with more than enough information for you to complete your custom ComboBox control. Good luck.

How to create a custom combox button?

2 Answers