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?

ItemsSource="{Binding WeatherForecast}", DataType is required only for x:Bind becuase it creates bindings at compile time and need to know what type of object you want to bind to, you don't need it with Binding cause it's being resolved in runtime, depending on the current DataContext no matter what the actual type is — RTDev

mm8 mm8 · Accepted Answer · 2017-01-02T16:51:29

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";
    }
}

UWP: User Control ListView DataTemplate Datatype binding

1 Answers