将模型列表绑定到ScrollViewer中的项目

Question

<ScrollViewer Width="600" 
              Grid.Row="1" 
              PanningMode="Both" 
              extensions:TouchScrolling.IsEnabled="True" 
              HorizontalScrollBarVisibility="Visible"
              VerticalScrollBarVisibility="Disabled">

    <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Border Width="175" 
                Grid.Row="0" 
                Grid.Column="0">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="170" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>

                <Grid Grid.Row="0" >
                    <Grid MinWidth="{Binding ElementName=backgroundImage, Path=ActualWidth}" >
                        <StackPanel HorizontalAlignment="Center" 
                                    Orientation="Horizontal" >
                            <Image Height="160" 
                                   Source="man.png" />
                        </StackPanel>
                    </Grid>
                </Grid>
                <TextBlock TextWrapping="Wrap"
                           Grid.Row="1" 
                           FontSize="10" 
                           Text="Bomber jacket..." />
            </Grid>
        </Border>

        <Border Width="175" 
                Grid.Row="0"
                Grid.Column="1">...
        </Border>
        <Border Width="175" 
                Grid.Row="0"
                Grid.Column="2">...
        </Border>
        <Border Width="175" 
                Grid.Row="0" 
                Grid.Column="3">...
        </Border>
    </Grid>
</ScrollViewer>

我有以上xaml。 在scrollViewer中，我有一些项目。 我想用数据库中的数据初始化它。 这个怎么做？

我需要为通用XAML创建一些ItemControl并绑定到属性。 但是我如何管理将列表中的每个项目都绑定到该ItemControl ？

---

我找到了这个主题 ，在这里我了解了如何为列表项构建相同的xaml，但是存在一个问题-如何为每个项设置Grid.Column？

Answer 1

ItemsControl用于绘制项目集合的UI。

因此，首先需要从数据库中收集项目。

public ObservableCollection<MyItem> MyCollection { get; set; }

要使用ItemsControl进行绘制，可以使用XAML：

<ScrollViewer Height="100">
    <ItemsControl ItemsSource="{Binding MyCollection}" />
</ScrollViewer>

这将对ItemsControl使用默认的UI，该UI将遍历集合中的每个项目，并为每个项目渲染一个TextBlock，其Text属性显示该项目的.ToString() 。

所以实际渲染的是

<ScrollViewer>
    <StackPanel>
        <TextBlock /> <!-- DataContext is MyCollection[0] -->
        <TextBlock /> <!-- DataContext is MyCollection[1] -->
        <TextBlock /> <!-- DataContext is MyCollection[2] -->
    </StackPanel>
</ScrollViewer>

ItemsControl使您可以修改模板的不同部分。

例如，要更改上面的XAML中的<StackPanel> ，可以将ItemsPanel属性设置为使用Grid。

<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
        </Grid>
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

或将TextBlock更改为其他内容，可以更改ItemTemplate

<ItemsControl.ItemTemplate>
    <DataTemplate>
        <Border Width="175" ...>
            <TextBlock Text="{Binding Name}" />
        </Border>
    </DataTemplate>
</ItemsControl.ItemTemplate>

这将使您的输出呈现如下内容

<ScrollViewer>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <Border Width="175" ...> <!-- DataContext is MyCollection[0] -->
            <TextBlock Text="{Binding Name}" />
        </Border>

        <Border Width="175" ...> <!-- DataContext is MyCollection[1] -->
            <TextBlock Text="{Binding Name}" />
        </Border>

        <Border Width="175" ...> <!-- DataContext is MyCollection[2] -->
            <TextBlock Text="{Binding Name}" />
        </Border>
    </Grid>
</ScrollViewer>

要设置Grid.Column，实际上有点棘手。 ItemsControl实际上将每个项目包装在<ContentPresenter>因此上述XAML中的每个项目实际上将呈现如下所示：

<ContentPresenter>
    <Border Width="175" ...> <!-- DataContext is MyCollection[0] -->
        <TextBlock Text="{Binding Name}" />
    </Border>
</ContentPresenter>

要设置Grid.Column类的属性，需要在包装每个项目的ContentPresenter上进行设置。 这就是ItemContainerStyle的用途。

<ItemsControl.ItemContainerStyle>
    <Style>
        <Setter Property="Grid.Column"
                Value="{Binding ColumnIndex}" />
        <Setter Property="Grid.Row"
                Value="{Binding RowIndex}" />
    </Style>
</ItemsControl.ItemContainerStyle>

因此，假设您绑定到

public ObservableCollection<MyItem> MyCollection { get; set; }

和MyItem看起来像这样

public class MyItem
{
    public int RowIndex { get; set; }
    public int ColumnIndex { get; set; }
    public string Name { get; set; }
}

您最终的XAML可能看起来像这样

<ItemsControl ItemsSource="{Binding MyCollection}">
    <!-- ItemsPanelTemplate -->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
            </Grid>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <!-- ItemContainerStyle -->
    <ItemsControl.ItemContainerStyle>
        <Style>
            <Setter Property="Grid.Column"
                    Value="{Binding ColumnIndex}" />
            <Setter Property="Grid.Row"
                    Value="{Binding RowIndex}" />
        </Style>
    </ItemsControl.ItemContainerStyle>

    <!-- ItemTemplate -->
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border Width="175" ...>
                <TextBlock Text="{Binding Name}" />
            </Border>
    </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

它会呈现出这样的内容：

<ScrollViewer>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <!-- DataContext is MyCollection[0] -->
        <ContentPresenter Grid.Row="{Binding RowIndex}" Grid.Column="{Binding ColumnIndex}">
            <Border Width="175" ...> 
                <TextBlock Text="{Binding Name}" />
            </Border>
        </ContentPresenter>

        <!-- DataContext is MyCollection[1] -->
        <ContentPresenter Grid.Row="{Binding RowIndex}" Grid.Column="{Binding ColumnIndex}">
            <Border Width="175" ...> 
                <TextBlock Text="{Binding Name}" />
            </Border>
        </ContentPresenter>

        <!-- DataContext is MyCollection[2] -->
        <ContentPresenter Grid.Row="{Binding RowIndex}" Grid.Column="{Binding ColumnIndex}">
            <Border Width="175" ...> 
                <TextBlock Text="{Binding Name}" />
            </Border>
        </ContentPresenter>
    </Grid>
</ScrollViewer>

Answer 2

如果我是对的，那么您的意思是您要将项目列表绑定到您的xaml。 为此，您可以使用GridView 。

在Gridview中，您绑定项目列表，并为每个项目定义一个模板。

<GridView ItemsSource="{Binding MyList}">
                    <Gridview.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding foo}"/>
                        </DataTemplate>
                    </GridView.ItemTemplate>

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

如你看到的。 gridview项目模板定义列表中每个项目的显示方式。 当覆盖项目面板时，可以设置MaximumRowsOrColumns和Orientation来定义每行将有多少个项目以及行面对的方式。