Posted by: Zeeshan Amjad | September 30, 2009

Using Custom class in XAML


In previous example we saw how can we create array of string purely in XAML. That approach is not limited to array of string, in fact we can create array of any built in type, such as int, foat, double similarly.

In addition, we can also create an array of our user defined type too. The only difference between using built in type and custom type is that, we have to define our custom type in code file. This is because, we can’t create types in XAML.

Let’s take a look at simple example. We are going to create on simple type to store state information. Our class has only two properties, state name and its capital, but we can make as much properties as we want. Here is a simple C# code to create that type.

  1: public class StateInfo
  2: {
  3:     public String Name
  4:     { get; set; }
  5: 
  6:     public String Capital
  7:     { get; set; }
  8: }
  9: 

Now if we want to  use that class in XAML, then we first have to include the reference of namespace in XAML. Suppose this class is defined in xaml namespace (its name shouldn’t necessary be xaml, it can be anything according to the rule of names in C#). Here is a simple code to use this namespace in XAML.

 

  1: <Window x:Class="xaml.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:collections="clr-namespace:System.Collections;assembly=mscorlib"
  4:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5:     xmlns:sys="clr-namespace:System;assembly=mscorlib"
  6:     xmlns:MyNamespace="clr-namespace:xaml"
  7:     Title="XAML" Height="300" Width="300">
  8: 
  9: </Window>
 10: 

 

Here we give the XML namespace MyNamespace. We use this class to create its array just like we did with string data type. But here we are going to set the value of each properties individually. Here is a simple code to demonstrate this concept.

 

  1: <Window.Resources>
  2: 	<x:Array x:Key="MyList" Type="{x:Type MyNamespace:StateInfo}">
  3: 		<MyNamespace:StateInfo Name="Maryland" Capital="Annapolis"/>
  4: 		<MyNamespace:StateInfo Name="Virginia" Capital="Richmond"/>
  5: 		<MyNamespace:StateInfo Name="Washington" Capital="Olympia"/>
  6: 		<MyNamespace:StateInfo Name="California" Capital="Sacramento"/>
  7: 		<MyNamespace:StateInfo Name="Pennsylvania" Capital="Harrisburg"/>
  8: 		<MyNamespace:StateInfo Name="Arizona" Capital="Phoenix"/>
  9: 	</x:Array>
 10: </Window.Resources>
 11: 

 

Now lets assign this array to the list box items source property. Here is a complete C# code of the program.

 

  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 xaml
 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:     }
 27: 
 28:     public class StateInfo
 29:     {
 30:         public String Name
 31:         { get; set; }
 32: 
 33:         public String Capital
 34:         { get; set; }
 35:     }
 36: }
 37: 

 

And here is XAML file of this.

 

  1: <Window x:Class="xaml.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:collections="clr-namespace:System.Collections;assembly=mscorlib"
  4:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5:     xmlns:sys="clr-namespace:System;assembly=mscorlib"
  6:     xmlns:MyNamespace="clr-namespace:xaml"
  7:     Title="XAML" Height="300" Width="300">
  8:     <Window.Resources>
  9:         <x:Array x:Key="MyList" Type="{x:Type MyNamespace:StateInfo}">
 10:             <MyNamespace:StateInfo Name="Maryland" Capital="Annapolis"/>
 11:             <MyNamespace:StateInfo Name="Virginia" Capital="Richmond"/>
 12:             <MyNamespace:StateInfo Name="Washington" Capital="Olympia"/>
 13:             <MyNamespace:StateInfo Name="California" Capital="Sacramento"/>
 14:             <MyNamespace:StateInfo Name="Pennsylvania" Capital="Harrisburg"/>
 15:             <MyNamespace:StateInfo Name="Arizona" Capital="Phoenix"/>
 16:         </x:Array>
 17:     </Window.Resources>
 18:     
 19:     <Grid>
 20:         <ListBox Name="lst" Margin="5" ItemsSource="{StaticResource MyList}" HorizontalContentAlignment="Stretch">
 21:         </ListBox>
 22:     </Grid>
 23: </Window>
 24: 

 

Here is the output of this program.

 

XAML_02

This is because our class StateInfo is not inherited by UIElement and for every class that is not inherited by UIElement framework calls ToString function. This is a default output of ToString of StateInfo class. If we override the ToString function of StateInfo class then we will see whatever we are retiring from that function.

Suppose we override the ToString function. Here is a simple code of our class with ToString function.

 

  1: public class StateInfo
  2: {
  3:     public String Name
  4:     { get; set; }
  5: 
  6:     public String Capital
  7:     { get; set; }
  8: 
  9:     public override string ToString()
 10:     {
 11:         return "This is my StateInfo class";
 12:     }
 13: }
 14: 

 

If we keep everything same then this will be the output of our program.

 

XAML_03

 

If we want to display the value of our list then we can do it in more than one way. Here is one simple approach to do it with using data template.

 

  1: <Window x:Class="xaml.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:collections="clr-namespace:System.Collections;assembly=mscorlib"
  4:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5:     xmlns:sys="clr-namespace:System;assembly=mscorlib"
  6:     xmlns:MyNamespace="clr-namespace:xaml"
  7:     Title="XAML" Height="300" Width="300">
  8:     <Window.Resources>
  9:         <x:Array x:Key="MyList" Type="{x:Type MyNamespace:StateInfo}">
 10:             <MyNamespace:StateInfo Name="Maryland" Capital="Annapolis"/>
 11:             <MyNamespace:StateInfo Name="Virginia" Capital="Richmond"/>
 12:             <MyNamespace:StateInfo Name="Washington" Capital="Olympia"/>
 13:             <MyNamespace:StateInfo Name="California" Capital="Sacramento"/>
 14:             <MyNamespace:StateInfo Name="Pennsylvania" Capital="Harrisburg"/>
 15:             <MyNamespace:StateInfo Name="Arizona" Capital="Phoenix"/>
 16:         </x:Array>
 17:     </Window.Resources>
 18:     
 19:     <Grid>
 20:         <ListBox Name="lst" Margin="5" ItemsSource="{StaticResource MyList}" HorizontalContentAlignment="Stretch">
 21:             <ListBox.ItemTemplate>
 22:                 <DataTemplate>
 23:                     <Border Margin="5" Background="Wheat">
 24:                         <StackPanel>
 25:                             <TextBlock FontWeight="Bold" Foreground="Navy" Text="{Binding Name}"/>
 26:                             <TextBlock Text="{Binding Capital}"/>
 27:                         </StackPanel>
 28:                     </Border>
 29:                 </DataTemplate>
 30:             </ListBox.ItemTemplate>
 31:         </ListBox>
 32:     </Grid>
 33: </Window>
 34: 

 

Here is the output of this program.

XAML_04

Advertisements

Responses

  1. Nice layout dude! I also love scrollbars

    • Thanks to visit my blog like its layout. It was one of the default lay out 🙂
      Best regards
      Zeeshan Amjad


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: