Question

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

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.