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？

我找到了this topic我理解如何为列表项构建相同的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，即循环遍历集合中的每个项目，并为每个项目呈现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项模板定义了列表中每个项目的显示方式。当您覆盖itemspanel时，您可以设置MaximumRowsOrColumns和Orientation来定义每行将包含的项目数以及行面向的方式。

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

2 个答案: