Posted by: Zeeshan Amjad | November 18, 2009

Apply style to list view items


We already applied the data template to the header item, but the content of the list view is still very boring. Now we are going to apply some style to the list view items. Here we are going to define style in windows resource section of the  XAML and then use the StaticResource markup extension to use that style.

  1: <Window.Resources>
  2: 	<Style x:Key="myStyle" TargetType="{x:Type ListViewItem}">
  3: 		<Setter Property="Background" Value="AliceBlue"/>
  4: 		<Setter Property="FontSize" Value="14"/>
  5: 		<Setter Property="Foreground" Value="Green"/>
  6: 	</Style>
  7: </Window.Resources>
  8: 

We select “myStyle” name of our style and apply it on all ListViewItems. In this style, we are changing three properties of ListViewItem. We are changing its font size, foreground color and its background color.

After that we apply those changes in ItemContainerStyle property of ListView which has a style type.

  1: <ListView ItemContainerStyle="{StaticResource myStyle}" 
  2: 		  Name="list" Margin="5" HorizontalContentAlignment="Stretch">
  3: 

Here is a complete XAML code of this project.

  1: <Window x:Class="UIElement.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     xmlns:local="clr-namespace:UIElement"
  5:     Title="ListView Example" Height="300" Width="400">
  6:     <Window.Resources>
  7:         <Style x:Key="myStyle" TargetType="{x:Type ListViewItem}">
  8:             <Setter Property="Background" Value="AliceBlue"/>
  9:             <Setter Property="FontSize" Value="14"/>
 10:             <Setter Property="Foreground" Value="Green"/>
 11:         </Style>
 12:     </Window.Resources>
 13: 
 14:     <Grid>        
 15:         <ListView ItemContainerStyle="{StaticResource myStyle}" 
 16:                   Name="list" Margin="5" HorizontalContentAlignment="Stretch">
 17:             <ListView.View>                
 18:                 <GridView>
 19:                     <GridView.ColumnHeaderTemplate>
 20:                         <DataTemplate>
 21:                             <Border BorderBrush="Brown" BorderThickness="2" CornerRadius="5">
 22:                                 <Border.Background>
 23:                                     <LinearGradientBrush>
 24:                                         <GradientStop Offset="0" Color="Wheat"/>
 25:                                         <GradientStop Offset="1" Color="LightCoral"/>
 26:                                     </LinearGradientBrush>
 27:                                 </Border.Background>
 28:                                 <TextBlock Foreground="Blue" FontSize="14" FontWeight="Bold" Margin="5" Text="{Binding}" Width="Auto"/>    
 29:                             </Border>                            
 30:                         </DataTemplate>
 31:                     </GridView.ColumnHeaderTemplate>
 32:                     
 33:                     <GridViewColumn Width="Auto" Header="State Name" DisplayMemberBinding="{Binding Path=Name}">
 34:                         <GridViewColumn.CellTemplate>
 35:                             <DataTemplate>
 36:                                 <Border BorderBrush="Blue" BorderThickness="2">
 37:                                     <TextBlock Foreground="Blue" Text="{Binding}"/>
 38:                                 </Border>
 39:                             </DataTemplate>
 40:                         </GridViewColumn.CellTemplate>
 41:                     </GridViewColumn>
 42:                     <GridViewColumn Width="Auto" Header="State Capital" DisplayMemberBinding="{Binding Path=Capital}"/>
 43:                     <GridViewColumn Width="Auto" Header="State Nick Name" DisplayMemberBinding="{Binding Path=NickName}"/>
 44:                 </GridView>
 45:             </ListView.View>
 46:         </ListView>
 47:     </Grid>
 48: </Window>
 49: 

Its C# code is same as previous project. Here is complete C# coding of this project.

  1: using System;
  2: using System.Collections.Generic;
  3: using System.Linq;
  4: using System.Text;
  5: using System.Windows;
  6: using System.Windows.Controls;
  7: using System.Windows.Data;
  8: using System.Windows.Documents;
  9: using System.Windows.Input;
 10: using System.Windows.Media;
 11: using System.Windows.Media.Imaging;
 12: using System.Windows.Navigation;
 13: using System.Windows.Shapes;
 14: 
 15: namespace UIElement
 16: {
 17:     /// <summary>
 18:     /// Interaction logic for Window1.xaml
 19:     /// </summary>
 20:     public partial class Window1 : Window
 21:     {
 22:         public Window1()
 23:         {            
 24:             InitializeComponent();
 25: 
 26:             List<StateInfo> statesList = new List<StateInfo>();
 27: 
 28:             statesList.Add(new StateInfo("Maryland", "Annapolis", "Old Line State", "Eastern"));
 29:             statesList.Add(new StateInfo("California", "Sacramento", "Golden State", "Pacific"));
 30:             statesList.Add(new StateInfo("Washington", "Olympia", "Ever Green State", "Pacific"));
 31:             statesList.Add(new StateInfo("Taxes", "Austin", "Lone Star State", "Central"));
 32:             statesList.Add(new StateInfo("New York", "Albany", "Empire State", "Eastern"));
 33: 
 34:             list.ItemsSource = statesList;
 35:         }
 36:     }
 37: 
 38:     public class StateInfo
 39:     {
 40:         public StateInfo()
 41:         {
 42:         }
 43: 
 44:         public StateInfo(String name, String capital, String nickName, String timeZone)
 45:         {
 46:             Name = name;
 47:             Capital = capital;
 48:             NickName = nickName;
 49:             TimeZone = timeZone;
 50:         }
 51: 
 52:         public String Name
 53:         { get; set; }
 54: 
 55:         public String Capital
 56:         { get; set; }
 57: 
 58:         public String NickName
 59:         { get; set; }
 60: 
 61:         public String TimeZone
 62:         { get; set; }
 63:     }
 64: }
 65: 

Here is the output of this program.

ListViewOutput_04

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: