ListView: definition of ItemsPanelTemplate in the resource dictionary

Question

I have a ListView that looks like a Windows Explorer view (icon + some details) tied to a list somewhere in the ViewModel.

My goal here is to be able to switch between a conductor view or a classic view whenever we want.

I could determine the ItemsPanelTemplate do just that job, to display the layout correctly, directly in the ListView.ItemsPanel field. Now I would like to define it in resources so that I can use it in different views, and especially in one control, the user should have a choice between Explorer view or classic list view (default rendering for list)

How did you do this? I cannot define the ItemsPanelTemplate in my ResourceDictionary , and if I define the DataTemplate , it is incompatible (although I thought that after the clean logic, the ItemsPanelTemplate should inherit from the DataTemplate , but in reality it does not look like that).

Code snippet for the actual list:

 <ListView SelectionMode="Single" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" HorizontalContentAlignment="Center" VerticalContentAlignment="Bottom" ScrollViewer.VerticalScrollBarVisibility="Auto" ItemsSource="{Binding ListUserApps, UpdateSourceTrigger=PropertyChanged}" SelectedIndex="{Binding SelectedUserApp, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Background="White"> <ListView.ItemsPanel> <ItemsPanelTemplate > <WrapPanel Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}" ItemWidth="{Binding (ListView.View).ItemWidth, RelativeSource={RelativeSource AncestorType=ListView}}" ItemHeight="{Binding (ListView.View).ItemHeight, RelativeSource={RelativeSource AncestorType=ListView}}" /> <!--MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}"--> </ItemsPanelTemplate> </ListView.ItemsPanel> <ListView.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal" Height="Auto" Width="150"> <Image Source="{Binding Path=Appli.AppType, Converter={StaticResource TypeToIconConverter}}" Margin="5" Height="50" Width="50"/> <StackPanel VerticalAlignment="Center" Width="90"> <TextBlock Text="{Binding Path=Appli.AppName}" FontSize="13" HorizontalAlignment="Left" TextWrapping="WrapWithOverflow" Margin="0,0,0,1" /> <TextBlock Text="{Binding Path=Appli.AppType}" FontSize="9" HorizontalAlignment="Left" Margin="0,0,0,1" /> </StackPanel> </StackPanel> </DataTemplate> </ListView.ItemTemplate> </ListView> 

Saving an ItemTemplate in a static resource was easy to do, but now I can’t do anything with the ItemsPanelTemplate ...

Any ideas? I use MVVM, so I try ideally not to use code if possible

Answer 1

for this you would use a style for the entire ListView.

what would you do:

 <Grid.Resources> <Style x:Key="ListViewStyle" TargetType="ListView"> <Setter Property="ItemsPanel"> <Setter.Value> <ItemsPanelTemplate > <WrapPanel Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}" ItemWidth="{Binding (ListView.View).ItemWidth, RelativeSource={RelativeSource AncestorType=ListView}}" ItemHeight="{Binding (ListView.View).ItemHeight, RelativeSource={RelativeSource AncestorType=ListView}}" /> <!--MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}"--> </ItemsPanelTemplate> </Setter.Value> </Setter> </Style> </Grid.Resources> <ListView SelectionMode="Single" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" HorizontalContentAlignment="Center" VerticalContentAlignment="Bottom" ScrollViewer.VerticalScrollBarVisibility="Auto" ItemsSource="{Binding ListUserApps, UpdateSourceTrigger=PropertyChanged}" SelectedIndex="{Binding SelectedUserApp, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Background="White" Style="{StaticResource ListViewStyle}"> <ListView.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal" Height="Auto" Width="150"> <Image Source="{Binding Path=Appli.AppType, Converter={StaticResource TypeToIconConverter}}" Margin="5" Height="50" Width="50"/> <StackPanel VerticalAlignment="Center" Width="90"> <TextBlock Text="{Binding Path=Appli.AppName}" FontSize="13" HorizontalAlignment="Left" TextWrapping="WrapWithOverflow" Margin="0,0,0,1" /> <TextBlock Text="{Binding Path=Appli.AppType}" FontSize="9" HorizontalAlignment="Left" Margin="0,0,0,1" /> </StackPanel> </StackPanel> </DataTemplate> </ListView.ItemTemplate> </ListView> 

if you want the user to be able to switch between explorer and classic view, just define a second style and switch the list style. This can be done, for example, with some VisualStates and DataStateBehavior.

Alternatively, you can create a style with some DataTriggers and Setters for individual ItemsPanels.