繁体   English   中英

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

[英]UWP: User Control ListView DataTemplate Datatype binding

我想将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的绑定是否正确?

ListView的ItemSource的绑定是否正确?

是的,前提是StackPanel的DataContext(可能与父UserControl的DataContext是相同的)是IEnumerable <WeatherForecast>。

ItemsSource="{Binding}"表示ItemsSource="{Binding Path=.}"缩写。

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

尽管对于未编译的绑定不是必需的,但是您可以像这样指定DataTemplate的DataType:

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

...其中local是WeatherForecast类的名称空间的名称空间映射:

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM