Posted by: Zeeshan Amjad | June 7, 2010

Using path with ListBoxItem Control Template


We saw the example of using path in tab item control template here. Now we are going to do the same thing, but with list box item. Most of our XAML code will be same except few changes. Our first change will be TargetType. Now we change our target type to ListBoxItem.

<ControlTemplate TargetType="{x:Type ListBoxItem}">

The other most important change is when defining the ContentPresenter. In case of tab control, we define the content source as a header, because we want to display the text as a tab item header. But in case of list box, we leave that thing. Here is XAML code to define the content presenter.

<ContentPresenter Grid.Column="1" VerticalAlignment="Center"/>

And of course use the list box instead of tab control. Here is complete XAML code of the program.

<Window x:Class="WpfPath.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Path" Height="300" Width="400">
    <Window.Resources>
        <Style TargetType="ListBoxItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Grid Name="grid" Margin="3" Background="Beige">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            
                            <Border Grid.Column="1" Margin="2">
                                <ContentPresenter Grid.Column="1" VerticalAlignment="Center"/>
                            </Border>                            
                            
                            <Path Grid.Column="0"
					              Margin="2"
					              Fill="Red"
					              HorizontalAlignment="Center"
					              VerticalAlignment="Center"
					              Data="M 15,0 L 0,15 L 15,30 L 10,15 Z"/>
                            <Path Grid.Column="2"
					              Margin="2"
					              Fill="Blue"
					              HorizontalAlignment="Center"
					              VerticalAlignment="Center"
					              Data="M 15,0 L 30,15 L 15,30 L 20, 15 Z"/>
                        </Grid>

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="grid" Property="Background" Value="Wheat" />
                            </Trigger>
                            <Trigger Property="IsSelected" Value="False">
                                <Setter TargetName="grid" Property="Background" Value="Beige" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <ListBox Margin="5" ItemsSource="{Binding}">
    </ListBox>
</Window>

In C# code we just define one list of string (in fact observable collection of string) and assign it to the window data context property. Here is complete C# code of the program.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;

namespace WpfPath
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        private ObservableCollection<String> states = new ObservableCollection<string>();
        public Window1()
        {
            InitializeComponent();

            states.Add("Maryland");
            states.Add("California");
            states.Add("Virginia");
            states.Add("Washington");
            states.Add("Ohio");
            states.Add("Nevada");

            DataContext = states;
        }
    }
}

Here is the output of the program.

PathInListBoxItem

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: