WindowsPhone : Instantiating a Custom Object as a resource in XAML, Beginners Tutorials (C#-XAML)

Introduction:

Fortunately in xaml, we can create elements that come from the standard Silverlight and XAML namespaces. And also we can create objects that are instances of our own custom classes, or standard .NET classes in other namespaces. However in this article i am going to explain about 'How to create objects for our custom classes from xaml?".

Requirements:

• This sample is targeted on windowsphone 7.1 OS

Description:

Step 1:

• Open Visual Studio and create new project name (Ex: "CsharpObjectvsXaml")

Step 2:

 Open MainPage.xaml.cs file and create your own class as mentioned below.

1. namespace CsharpObjectvsXaml  
2. {  
3.     public partial class MainPage : PhoneApplicationPage  
4.     {  
5.         // Constructor  
6.         public MainPage()  
7.         {  
8.             InitializeComponent();  
9.         }  
10.     }  
11.     //Custom Class  
12.     public class Blog  
13.     {  
14.         private string str_name;  
15.         public string Name  
16.         {  
17.             get  
18.             {  
19.                 return str_name;  
20.             }  
21.             set  
22.             {  
23.                 str_name = value;  
24.             }  
25.         }  
26.   
27.     }  
28. }  

Step 3:

Now start by including a new namespace attribute, to indicate the namespace and assembly where your class can be found.  In the following example, we set up the :MyCustomObject prefix as pointing to the namespace 'CsharpObjectvsXaml'. It can be xmlns:local or xmln:src or any other word followed by xmlns:. But we have to use the same identifier(MyCustomObject or local or src) when we refer (or when want to use) the namespace.

1. xmlns:MyCustomObject="clr-namespace:CsharpObjectvsXaml"  

To use the classes in the above namespace, we need to create an object of the class we are interested in as shown below. Ex, Blog class

1. <Grid.Resources>  
2.            <MyCustomObject:Blog x:Key="BlogClassObject" Name="SubramanyamRaju_WindowsPhone_Blog"/>  
3. </Grid.Resources> 

Once the object of the 'Blog' class is instantiated, you can use it as a source during binding operation to bind to some UI element as shown below.

1. <TextBlock Text="{Binding Source={StaticResource BlogClassObject}, Path=Name}" />  

The complete code in MainPage.xaml page is like below:

1. <phone:PhoneApplicationPage   
2.     x:Class="CsharpObjectvsXaml.MainPage"  
3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
5.     xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"  
6.     xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"  
7.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
8.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
9.     mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"  
10.     FontFamily="{StaticResource PhoneFontFamilyNormal}"  
11.     FontSize="{StaticResource PhoneFontSizeNormal}"  
12.     Foreground="{StaticResource PhoneForegroundBrush}"  
13.     SupportedOrientations="Portrait" Orientation="Portrait"  
14.     shell:SystemTray.IsVisible="True"  
15.     xmlns:MyCustomObject="clr-namespace:CsharpObjectvsXaml">  
16.   
17.     <!--LayoutRoot is the root grid where all page content is placed-->  
18.     <Grid x:Name="LayoutRoot" Background="Transparent">  
19.         <Grid.Resources>  
20.             <MyCustomObject:Blog x:Key="BlogClassObject" Name="SubramanyamRaju_WindowsPhone_Blog"/>  
21.         </Grid.Resources>  
22.         <Grid.RowDefinitions>  
23.             <RowDefinition Height="Auto"/>  
24.             <RowDefinition Height="*"/>  
25.         </Grid.RowDefinitions>  
26.         <!--TitlePanel contains the name of the application and page title-->  
27.         <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="0,17,0,28">  
28.             <TextBlock x:Name="ApplicationTitle" FontSize="28" Text="Creating Custom Object in xaml :" Style="{StaticResource PhoneTextNormalStyle}"/>  
29.         </StackPanel>  
30.   
31.         <!--ContentPanel - place additional content here-->  
32.         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">  
33.             <StackPanel>  
34.             <TextBlock  Text="Blog Name:"/>  
35.             <TextBlock Text="{Binding Source={StaticResource BlogClassObject}, Path=Name}" />  
36.             </StackPanel>  
37.         </Grid>  
38.     </Grid>  
39.    
40. </phone:PhoneApplicationPage>  

Step 4:

Press 'F5' to run the sample and screen will be like this.

I thought you don't need sample source code, because i already provided necessary code in this post.

FeedBack Note:

Please share your thoughts,what you think about this post,Is this post really helpful for you?I always welcome if you drop comments on this post and it would be impressive.

Follow me always at  @Subramanyam_B 

Have a nice day by Subramanyam Raju :)