Click here to Skip to main content
12,500,915 members (55,478 online)
Click here to Skip to main content
Add your own
alternative version

Stats

20.1K views
189 downloads
5 bookmarked
Posted

Displaying Multiple Property Values In WPF Combo by using DataTemplate, Style & Triggers

, 26 May 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
A way to display Multiple Property Values in WPF Combo by using DataTemplate, Style & Triggers

Introduction

Recently, I came across a situation where I needed to populate a combobox with multiple properties that had been exposed from the entity model class. Here I am giving a simple demo of doing the same.

A Few Key Concepts

Before proceeding with the code explanation or how to achieve the solution for such kind of problems, I thought of covering some key concepts by which we can not only solve these kinds of issues, but also some other kinds of problems of the same pattern.

Style

This is used to give a common look and feel to controls. The basic syntax for creating a style is as under:

<Style x:Key=Akeyname TargetType={x:Type Control Type}>
    <Setter Property=APropertyName Value=PropertyValue></Setter>
</Style>

Consume the style from any control in the following manner:

<Label Name =lbl Style={StaticResource Akeyname}>

Data Template

A template can be compared to a container that can be used to hold a volume of data. That means, we can use other controls inside a datatemplate for holding the data.
The basic syntax for doing this is as follows:

<DataTemplate x:Key=CompanyLocationTemplate>
 <Label Name=lbl Content={Binding Path=PropertyName}></Label>
</DataTemplate>

Triggers

It can be considered as a substitute for an if else statement. Let’s look at a simple example. Suppose I have a button. I want to change the color of the same upon mouseover and mouse out. If I would have to achieve the same using programming, I would have written some pseudo code like this:

If  Button.IsFocus 
	Button. Foreground = Red
Else
	Button. Background = Green;

Using a trigger, the same can be achieved like this: 

<datatemplate.triggers>     
<datatrigger property="”" value="”True"> 
<setter targetname="button" property="Foreground " value="Red" /> 
<setter targetname="button" property="Background" value="Green" />   
</datatrigger> 
</datatemplate.triggers>

Straight to the Program

Objective

My objective is to combine the various properties exposed from my Location Entity viz. CompanyName, County, State, City along with some customized decoration and display the same into the combo box. I am following the Model-View-View Model design pattern. I have a location entity whose class diagram is as under:

LocationEntity.jpg

The Model 

The Model describes the datasource which in my case is the following:

private void LocationData()
       {
           _location.Add(new Location { LocationId = 1,CompanyName = "Microsoft", 
		Country = "India", State = "Karnataka", City = "Bangalore" });
           _location.Add(new Location { LocationId = 2, CompanyName = "Oracle", 
		Country = "USA", State = "North Carolina", City = "Midland" });
           _location.Add(new Location { LocationId = 3, 
		CompanyName = "Sun Micro Systems", Country = "India", 
		State = "Maharashtra", City = "Bombay" });
           _location.Add(new Location { LocationId = 4, 
		CompanyName = "Robert Bosch", Country = "USA", 
		State = "Tennessee", City = "Grand Prairie" });
           _location.Add(new Location { LocationId = 5, 
		CompanyName = "IBM", Country = "India", 
		State = "West Bengal", City = "Calcutta" });
           _location.Add(new Location { LocationId = 6, 
		CompanyName = "Google", Country = "USA", 
		State = "Ohio", City = "El Paso" });
       }

Model-View

My CompanyViewModel class has exposed an ObservableCollection of type Location called CompanyLocations which holds all the data from the Location entity via a method called LocationList():

CompanyLocations = new ObservableCollection<location />(_objDataSource.LocationList());

View

The entire source or the datacontext of my view is the CompanyViewModel:

//The source(i.e. Datacontext) will be the entire CompanyViewModel
        private void SourceContext()
        {
            this.DataContext = _objViewModel;
        }

And the Location data is loaded in the Window Load event:

private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            _objViewModel = new CompanyViewModel();
            SourceContext();
            _objViewModel.LoadData();           
        }

Coming to the XAML Part

I have a ComboBox defined inside a StackPanel whose ItemSource is the CompanyLocations (remember the property that I exposed in the ViewModel for getting all the Location Entity data) and an ItemTemplate by the name CompanyLocationTemplate:

<ComboBox Height="21" Margin="27,27,30,0" Name="cmbDiplayInformation" 
	VerticalAlignment="top" ItemsSource="{Binding CompanyLocations}" 
	ItemTemplate="{StaticResource CompanyLocationTemplate}"/>

The CompanyLocationTemplate is defined as under:

<DataTemplate x:Key="CompanyLocationTemplate">>

And lastly, the styles are as follows:

<Style x:Key="LabelValues" TargetType="{x:Type Label}">
	<Setter Property="Foreground" Value="Red"></Setter>
	<Setter Property="Background" Value="Yellow"></Setter>
</Style>
<Style x:Key="DataValues" TargetType="{x:Type Label}">
	<Setter Property="Foreground" Value="Black"></Setter>
	<Setter Property="Background" Value="Cyan"></Setter>
</Style>

Output

Company Name: COMPANYNAME is situated in: COUNTRY, in the state: STATE, whose city is: CITY.

The bold, capitalized words are the properties of the Location Entities.

Conclusion

This is only a small example of how to combine the datatemplate, style and triggers of WPF so that we can get an elegant solution with minimal code.

History

  • 27th May, 2009: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author


You may also be interested in...

Pro
Pro

Comments and Discussions

 
GeneralCompanyLocationTemplate not shown Pin
Colin Eberhardt27-May-09 5:51
memberColin Eberhardt27-May-09 5:51 
GeneralRe: CompanyLocationTemplate not shown Pin
Niladri_Biswas27-May-09 5:57
memberNiladri_Biswas27-May-09 5:57 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160919.1 | Last Updated 27 May 2009
Article Copyright 2009 by Niladri_Biswas
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid