UWP: User Control ListView DataTemplate Datatype binding

Question

I'd like to bind a ListView item inside a user control. to display custom formated text within this List.

I'de done this without user control. So the following code was working well:

<StackPanel Grid.Row="2" Grid.ColumnSpan="2" Orientation="Horizontal" HorizontalAlignment="left">
            <ListView ItemsSource="{x:Bind WeatherViewModel.WeatherForecast}" >
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="local:WeatherForecast">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="30"/>
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>

                            <!-- temperature -->
                            <Grid Grid.Row="0">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="47"/>
                                    <ColumnDefinition Width="10"/>
                                    <ColumnDefinition Width="47"/>
                                </Grid.ColumnDefinitions>
                                <TextBlock Text="{x:Bind MaxTemperature}" 
                                           FontSize="16" 
                                           Grid.Column="0"                                            
                                           FontFamily="Sergoe UI"
                                           HorizontalAlignment="Right"
                                           VerticalAlignment="Center"
                                           Style="{StaticResource BasicTextBlock}"/>
                                <TextBlock Text="|" 
                                           FontSize="16" 
                                           Grid.Column="1"
                                           FontFamily="Sergoe UI"
                                           HorizontalAlignment="Center"
                                           VerticalAlignment="Center"
                                           Style="{StaticResource BasicTextBlock}"/>
                                <TextBlock Text="{x:Bind MinTemperature}" 
                                           FontSize="16" 
                                           Grid.Column="2"
                                           FontFamily="Sergoe UI"
                                           HorizontalAlignment="left"
                                           VerticalAlignment="Center"
                                           Style="{StaticResource BasicTextBlock}"/>
                             </Grid>
                            </TextBlock>
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal"></StackPanel>
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
              </ListView>
        </StackPanel>

Next I tried to create a user control for this ListView

<StackPanel Orientation="Horizontal" HorizontalAlignment="left">
        <ListView ItemsSource="{Binding Path=.}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="30"/>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                        <!-- temperature -->
                        <Grid Grid.Row="0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="47"/>
                                <ColumnDefinition Width="10"/>
                                <ColumnDefinition Width="47"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Text="{Binding MaxTemperature}" 
                                           FontSize="16" 
                                           Grid.Column="0"                                            
                                           FontFamily="Sergoe UI"
                                           HorizontalAlignment="Right"
                                           VerticalAlignment="Center"
                                           Style="{StaticResource BasicTextBlock}"/>
                            <TextBlock Text="|" 
                                           FontSize="16" 
                                           Grid.Column="1"
                                           FontFamily="Sergoe UI"
                                           HorizontalAlignment="Center"
                                           VerticalAlignment="Center"
                                           Style="{StaticResource BasicTextBlock}"/>
                            <TextBlock Text="{Binding MinTemperature}" 
                                           FontSize="16" 
                                           Grid.Column="2"
                                           FontFamily="Sergoe UI"
                                           HorizontalAlignment="left"
                                           VerticalAlignment="Center"
                                           Style="{StaticResource BasicTextBlock}"/>
                        </Grid>

                        </TextBlock>
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"></StackPanel>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
        </ListView>
    </StackPanel>

and I set the dataContext of this view

this.WeatherForecastView.DataContext = this.WUWeatherViewModel.Forecast;

But how can I define the Datatype of the DataTemplate? Is the Binding for the ItemSource of the ListView correct?

Answer 1

Is the Binding for the ItemSource of the ListView correct?

Yes, provided that the DataContext of the StackPanel (which is probably the same as for the parent UserControl) is an IEnumerable<WeatherForecast>.

ItemsSource="{Binding}" is short for ItemsSource="{Binding Path=.}" .

But how can I define the Datatype of the DataTemplate?

Altough not required for uncompiled bindings, you can specify the DataType of the DataTemplate like this:

<DataTemplate x:DataType="local:WeatherForecast">

...where local is the namespace mapping for the WeatherForecast class' namespace:

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ListView x:Name="lv" ItemsSource="{Binding}">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="local:WeatherForecast">
                    <TextBlock Text="{Binding Name}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>
</Page>

---

namespace App1
{
    public class WeatherForecast
    {
        public string Name { get; set; } = "wf";
    }
}