UWP:用户控件ListView DataTemplate数据类型绑定

时间:2017-01-02 15:55:17

标签: c# xaml uwp

我想在用户控件中绑定一个ListView项。在此列表中显示自定义格式化文本。

我是在没有用户控制的情况下完成的。所以下面的代码运行良好:

<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>

接下来,我尝试为此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>

我设置了这个视图的dataContext

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

但是如何定义DataTemplate的数据类型? ListView的ItemSource的绑定是否正确?

1 个答案:

答案 0 :(得分:2)

  

ListView的ItemSource的绑定是否正确?

是的,前提是StackPanel的DataContext(可能与父UserControl的相同)是IEnumerable&lt; WeatherForecast&gt ;.

ItemsSource="{Binding}"ItemsSource="{Binding Path=.}"的缩写。

  

但是如何定义DataTemplate的数据类型?

对于未编译的绑定不需要Altough,您可以像这样指定DataTemplate的DataType:

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

...其中local是WeatherForecast类的名称空间映射&#39;名称空间:

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