Question

我正在制作一份复杂的报告，几乎看起来像image

为此，我创建了一个集合，我将存储所有描述及其相应的评级。这个集合然后我绑定到ItemControl。将根据条件从数据库中提取集合。现在我的问题是如何将单个ItemControl分段或分离，使其看起来像图像中所示。我应该使用多个集合，然后绑定到不同的ItemControl？我可以使用多个数据网格吗？

我没有想法......任何建议/例子都非常感激。

Answer 1

绝对可行。将每个块（例如Mathmatics，Arts Education等）视为一个项目，然后您只需处理ItemsCollection。创建一个样式，用于呈现该集合中的每个项目，以及另一种样式，用于呈现块中的每个属性（其中还包含一些内容。

我有一些类似的例子，是由标题组成的块，以及各种带有描述的复选框。这些块也可能有不同的数量。

在我看来，显示这些块，我的xaml看起来像这样：

<ScrollViewer VerticalScrollBarVisibility="Visible" MaxHeight="100">
  <ItemsControl ItemsSource="{Binding FeatureFlags, Mode=TwoWay}" Style="{StaticResource FlagGroupsAndFlagsItemsControlStyle}" />
</ScrollViewer>

然后，我在某个资源字典中定义了一个ItemsControl的样式......

<Style x:Key="FlagGroupsAndFlagsItemsControlStyle" TargetType="ItemsControl">
        <Setter Property="Width" Value="Auto" />
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Grid x:Name="FlagListGrid">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                        <TextBox Grid.Row="0" Width="{Binding Width, ElementName=FlagListGrid, Mode=OneWay}" IsReadOnly="True" Text="{Binding Name}" />
                        <ListBox Grid.Row="1" Width="{Binding Width, ElementName=FlagListGrid, Mode=OneWay}" ItemsSource="{Binding Flags}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
                                 Style="{StaticResource FlagsListBoxItemsStyle}" Background="{Binding IsOptional, Converter={StaticResource YNToOptionalBackgroundColour}}"/>
                    </Grid>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>

然后是该模板ListBox中项目的样式......

<Style x:Key="FlagsListBoxItemsStyle" TargetType="ListBox">
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <toolkit:WrapPanel Width="{Binding Width, ElementName=FlagListGrid, Mode=OneWay}" Orientation="Horizontal" ScrollViewer.HorizontalScrollBarVisibility="Disabled" />
                </ItemsPanelTemplate>

            </Setter.Value>
        </Setter>
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <CheckBox Width="20" Height="18" VerticalAlignment="Top" IsChecked="{Binding IsSelected, Mode=TwoWay}" />
                        <TextBlock Width="180" MinHeight="18" VerticalAlignment="Center" Text="{Binding Description}" TextWrapping="Wrap" />
                    </StackPanel>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>

不幸的是，我无法向您展示完成结果的图像，但我希望这些指针可以帮助您解决类似问题

如何使用Silverlight中的ItemsControl实现复杂的UI

1 个答案: