Question

I made 2 Listviews 1 with an image + name & lastname and 1 that only display the images (in a Wrap panel in the listview). The first one:

  <ListView x:Name="lsvsomething" Grid.Column="1" Grid.Row="1" Grid.RowSpan="2" GotFocus="lsv_GotFocus" SelectionChanged="lsv_selectionchanged" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
            <ListView.View>
                <GridView>
                    <GridViewColumn Width="auto">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <Image HorizontalAlignment="Center" VerticalAlignment="Center" Width="50" Height="50" Source="{Binding image}" Stretch="Fill"/>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                    <GridViewColumn Width="auto" DisplayMemberBinding="{Binding name}">
                        <GridViewColumnHeader Content="name" Tag="name" Click="SortClick"/>
                    </GridViewColumn>
                    <GridViewColumn Width="auto" DisplayMemberBinding="{Binding lastname}">
                        <GridViewColumnHeader Content="lastname" Tag="lastname" Click="SortClick" />
                    </GridViewColumn>
                </GridView>
            </ListView.View>
    </ListView>

The second one(Only images):

 <ListView x:Name="lsvsomething" Grid.Column="1" Grid.Row="1" Grid.RowSpan="2" GotFocus="lsv_GotFocus" SelectionChanged="lsv_selectionchanged" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <ListView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapPanel Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </ListView.ItemsPanel>
                    <ListView.View>
                        <GridView>
                            <GridViewColumn Width="60">
                                <GridViewColumn.CellTemplate>
                                    <DataTemplate>
                                        <Image HorizontalAlignment="Center" VerticalAlignment="Center" Width="50" Height="50" Source="{Binding image}" Stretch="Fill"/>
                                    </DataTemplate>
                                </GridViewColumn.CellTemplate>
                            </GridViewColumn>
                        </GridView>
                    </ListView.View>
  </ListView>

Now they both have ListView.View in it, I want to put them in a “template?” in app.xaml, but I got no idea how I can do that. The 2nd Listview one also uses the ItemsPanelTemplate to make it a wrap panne. I found how I can save that one in app.xaml (ItemsPanel=”{DynamicResource somename}”) However I am using this listview on mutliple windows so I want to save them both(make templates of them both?) in the app.xaml file. Then I should also be able to switch them in runtime. (The itemsource is set in the “codebehind”)

Answer 1

“template” is indeed not exact definition. I assume you want to really want to have some sort of re-usability of the list views. There are few options

Option 1 (preferred) Put each ListView in a UserControl. That would be a stand alone XAML file, with <UserControl> element at the root, and the <ListView> its only child (no need for panel since you have just one element. The XAML will look like:

<UserControl x:Class="SO.NameAndImageList"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="300"
    >
    <ListView ...>
        ...
    </ListView>
</UserControl>

To use this UserControl, define the ‘local’ namespace to point to your code, in put it:

<Window ...
    xmlns:local"clr-namespace:SO">

    ...
    <local:NameAndImageList />
    ...
</Window>

Option 2 Create a DataTemplate, which presents a custom type that represents your list.

In code (typically, this is called ViewModel, in a MVVM model), define the following type:

public class PersonCollection : ObservableCollection<Person> { }

Your type derives from ObservableCollection of Person (the class that contains the item), with no addition. This is just an alias XAML can understand. Then, in app.xaml file, within the <Application.Resources> section, define the following template:

<DataTemplate TargetType="{x:Type local:PersonCollection}" x:Key="ImageAndNameTemplate">
    <ListBox ...>
        ...
    </ListBox>
</DataTemplate>

In order to reuse, just drop the PersonCollection data (typically, it will come from the DataContext) in any panel, or using binding within a ContentControl:

<Window ... >
    <Window.DataContext>
        <!-- Instantiate the data. There are many other ways to do that -->
        <local:PersonCollection>
            <local:Person Name="..." Image="..." />
            <local:Person Name="..." Image="..." />
            <local:Person Name="..." Image="..." />
            ...
        </local:PersonCollection>
    </Window.DataContext>

    ...
    <ContentControl Content="{Binding}" ContentTemplate="{StaticResource ImageAndNameTemplate}" />

</Window>