如何将项目控件中的数据绑定到堆栈面板？答案

【问题标题】：How to bind data in an item control to stack panel?如何将项目控件中的数据绑定到堆栈面板？
【发布时间】：2011-08-13 01:55:38
【问题描述】：

我正在尝试创建一个自定义列表框。接收一个包含三个属性的列表：

主题名称问题平均分

Problems 属性是另一个包含多个问题类的列表。这是我正在创建的数据模板。

    <DataTemplate x:Key="SubjectDataTemplate">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="200"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="100"/>
            </Grid.ColumnDefinitions>
            <StackPanel Margin="5">
                <StackPanel Orientation="Horizontal" TextBlock.FontWeight="Bold" >
                    <TextBlock Text="{Binding Path=ProblemNumber, FallbackValue=ProblemNumber}" />
                    <TextBlock Text="{Binding Path=SubjectName, FallbackValue=SubjectName}" Padding="3,0,0,0"/>
                </StackPanel>
                <TextBlock Text="{Binding Path=AverageScore, FallbackValue=AverageScore}" />
                <ItemsControl ItemsSource="{Binding Problems}">
                    <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <StackPanel Background="Aqua" Orientation="Vertical" Margin="5">
                                <Rectangle Fill="Red" Height="20" Width="20" />
                            </StackPanel>
                        </Grid>
                    </DataTemplate>
                    </ItemsControl.ItemTemplate>
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                </ItemsControl>
                <!--<TextBlock Text="{Binding Path=Role, FallbackValue=Role}" />-->
            </StackPanel>
        </Grid>
    </DataTemplate>

但我在尝试显示问题数据时遇到了问题。我试图在水平方向的堆栈面板中显示问题列表中的每个元素，但我将每个堆栈面板分开。

我需要将红色矩形放在堆栈控件中。例如，Times Tables 中的十个矩形应该在一个堆栈面板中。

更新 1：

类似这样的：

根据图表，第一个堆栈面板（背景水色）必须包含 10 个红色矩形。

更新 2：

我正在验证在 textBlock 中显示来自问题的数据并且它有效：

                <ItemsControl ItemsSource="{Binding Problems}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding IsCorrect}" />
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>


                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal" Background="Gainsboro" Margin="5" />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                </ItemsControl>

【问题讨论】：

标签： c# wpf

【解决方案1】：

您需要使用嵌套的 ItemsControls - 一个用于垂直列表，一个用于水平列表。

<ItemsControl ItemsSource="{Binding Problems}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <ItemsControl ItemsSource="{Binding Problems}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Rectangle Height="20" Width="20" Margin="1,0">
                            <Rectangle.Style>
                                <Style TargetType="{x:Type Rectangle}">
                                    <Setter Property="Fill" Value="Red" />
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding IsCorrect}" Value="True">
                                            <Setter Property="Fill" Value="Blue" />
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </Rectangle.Style>
                        </Rectangle>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </DataTemplate>
     </ItemsControl.ItemTemplate>
     <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Background="Aqua" Margin="5" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

【讨论】：

你做到了，瑞秋！还有一件事：Problems 包含一个名为 IsCorrect（布尔值）的属性。当属性为假时，我想显示一个红色矩形，当该属性为真时显示蓝色
@oscar.fimbres 在 Rectangle 样式中使用 DataTrigger。查看我的编辑。
但是我有一个疑问，是不是需要从Problems中提取类Problem？
@oscar.fimbres 将您的 DataTrigger 更改为 Problem.IsCorrect 然后
抱歉我的无知，我是 WPF 的新手。问题是 List 是否有问题？因为它仍然总是出现红色矩形。

【解决方案2】：

在您的 ItemsControl.ItemsPanel 中使 StackPanel 方向为水平

【讨论】：

好的，只是把红色矩形移到左边
尝试在您的 ItemsControl 中将 HorizontalContentAlignment 设置为 Left

【解决方案3】：

这是你要找的吗？

更新：

<DataTemplate x:Key="SubjectDataTemplate">
        <Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="200"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="100"/>
    </Grid.ColumnDefinitions>
    <StackPanel Margin="5">
        <StackPanel Orientation="Horizontal" TextBlock.FontWeight="Bold" >
            <TextBlock Text="{Binding Path=ProblemNumber, FallbackValue=ProblemNumber}" />
            <TextBlock Text="{Binding Path=SubjectName, FallbackValue=SubjectName}" Padding="3,0,0,0"/>
        </StackPanel>
        <TextBlock Text="{Binding Path=AverageScore, FallbackValue=AverageScore}" />
            <ItemsControl ItemsSource="{Binding Problems}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <Rectangle Fill="Red" Height="20" Width="20" />
                        </StackPanel>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel  Background="Aqua" Orientation="Horizontal" Margin="5"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
    </StackPanel>
</Grid>
</DataTemplate>

【讨论】：

不，它仍然在每个堆栈面板中显示红色矩形
对不起，我想我对你想要完成的事情有点困惑。