Articles → WPF → Re Template Export File Combo Box Using Data Template

Re Template Export File Combo Box Using Data Template

In this article I will show you how to re-template "Export File" combo box using data template. After we re-template combo box we will get the following output

Picture showing how the dropdown will look like post retemplate in wpf

Click to Enlarge

In this tutorial I will explain each step along with the code which you can paste in your sample application to see the output.

Step 1 → Add a new file ExportOption.cs in the project and add 2 properties ExportCode and ExportDisplayText in it.

public class ExportOption {
  public string ExportCode {
    get;
    set;
  }

  public string ExportDisplayText {
    get;
    set;
  }
}

Step 2 → Create a property on the main form ExportCollection

public List < ExportOption > ExportCollection {
  get;
  set;
}

As you can see in the above code. This is the collection of type List.

Step 3 → In the Windows load event add export options in the collection

ExportCollection = new List<ExportOption>();

ExportOption option = new ExportOption();
option.ExportCode = "WORD";
option.ExportDisplayText = "Export to Word";
ExportCollection.Add(option);

option = new ExportOption();
option.ExportCode = "EXCEL";
option.ExportDisplayText = "Export to Excel";
ExportCollection.Add(option);

option = new ExportOption();
option.ExportCode = "PDF";
option.ExportDisplayText = "Export to PDF";
ExportCollection.Add(option);

ExportComboBox.ItemsSource = ExportCollection;

In the above code I have created an instance of ExportOption class and add it in the ExportCollection.

Step 4 → Add a combo box in the XAML file

<ComboBox x:Name="ExportComboBox" DataContext="{Binding}" Width="200" Height="25"                           
   SelectedValuePath="ExportCode" ItemTemplate="{StaticResource MyTemplate}">

Step 5 → Create the data template

<DataTemplate x:Key="MyTemplate">
	<Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="50"/>
			<ColumnDefinition Width="Auto"/>
		</Grid.ColumnDefinitions>
		<Image x:Name="MyImage" Width="14" Height="15"></Image>
		<TextBlock x:Name="MyTextblock" Grid.Column="1" Text="{Binding ExportDisplayText}"></TextBlock>
	</Grid>
	<DataTemplate.Triggers>
		<DataTrigger Binding="{Binding ExportCode}" Value="WORD">
			<Setter Property="Source" Value="Images/Word.png" TargetName="MyImage"></Setter>
		</DataTrigger>
		<DataTrigger Binding="{Binding ExportCode}" Value="EXCEL">
			<Setter Property="Source" Value="Images\Excel.png" TargetName="MyImage"></Setter>
		</DataTrigger>
		<DataTrigger Binding="{Binding ExportCode}" Value="PDF">
			<Setter Property="Source" Value="Images\PDF.png" TargetName="MyImage"></Setter>
		</DataTrigger>
	</DataTemplate.Triggers>
</DataTemplate>

In the above data template I have created a grid and inside the grid I have created an image control and a textblock. In the combo box the value part is ExportCode and display part is ExportDisplayText. So I have applied DataTrigger based on the value of ExportCode. If the ExportCode is WORD then set the source of Image as Word.png and so on. Now run the program. If you run the program you will get the out as shown in the figure above.

Step 6 → Create a folder called Images and add three images Word.png, Excel.png and PDF.png in it.

Step 7 → Change the "Build Action" of each image as "Resource".

Picture showing changing the build action of an image to Resource

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Tuesday, April 5, 2011

Updated On -	Wednesday, August 10, 2022

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**