Add Text With Image Button In ComboBox In WPF Application

Sometimes clients want some different functionality, such as where you have multiple options with different information and actions.

So now I will show you a demo about how can you achieve this in the WPF application very easily.

Note. In this article, I am using Visual Studio 2015.

Step 1. Create a project named ‘WpfTestApplication’ of the WPF application.

Step 2. It’s a better approach to create the folder named ‘Images in the project to store the style files.

Step 3. Add an image named ‘info.png’ in the Images folder.

Step 4. Add the combo box into the auto-generated page named ‘MainWindow.xaml’ which will have

• 2 combo box items for 2 values
• Each combo box item stores a wrap panel
• Each wrap panel stores a text block and a button
• Each button stores an image in its own template.

<ComboBox Width="100" Height="35">
    <ComboBoxItem IsSelected="True">
        <WrapPanel>
            <TextBlock Text="Item 1 " VerticalAlignment="Center" />
            <Button Width="30" Height="30">
                <Button.Template>
                    <ControlTemplate>
                        <Image Height="25" Source="/WpfTestApplication;component/Images/info.png"></Image>
                    </ControlTemplate>
                </Button.Template>
            </Button>
        </WrapPanel>
    </ComboBoxItem>
    <ComboBoxItem>
        <WrapPanel>
            <TextBlock Text="Item 2 " VerticalAlignment="Center" />
            <Button Width="30" Height="30">
                <Button.Template>
                    <ControlTemplate>
                        <Image Height="25" Source="/WpfTestApplication;component/Images/info.png"></Image>
                    </ControlTemplate>
                </Button.Template>
            </Button>
        </WrapPanel>
    </ComboBoxItem>
</ComboBox>

XML

Copy

Note. You can also create an event on each button to perform some action.

Step 5. When I run the page, it will look like this.