Question

下面是GridView的DataTemplate。我只是将GridView更改为ListView

我想这样做：

DataTemplate中的2个或更多列，用于显示ListView

a）2列文字

或

b）2列方框中的图像，如300 x 200。

如何为ListView设计DataTemplate？

由于

1）DataTemplate在ResourceDictionary中为Gridview声明。可以将它用于ListView吗？

<DataTemplate x:Key="CustomerTemplate">
    <Grid Background="Blue"  Width="300" Height="200">
        <Grid.RowDefinitions>
            <RowDefinition Height="75"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock Text="{Binding Name}" 
                           Grid.Row="0"
                           Margin="20,10,0,0" 
                           TextWrapping="Wrap"
                           VerticalAlignment="Top"
                           FontSize="24"
                           FontWeight="SemiBold"/>
        <TextBlock Text="{Binding No}" 
                           Grid.Row="1"
                           Margin="20,0,0,0" 
                           VerticalAlignment="Center"
                           FontSize="18"/>

        <TextBlock Text="{Binding Contact}" 
                           Grid.Row="2"
                           Margin="20,0,0,0" 
                           VerticalAlignment="Center"
                           FontSize="18"/>
        <TextBlock Text="{Binding Address}" 
                           Grid.Row="3"
                           Margin="20,0,0,0" 
                           VerticalAlignment="Top"
                           FontSize="18"/>

        <TextBlock Text="{Binding Id}" 
                           Grid.Row="3"
                           Margin="200,0,0,0" 
                           VerticalAlignment="Top"
                           FontSize="18"/>

    </Grid>
</DataTemplate>

- 使用DataTemplate for ListView。需要为DataTemplate做些什么？

<ListView x:Name="CustomersGridView" 
          Grid.Row="1"               
          Foreground="White"     
          SelectionMode="None"
          IsSwipeEnabled="True"
          IsItemClickEnabled="True"
          ItemsSource="{Binding Mode=OneWay, Source={StaticResource CustomersViewSource}}" 
          ItemTemplate="{StaticResource CustomerTemplate}"
          ItemClick="CustomersGridView_ItemClick"      
          SelectionChanged="CustomersGridView_SelectionChanged">
</ListView>

Answer 1

只需添加外部网格，然后再添加2列。

<Grid Width="900">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="300"></ColumnDefinition>
        <ColumnDefinition Width="300"></ColumnDefinition>
        <ColumnDefinition Width="300"></ColumnDefinition>
    </Grid.ColumnDefinitions>

    <!-- FIRST COLUMN -->
    <Grid Background="Blue"  Width="300" Height="200" Grid.Column="0" VerticalAlignment="Top">
        <Grid.RowDefinitions>
            <RowDefinition Height="75"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock Text="{Binding Name}" 
                               Grid.Row="0"
                               Margin="20,10,0,0" 
                               TextWrapping="Wrap"
                               VerticalAlignment="Top"
                               FontSize="24"
                               FontWeight="SemiBold"/>
        <TextBlock Text="{Binding No}" 
                               Grid.Row="1"
                               Margin="20,0,0,0" 
                               VerticalAlignment="Center"
                               FontSize="18"/>

        <TextBlock Text="{Binding Contact}" 
                               Grid.Row="2"
                               Margin="20,0,0,0" 
                               VerticalAlignment="Center"
                               FontSize="18"/>
        <TextBlock Text="{Binding Address}" 
                               Grid.Row="3"
                               Margin="20,0,0,0" 
                               VerticalAlignment="Top"
                               FontSize="18"/>

        <TextBlock Text="{Binding Id}" 
                               Grid.Row="3"
                               Margin="200,0,0,0" 
                               VerticalAlignment="Top"
                               FontSize="18"/>

    </Grid>

    <!-- SECOND COLUMN -->
    <Grid Grid.Column="1"></Grid>

    <!-- THIRD COLUMN -->
    <Grid Grid.Column="2"></Grid>

</Grid>

Answer 2

为什么不使用GridView对GridView的内部ScrollViewer进行一些调整？比如使它可以垂直滚动并允许它每行有3个项目。通过这样做，您可以保持数据模板只保留单个项目。以下是该示例：

<GridView ScrollViewer.HorizontalScrollBarVisibility="Disabled"
    ScrollViewer.HorizontalScrollMode="Disabled"
    ScrollViewer.VerticalScrollBarVisibility="Auto"
    ScrollViewer.VerticalScrollMode="Enabled">

    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid MaximumRowsOrColumns="3" Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
</GridView>

如何为ListView创建多个DataTemplate列

2 个答案: