Stopbyte

WPF Customized ComboBox Dropdown

Software Development WPF
,
#1

Hi,

Is it possible to modify the ComboBox, Drop Down design in WPF.
In order to show these two buttons:

  1. Delete
    This button should be used to delete the item it belongs to.
  2. Rename
    This button should be used to rename the item it belongs to, once the button is clicked it should select the button and make it editable in the ComboBox editing zone.

Any help would be appreciated.

1 Like
Could Someone Give me Advice on Optimizing a Web Application for Performance and Scalability?
#2

Hi! You can try the following I hope it helps

I changed the ItemContainerStyle, the style of the dropdown item. And ItemTemplate which presents the selected item within the ComboBox

<Window x:Class="MainWindow"
        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"
        mc:Ignorable="d"
        xmlns:local="clr-namespace:ComboBoxCustomizedApp"
        Title="Test App" Width="400" Height="400">

    <Window.Resources>
        <ControlTemplate x:Key="MyDropDownCustomStyle">
            <StackPanel Orientation="Horizontal">
                <!-- Binds directly to the item data, you can change this depending on your data source -->
                <TextBlock Text="{Binding}"></TextBlock>

               <!-- These are the buttons, you can take your time to modify them the way you want,
                     And of course installing the event handlers. -->
               <Button Content="Remove" />
               <Button Content="Rename" />
            </StackPanel>
        </ControlTemplate>
    </Window.Resources>

    <Grid>
        <!-- This is the combobox, we are styling. -->
        <ComboBox x:Name="ComboBox1" Height="24" Margin="10,5" VerticalAlignment="Top" HorizontalAlignment="Stretch">

            <!-- The ItemContainerStlye, is the Style applied to every single Item in the Dropdown. -->
            <ComboBox.ItemContainerStyle>
                <Style TargetType="ComboBoxItem" >
                    <Setter Property="Template"  Value="{StaticResource MyDropDownCustomStyle}"/>
                </Style>
            </ComboBox.ItemContainerStyle>

            <!-- The ItemTemplate, is the template applied to the item selected in the combobox itself. -->
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding}" />
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>
    </Grid>
</Window>
1 Like
#3

Thanks for the great xaml code snippet.
But when I move the mouse over any item it’s not highlighted. is there any solution to that.