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.
    1. <ComboBox Width="100" Height="35">  
    2. <ComboBoxItem IsSelected="True" >  
    3. <WrapPanel>  
    4. <TextBlock Text="Item 1 " VerticalAlignment="Center" />  
    5. <Button Width="30" Height="30" >  
    6. <Button.Template>  
    7. <ControlTemplate>  
    8. <Image Height="25" Source="/WpfTestApplication;component/Images/info.png"></Image>  
    9. </ControlTemplate>  
    10. </Button.Template>  
    11. </Button>  
    12. </WrapPanel>  
    13. </ComboBoxItem>  
    14. <ComboBoxItem >  
    15. <WrapPanel>  
    16. <TextBlock Text="Item 2 " VerticalAlignment="Center" />  
    17. <Button Width="30" Height="30" >  
    18. <Button.Template>  
    19. <ControlTemplate>  
    20. <Image Height="25" Source="/WpfTestApplication;component/Images/info.png"></Image>  
    21. </ControlTemplate>  
    22. </Button.Template>  
    23. </Button>  
    24. </WrapPanel>  
    25. </ComboBoxItem>  
    26. </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.


Up Next
    Ebook Download
    View all
    View all