Bind ListBoxItem to XAML snippet

3 replies. Latest Post by Allen Chen – MSFT on September 8, 2008.

(0)

Member

5 points

Bind ListBoxItem to XAML snippet

09-06-2008 1:56 AM |

I have a collection of objects that have a property that contains a snippet of XAML. Is it possible to bind a ListBox to that collection so that the XAML is rendered in the ListBoxItems?

Thanks

BoloRamji

Member

338 points

49 Posts

Re: Bind ListBoxItem to XAML snippet

09-08-2008 1:08 AM |

Please bear with me if I have not understood your problem. There may be other solutions possible and I have enclosed my solution below:

Here is the main page ( Page.xaml)

<UserControl x:Class="Forum.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="clr-namespace:Forum"

Width="900" Height="900">

<ListBox Height="900" Width="900"

x:Name="myImageList" >

<ListBox.ItemTemplate>

<local:MyControl MyData="{Binding XAML}"></local:MyControl>

</StackPanel>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

</Grid>

</UserControl>

Page.xaml.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Collections.ObjectModel;

namespace Forum

{

public partial class Page : UserControl

{

List<MyObject> mObjectList = new List<MyObject>();public Page()

{

AddObjectWithXAML();

InitializeComponent();

myImageList.ItemsSource = mObjectList;

}

void AddObjectWithXAML()

{

String RectXAML = "<ControlTemplate xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\"" +

" xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\" >" ;

RectXAML += "<Rectangle Canvas.Left=\"12\" Canvas.Top=\"17\" Width=\"10\" Height=\"10\" Fill=\"Black\"></Rectangle>";RectXAML += "</ControlTemplate>";

MyObject pObject1 = new MyObject(RectXAML);

mObjectList.Add(pObject1);

String EllipseXAML = "<ControlTemplate xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\"" +

" xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\" >" ;

EllipseXAML += "<Ellipse Canvas.Left=\"12\" Canvas.Top=\"17\" Width=\"10\" Height=\"10\" Fill=\"Red\"></Ellipse>";

EllipseXAML += "</ControlTemplate>";

MyObject pObject2 = new MyObject(EllipseXAML);

mObjectList.Add(pObject2);

}

public class MyObject

{

public string XAML { get; set; }public MyObject(String szXAML)

{

XAML = szXAML;

}

In the above code, MyObject is your whateverObject with XAMLSnippet member ( XAML) and

List<MyObject> mObjectList = new List<MyObject>();

You can replace the above two classes and following two lines with the ObjectList you have.

AddObjectWithXAML();

myImageList.ItemsSource = mObjectList;

Now, the custom control which takes care of drawing the elements in a separate file MyControl.cs

using System;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Windows.Markup;

namespace Forum

{

public class MyControl : Control

{

public static readonly DependencyProperty MyDataProperty = DependencyProperty.Register("MyData", typeof(String), typeof(MyControl), new PropertyMetadata(OnDependencyPropertyChanged));private static void OnDependencyPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)

{

MyControl source = d as MyControl;

source.PerformLayout(e.NewValue.ToString());

}

private void PerformLayout(String szXML )

{

ControlTemplate template = (ControlTemplate)XamlReader.Load(szXML);this.Template = template;

}

Important thing here to note in the DependencyProperty which I have defined for MyData which is linked to XAML data of the MyObject which is refered in Page.XAML. Beuatiful thing about this DependencyProperty is you can do any element rendering as it is assigned ( I am using the NewValue member to draw the element above).

You can replace the MyObject with your object that contain your info.

Hope that helps.

BoloRamji

Member

338 points

49 Posts

Re: Bind ListBoxItem to XAML snippet

09-08-2008 1:08 AM |

Please bear with me if I have not understood your problem. There may be other solutions possible and I have enclosed my solution below:

Here is the main page ( Page.xaml)

<UserControl x:Class="Forum.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="clr-namespace:Forum"

Width="900" Height="900">

<ListBox Height="900" Width="900"

x:Name="myImageList" >

<ListBox.ItemTemplate>

<local:MyControl MyData="{Binding XAML}"></local:MyControl>

</StackPanel>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

</Grid>

</UserControl>

Page.xaml.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Collections.ObjectModel;

namespace Forum

{

public partial class Page : UserControl

{

List<MyObject> mObjectList = new List<MyObject>();public Page()

{

AddObjectWithXAML();

InitializeComponent();

myImageList.ItemsSource = mObjectList;

}

void AddObjectWithXAML()

{

String RectXAML = "<ControlTemplate xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\"" +

" xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\" >" ;

RectXAML += "<Rectangle Canvas.Left=\"12\" Canvas.Top=\"17\" Width=\"10\" Height=\"10\" Fill=\"Black\"></Rectangle>";RectXAML += "</ControlTemplate>";

MyObject pObject1 = new MyObject(RectXAML);

mObjectList.Add(pObject1);

String EllipseXAML = "<ControlTemplate xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\"" +

" xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\" >" ;

EllipseXAML += "<Ellipse Canvas.Left=\"12\" Canvas.Top=\"17\" Width=\"10\" Height=\"10\" Fill=\"Red\"></Ellipse>";

EllipseXAML += "</ControlTemplate>";

MyObject pObject2 = new MyObject(EllipseXAML);

mObjectList.Add(pObject2);

}

public class MyObject

{

public string XAML { get; set; }public MyObject(String szXAML)

{

XAML = szXAML;

}

In the above code, MyObject is your whateverObject with XAMLSnippet member ( XAML) and

List<MyObject> mObjectList = new List<MyObject>();

You can replace the above two classes and following two lines with the ObjectList you have.

AddObjectWithXAML();

myImageList.ItemsSource = mObjectList;

Now, the custom control which takes care of drawing the elements in a separate file MyControl.cs

using System;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Windows.Markup;

namespace Forum

{

public class MyControl : Control

{

MyControl source = d as MyControl;

source.PerformLayout(e.NewValue.ToString());

}

private void PerformLayout(String szXML )

{

ControlTemplate template = (ControlTemplate)XamlReader.Load(szXML);this.Template = template;

}

You can replace the MyObject with your object that contain your info.

Hope that helps.

Allen Ch...

Star

13862 points

1,803 Posts

Re: Bind ListBoxItem to XAML snippet

09-08-2008 5:41 AM |

Please try this:

public partial class Page : UserControl
    {
        List<string> array = new List<string>();
        public Page()
        {
            InitializeComponent();
            string textbox = @"<TextBox xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'
    xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' Text='Hello'/>";
            string textblock = @"<TextBlock xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'
    xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' Text='World'/>";
            array.Add(textbox);
            array.Add(textblock);
            this.ListBox1.ItemsSource = array;
        }

        private void StackPanel_Loaded(object sender, RoutedEventArgs e)
        {
            StackPanel sp = (StackPanel)sender;
            sp.Children.Add((UIElement)XamlReader.Load(sp.DataContext.ToString()));
        }

}

Sincerely,
Allen Chen
Microsoft Online Community Support

Please remember to mark the replies as answers if they help and unmark them if they provide no help.