My VisualTreeHelper search the visual tree

1 03 2010

VisualTreeHelper class is very useful so far i found.

The VisualTreeHelper type exposes the foure members.

Check here:

http://msdn.microsoft.com/en-us/library/system.windows.media.visualtreehelper_members%28VS.95%29.aspx

We could use VisualTreeHelper and write another two method which i found very useful like below:

SearchFrameworkElement – Get the child FrameworkElement with a given name from the visual tree of a parent FrameworkElement.

GetAllChildFrameworkElement – Get All Child FrameworkElement of given FrameworkElement

Source Code below:

public class MyVisualTreeHelper
{
    /// <summary>
    /// Get the child FrameworkElement with a given name
    /// from the visual tree of a parent FrameworkElement.
    /// </summary>
    /// <param name="parentFrameworkElement">Parent FrameworkElement</param>
    /// <param name="childFrameworkElementNameToSearch">Child FrameworkElement name</param>
    /// <returns>Child FrameworkElement with a given name</returns>
    public static FrameworkElement SearchFrameworkElement(FrameworkElement parentFrameworkElement, string childFrameworkElementNameToSearch)
    {
        FrameworkElement childFrameworkElementFound = null;
        SearchFrameworkElement(parentFrameworkElement, ref childFrameworkElementFound, childFrameworkElementNameToSearch);
        return childFrameworkElementFound;
    }
    /// <summary>
    /// Get All Child FrameworkElement of given FrameworkElement
    ///</summary>
    /// <param name="parentElement">Parent FrameworkElement whose child FrameworkElement's will be searched</param>
    /// <returns>List of Child FrameworkElement</returns>
    public static List<FrameworkElement> GetAllChildFrameworkElement(FrameworkElement parentElement)
    {
        List<FrameworkElement> childFrameworkElementFound = new List<FrameworkElement>();
        SearchAllChildFrameworkElement(parentElement, childFrameworkElementFound);
        return childFrameworkElementFound;
    }
    //SearchFrameworkElement helper
    private static void SearchFrameworkElement(FrameworkElement parentFrameworkElement, ref FrameworkElement childFrameworkElementToFind, string childFrameworkElementName)
    {
        int childrenCount = VisualTreeHelper.GetChildrenCount(parentFrameworkElement);
        if (childrenCount > 0)
        {
            FrameworkElement childFrameworkElement = null;
            for (int i = 0; i < childrenCount; i++)
            {
                childFrameworkElement = (FrameworkElement)VisualTreeHelper.GetChild(parentFrameworkElement, i);
                if (childFrameworkElement != null && childFrameworkElement.Name.Equals(childFrameworkElementName))
                {
                    childFrameworkElementToFind = childFrameworkElement;
                    return;
                }
                SearchFrameworkElement(childFrameworkElement, ref childFrameworkElementToFind, childFrameworkElementName);
            }
        }
    }
    //GetAllChildFrameworkElement helper
    private static void SearchAllChildFrameworkElement(FrameworkElement parentFrameworkElement, List<FrameworkElement> allChildFrameworkElement)
    {
        int childrenCount = VisualTreeHelper.GetChildrenCount(parentFrameworkElement);
        if (childrenCount > 0)
        {
            for (int i = 0; i < childrenCount; i++)
            {
                FrameworkElement childFrameworkElement = (FrameworkElement)VisualTreeHelper.GetChild(parentFrameworkElement, i);
                allChildFrameworkElement.Add(childFrameworkElement);
                SearchAllChildFrameworkElement(childFrameworkElement, allChildFrameworkElement);
            }
        }
    }
}
Advertisements




XML to TreeView HierarchicalDataTemplate in Silverlight3 toolkit

28 02 2010

XML:

<?xml version="1.0" encoding="utf-8"?>
<Composite>
  <Folder Name="1">
    <Folder Name="1.1">
      <Folder Name="1.1.1">
        <Folder Name="1.1.1.1">
          <File Name="file1"></File>
        </Folder >
      </Folder >
    </Folder >
  </Folder>
  <Folder Name="f2">
    <Folder Name="f2">
      <File Name="file21"></File>
      <File Name="file22"></File>
    </Folder>
  </Folder>
  <Folder Name="f">
    <File Name="file31"></File>
    <File Name="file32"></File>
  </Folder>
</Composite>

First define your data structure.

Load the the structure from XML. You need recursion to load the folders.

In the Silverlight application:

1. Use Silverlight Toolkit TreeView control

2. Define HierarchicalDataTemplate

3. Set the item source

Check the sample below :

    <!--xmlns:common="clr-namespace:System.Windows;assembly=System.Windows.Controls"-->
    <Grid x:Name="LayoutRoot"
          Background="White">
        <Grid.Resources>
            <common:HierarchicalDataTemplate x:Key="NodeTemplate"
                                             ItemsSource="{Binding Folders}">
                <Grid Width="Auto">
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <TextBlock Text="{Binding Name}">
                    </TextBlock>
                    <ListBox Grid.Row="1"
                             ItemsSource="{Binding FileNames}"></ListBox>
                </Grid>
            </common:HierarchicalDataTemplate>
        </Grid.Resources>

        <controls:TreeView x:Name="tvFolders"
                           BorderThickness="0"
                           ItemTemplate="{StaticResource NodeTemplate}">
        </controls:TreeView>

    </Grid>
    public partial class TreeViewSample : UserControl
    {
        public TreeViewSample()
        {
            InitializeComponent();

            tvFolders.ItemsSource = this.LoadFromXML();

        }

        public List<Folder> LoadFromXML()
        {
            XElement elementLoaded = XElement.Load("XMLFile1.xml");
            List<Folder> folders = new List<Folder>();
            this.LoadFolders(elementLoaded.Elements("Folder").ToList(), folders);

            return folders;
        }

        public void LoadFolders(List<XElement> elmFolders, List<Folder> folders)
        {
            foreach (var item in elmFolders)
            {
                var folder = new Folder
                {
                    Name = item.Attribute("Name").Value,
                    Folders = new List<Folder>(),
                    FileNames = item.Elements("File").Select(s => s.Attribute("Name").Value).ToList()
                };
                folders.Add(folder);
                this.LoadFolders(item.Elements("Folder").ToList(), folder.Folders);
            }
        }
    }

    public class Folder
    {
        public string Name { get; set; }
        public List<Folder> Folders { get; set; }
        public List<string> FileNames { get; set; }
    }




Configure different XAML page as start page using single XAP

1 01 2010

Suppose you have a Silverlight application with 2 page

1) AnimationPage1.xaml

2) AnimationPage2.xaml

And suppose in your Web project you have 2 page

1) TestPage1.aspx

2) TestPage2.aspx

Now you want to use same xap on both .aspx  page but with different animation (different xaml page)

Ok

You can use the initParams property of <object> tag that host Silverlight App:

TestPage1.aspx:

        <object data="data:application/x-silverlight-2,"
            type="application/x-silverlight-2"
            width="100%" height="100%">
            <param name="source" value="../ClientBin/Sample.xap" />
            <param name="initParams" value="startPage=AnimationPage1" />
            <param name="onError" value="onSilverlightError" />
            <param name="background" value="white" />
            <param name="minRuntimeVersion" value="3.0.40624.0" />
            <param name="autoUpgrade" value="true" />
            <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0"
            style="text-decoration: none">
                <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight"
                    style="border-style: none" />
            </a>
        </object>

TestPage2.aspx:

        <object data="data:application/x-silverlight-2,"
            type="application/x-silverlight-2"
            width="100%" height="100%">
            <param name="source" value="../ClientBin/Sample.xap" />
            <param name="initParams" value="startPage=AnimationPage2" />
            <param name="onError" value="onSilverlightError" />
            <param name="background" value="white" />
            <param name="minRuntimeVersion" value="3.0.40624.0" />
            <param name="autoUpgrade" value="true" />
            <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0"
            style="text-decoration: none">
                <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight"
                    style="border-style: none" />
            </a>
        </object>

Now in Silverlight application open the App.xaml

Modify the code like below:

        private void Application_Startup(object sender, StartupEventArgs e)
        {
            if (e.InitParams.ContainsKey("startPage"))
            {
                if (e.InitParams["startPage"] == "AnimationPage1")
                {
                    this.RootVisual = new AnimationPage1();
                }
                else if (e.InitParams["startPage"] == "AnimationPage2")
                {
                    this.RootVisual = new AnimationPage2();
                }
                else
                {
                    // Assign any default page
                }
            }
            else
            {
                // Assign any default page
            }
        }