Dynamically changing WPF ListView ItemsPanel & ItemsContainerStyle

Question

I have a ListView in XAML which displays its source collection in a GridView (with columns) fashion. However I intend to use the same ListView to display the source collection may be in a grid of images, or some card view. I want the ListView to change itself based on a ComboBox selection. So say for ComboBox value 1 ListView should display a GridView, for value 2 ListView should display card view. Currently my ListView specifies a GridView set as its View property:

<ListView ItemsSource="{Binding PersonList}" Width="450" HorizontalAlignment="Right" IsSynchronizedWithCurrentItem="True">
        <ListView.View>
            <GridView>
                <GridViewColumn Header="FirstName" DisplayMemberBinding="{Binding FirstName}" />
                <GridViewColumn Header="LastName" DisplayMemberBinding="{Binding LastName}" />
                <GridViewColumn Header="Ip Address" DisplayMemberBinding="{Binding Path=IpAddress}" />
            </GridView>
        </ListView.View>
    </ListView>

I would like to know how can I change the ListView to display different views based on ComboBox triggers.

Answer 1

ListView View is a DependencyProperty of type ViewBase. So, what you can do is create your own custom views and can set it via DataTrigger on combobox selected item.

Microsoft already has sample available for it online which you can download from here.

OR

May be you can define two separate ListView's in resources as two seperate DataTemplates.

<Window.Resources>
   <DataTemplate x:Key="GridViewTemplate">
      <ListView/> <!-- GridView -->
   </DataTemplate>
   <DataTemplate x:Key="CardViewTemplate">
      <ListView/> <!-- CardView -->
   </DataTemplate>
</Window.Resources>

and have one ContentControl in place and you can swap its Content based on selected value in combobox.

<ContentControl>
   <ContentControl.Style>
      <Style TargetType="ContentControl">
         <Setter Property="Content"
                 Value="{StaticResource GridViewTemplate}"/>
            <Style.Triggers>
               <DataTrigger Binding="{Binding SelectedValue}" Value="Value2">
                  <Setter Property="Content"
                          Value="{StaticResource CardViewTemplate}"/>
               </DataTrigger>
            </Style.Triggers>
       </Style>
    </ContentControl.Style>
</ContentControl>