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

【问题标题】：Bind list of models to items in ScrollViewer将模型列表绑定到 ScrollViewer 中的项目
【发布时间】：2015-11-17 16:51:51
【问题描述】：

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

我发现this topic 在那里我了解如何为列表项构建相同的 xaml，但存在一个问题 - 如何为每个项目设置 Grid.Column？

【问题讨论】：

那么为什么不能使用项目控件、网格或列表视图或列表框。确切的问题是什么，因为仅向我们展示您的滚动查看器并没有帮助。
@TYY，请检查我的更新 - 现在对我来说似乎更清楚了，但仍然是一个问题
这个问题还很不清楚。您具体想要完成什么？请提供a good, minimal, complete code example，清楚地表明您正在尝试做什么。还要准确、具体地说明该代码现在的作用，以及它与您希望它做的有什么不同。

标签： c# wpf xaml scrollviewer

【解决方案1】：

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

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

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

要使用 ItemsControl 进行绘制，您可以像这样使用 XAML：

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

这将使用 ItemsControl 的默认 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>

【讨论】：

谢谢！这是非常酷的解释。只有一个关于ColumnIndex 和RowIndex 的问题 - 我可以以某种方式将其设置为集合中的项目数吗？不为其添加属性？
哎呀，别担心 - 我在这里找到了解决方案 stackoverflow.com/a/30324533/3917754 似乎很好

【解决方案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 来定义每行将有多少项目以及行的朝向。

【讨论】：