locked
Dynamic DataTemplate RRS feed

  • Question

  • I have a list of data which belongs to 2 categories. I would like to:

    Display in a non column format e.g. a stack panel for each row
    Use Paging and the IPageViewCollection
    Dynamically change how the data is display depending on the the catagory.

    Do I use the datagrid or listbox and can anyone recommend how to change the datatemplate depending on the data.

    Thursday, June 2, 2011 11:40 AM

Answers

  • Hi

    You need to write some additional code if you need Dynamic DataTemplate.

    Make a DataTemplateSelector class.

    public abstract class DataTemplateSelector : ContentControl
        {
            public virtual DataTemplate SelectTemplate(
                object item, DependencyObject container)
            {
                return null;
            }
            // Summary:
            //     This method overrides the base class OnContentChanged method 
            //     and updates the ContentTemplate with the selected DataTemplate.
            //
            // Parameters:
            //   oldContent:
            //     The old value of the System.Windows.Controls.ContentControl.Content property.
            //
            //   newContent:
            //     The new value of the System.Windows.Controls.ContentControl.Content property.
            protected override void OnContentChanged(
                object oldContent, object newContent)
            {
                base.OnContentChanged(oldContent, newContent);
    
                ContentTemplate = SelectTemplate(newContent, this);
            }
        }

    2. Make a class that inherits from DataTemplateSelector. Something like this, change it to suit your needs:

    public class AutoCompleteTemplateSelector : DataTemplateSelector
        {
    
            public DataTemplate CodeDescriptionTemplate
            {
                get;
                set;
            }
     public DataTemplate CityTemplate
            {
                get;
                set;
            }
    
    /// <summary>
            /// This method overrides the base class method to return the Datatemplate 
            /// depending upon the Collection type, bound to the Lookup Itemsource
            /// </summary>
            public override DataTemplate SelectTemplate(object item, DependencyObject container)
            {
                DataTemplate template = null;
                if (item != null)
                {
                    switch (item.GetType().Name)
                    {
                            case "Country":
                            template = CodeDescriptionTemplate;
                            break;
                             case "City":
                            template = CityTemplate;
                            break;
                            default:
                            template = base.SelectTemplate(item, container);
                            break;
                    }
                }
                return template;
            }
    
            
        }

    3. In your xaml bind it like below:

     <UserControl.Resources>
        <DataTemplate x:Key="LookupDataTemplate">
         <hms:AutoCompleteTemplateSelector Content="{Binding}">
            <hms:AutoCompleteTemplateSelector.CityTemplate>
               <DataTemplate>
                 <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding CityName}"/>
                  </StackPanel>
                  </DataTemplate>           </hms:AutoCompleteTemplateSelector.CityTemplate>
     <hms:AutoCompleteTemplateSelector.CodeDescriptionTemplate>
         <DataTemplate>
           <StackPanel Orientation="Horizontal">  
             <TextBlock Text="{Binding Code}"/> 
    <TextBlock Text="{Binding Description}"/>                             
              </StackPanel>
          </DataTemplate>                  </hms:AutoCompleteTemplateSelector.CodeDescriptionTemplate>
    </hms:AutoCompleteTemplateSelector>                
    </DataTemplate>
    </UserControl.Resources>
    

    4. Bind the ItemTemplate="{StaticResource LookupDataTemplate}"


     
    Friday, June 3, 2011 1:17 AM

All replies

  • Hi,

    Silverlight does not support x:DataType so that seems hard to accomplish.

    Friday, June 3, 2011 12:22 AM
  • Hi

    You need to write some additional code if you need Dynamic DataTemplate.

    Make a DataTemplateSelector class.

    public abstract class DataTemplateSelector : ContentControl
        {
            public virtual DataTemplate SelectTemplate(
                object item, DependencyObject container)
            {
                return null;
            }
            // Summary:
            //     This method overrides the base class OnContentChanged method 
            //     and updates the ContentTemplate with the selected DataTemplate.
            //
            // Parameters:
            //   oldContent:
            //     The old value of the System.Windows.Controls.ContentControl.Content property.
            //
            //   newContent:
            //     The new value of the System.Windows.Controls.ContentControl.Content property.
            protected override void OnContentChanged(
                object oldContent, object newContent)
            {
                base.OnContentChanged(oldContent, newContent);
    
                ContentTemplate = SelectTemplate(newContent, this);
            }
        }

    2. Make a class that inherits from DataTemplateSelector. Something like this, change it to suit your needs:

    public class AutoCompleteTemplateSelector : DataTemplateSelector
        {
    
            public DataTemplate CodeDescriptionTemplate
            {
                get;
                set;
            }
     public DataTemplate CityTemplate
            {
                get;
                set;
            }
    
    /// <summary>
            /// This method overrides the base class method to return the Datatemplate 
            /// depending upon the Collection type, bound to the Lookup Itemsource
            /// </summary>
            public override DataTemplate SelectTemplate(object item, DependencyObject container)
            {
                DataTemplate template = null;
                if (item != null)
                {
                    switch (item.GetType().Name)
                    {
                            case "Country":
                            template = CodeDescriptionTemplate;
                            break;
                             case "City":
                            template = CityTemplate;
                            break;
                            default:
                            template = base.SelectTemplate(item, container);
                            break;
                    }
                }
                return template;
            }
    
            
        }

    3. In your xaml bind it like below:

     <UserControl.Resources>
        <DataTemplate x:Key="LookupDataTemplate">
         <hms:AutoCompleteTemplateSelector Content="{Binding}">
            <hms:AutoCompleteTemplateSelector.CityTemplate>
               <DataTemplate>
                 <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding CityName}"/>
                  </StackPanel>
                  </DataTemplate>           </hms:AutoCompleteTemplateSelector.CityTemplate>
     <hms:AutoCompleteTemplateSelector.CodeDescriptionTemplate>
         <DataTemplate>
           <StackPanel Orientation="Horizontal">  
             <TextBlock Text="{Binding Code}"/> 
    <TextBlock Text="{Binding Description}"/>                             
              </StackPanel>
          </DataTemplate>                  </hms:AutoCompleteTemplateSelector.CodeDescriptionTemplate>
    </hms:AutoCompleteTemplateSelector>                
    </DataTemplate>
    </UserControl.Resources>
    

    4. Bind the ItemTemplate="{StaticResource LookupDataTemplate}"


     
    Friday, June 3, 2011 1:17 AM