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 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 combobox into the auto generated page named ‘MainWindow.xaml’ which will have

• 2 combo box item 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 tempelate.
  

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

  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.