Monday, August 20, 2012

Change DataTemplate to use depending on condition

Change DataTemplate to use depending on condition

I have 3 user controls

Control 1
Control 2
Control 3

I have a stack panel that contains an ItemsControl

<UserControl.Resources>   <DataTemplate x:Key="Template1">         <my:UserControl1 Height="117"/>                </DataTemplate>      <DataTemplate x:Key="Template2">   <my:UserControl3 Height="117"/>              </DataTemplate>      <DataTemplate x:Key="Template3">    <my:UserControl3 Height="117"/>               </DataTemplate>     </UserControl.Resources>    <StackPanel Name="stackPanel3" Orientation="Vertical" VerticalAlignment="Bottom" Width="Auto">   <ItemsControl ItemsSource="{Binding BlocksForMonth.Blocks}" ItemTemplate="{StaticResource Template1}">         </ItemsControl> </StackPanel> 

BlocksForMonths.Blocks is a list of view models. The Blocks class has a property called ClipType. If the clipType is 1, I want to use Template1. If its 2 I want to use Template 2. If its 3 I want to use Template 3

These templates contain different user controls

How can I do this through binding?

I have considered 1 template with the 3 controls, but I dont know how to bind the visibility?

In this XAML I am binding to a list not a single item

Paul

Answers & Comments...

Answer: 1

I would put the 3 controls in the same template and use Visibility to display the correct one. What I would do is build an IValueConverter to convert the deciding value (your case it's ClipType) and compare that to the ConverterParameter. If they are equal, return Visibility.Visible, otherwise return Visibility.Collapsed.

<UserControl.Resources>     <my:ClipTypeToVisibilityConverter x:Key="converter"/>     <DataTemplate x:Key="Template">         <StackPanel>               <my:UserControl1 Height="117" Visibility={Binding ClipType, Converter={StaticResource converter}, ConverterParameter=1} />                           <my:UserControl2 Height="117" Visibility={Binding ClipType, Converter={StaticResource converter}, ConverterParameter=2} />                         <my:UserControl3 Height="117" Visibility={Binding ClipType, Converter={StaticResource converter}, ConverterParameter=3} />                     </StackPanel>     </DataTemplate>     </UserControl.Resources>    <StackPanel Name="stackPanel3" Orientation="Vertical" VerticalAlignment="Bottom" Width="Auto">       <ItemsControl ItemsSource="{Binding BlocksForMonth.Blocks}" ItemTemplate="{StaticResource Template}">             </ItemsControl> </StackPanel> 

This example assumes the ClipType property is on each item view model in the list being displayed.

Here is a C# example converter.

    public class ClipTypeToVisibilityConverter: IValueConverter {     public object Convert(object value, Type targetType, object parameter, CultureInfo culture)     {                 var clipType = value.ToString();                  if (clipType == (string)parameter))                     return Visibility.Visible;                  return Visibility.Collapsed;     }      public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)     {         throw new NotImplementedException();     } } 

Sorry, everything was air-code. But I think you get the idea.

Answer by Kelly Ethridge for Change DataTemplate to use depending on condition




No comments:

Post a Comment

Send us your comment related to the topic mentioned on the blog