WPF BIndings based on certain condition... to be done entirely using Xaml

Question

Here is my Xaml for the ListView

  <ListView x:Name="duplicateVarsInCompXMLListView" ItemsSource="{Binding}"  HorizontalAlignment="Left"  VerticalAlignment="Top" Width="306">
        <ListView.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Vertical">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="ComponentID: " FontWeight="Bold" Foreground="Brown" />
                        <TextBlock Text="{Binding Name}"/>
                    </StackPanel>                                                                   
                    <ItemsControl ItemsSource="{Binding Parameters}">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <StackPanel>                 
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="Variable Name: " Foreground="Green"/>
                                        <TextBlock Text="{Binding Name}"/>
                                    </StackPanel>                                    
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="Variable Value: " Foreground="Blue"/>
                                        <TextBlock Text="{Binding Value}"/>
                                    </StackPanel>
                                </StackPanel>                                
                            </DataTemplate>                               
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>                    
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

Code-behind

        private ObservableCollection<Component> mastercomponentcollection;
        mastercomponentcollection = //code to populate the collection 
        duplicateVarsInCompXMLListView.DataContext = this.mastercomponentcollection;

Classes Involved

    public class Component
    {
    private ObservableCollection<ComponentParameter> parameters = new ObservableCollection<ComponentParameter>();
    public string Name
    {
        get;
        set;
    }

    public ObservableCollection<ComponentParameter> Parameters
    {
        get{return parameters;}
        set{parameters = value;}
    }
}


public class ComponentParameter
{
    public string Name
    {
        get;set;
    }

    public string Value
    {
        get;set;
    }

    public bool HasErrors
    {
        get;
        set;
    }

    public bool IsDuplicate
    {
        get; set;
    }

    public bool IsMissing
    {
        get;set;
    }

Here I want to show the bindings only for those collection items where the IsDuplicate is set to true. I believe DataTemplate.Triggers is the way to go but I can't figure out the exact syntax to make it work. Any suggestions?

Answer 1

Here is the ItemContainerStyle for your ItemsControl to hide the items with Duplicate as false.

  <ItemsControl ItemsSource="{Binding Parameters}">
        <ItemsControl.ItemContainerStyle>
            <Style >
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsDuplicate}" Value="false">
                        <Setter Property="UIElement.Visibility" Value="Collapsed"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </ItemsControl.ItemContainerStyle>

Answer 2

If you want to display two different DataTemplate depending on the IsDuplicate property, you can use DataTemplateSelector.

Create a class derived from DataTemplateSelector that selects the DataTemplate

public class MyTemplateSelector : DataTemplateSelector
{
      public DataTemplate FirstTemplate { get; set; }

      public DataTemplate SecondTemplate { get; set; }

      public override System.Windows.DataTemplate SelectTemplate(object item, System.Windows.DependencyObject container)
      {
               var model = item as ComponentParameter;

               if (model.IsDuplicated)
                    return FirstTemplate;

              return SecondTemplate;
      }
}

Create it in your resources and define the templates in your xaml:

<local:MyTemplateSelector x:Key="itemTemplateSelector">
        <local:MyTemplateSelector.FirstTemplate>
            <DataTemplate>
                  <StackPanel>                 
                         <StackPanel Orientation="Horizontal">
                               <TextBlock Text="Variable Name: " Foreground="Green"/>
                               <TextBlock Text="{Binding Name}"/>
                          </StackPanel>                                    
                          <StackPanel Orientation="Horizontal">
                               <TextBlock Text="Variable Value: " Foreground="Blue"/>
                               <TextBlock Text="{Binding Value}"/>
                          </StackPanel>
                   </StackPanel>                                
             </DataTemplate>                  
        </local:MyTemplateSelector.FirstTemplate>
        <local:MyTemplateSelector.SecondTemplate>
            <DataTemplate>

                <!-- Implementation without bindings goes here -->

            </DataTemplate>
        </local:MyTemplateSelector.SecondTemplate>
</local:MyTemplateSelector>

And use it in your ListView:

 <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Vertical">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="ComponentID: " FontWeight="Bold" Foreground="Brown" />
                    <TextBlock Text="{Binding Name}"/>
                </StackPanel>                                                                   
                <ItemsControl ItemsSource="{Binding Parameters}" ItemTemplateSelector="{StaticResource itemTemplateSelector}"/>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>