Question

我正在尝试创建自定义ListBox。这会收到一个包含三个属性的列表：

主旨名称问题 AverageScore

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

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

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

enter image description here

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

更新1：

这样的事情：

enter image description here

根据图表，第一个堆叠面板（背景水色）必须包含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>

Answer 1

您需要使用嵌套的ItemsControls - 一个用于Vertical列表，一个用于Horizontal List。

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

Answer 2

在ItemsControl.ItemsPanel中，使StackPanel方向为Horizoantal

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

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

3 个答案: