Question

如何使用可观察集合中的对象填充两列网格？

我试图通过使用takeits包装面板来实现这种效果，但这些项目只是堆叠。

<toolkit:WrapPanel Margin="5,0,0,0" Width="400">
    <ItemsControl ItemsSource="{Binding Trips}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <StackPanel Height="236" Width="182">
                    <Button Style="{StaticResource VasttrafikButtonTrip}">
                        <StackPanel Width="152" Height="140">
                            <TextBlock Text="{Binding FromName}" />
                            <TextBlock FontFamily="Segoe WP Semibold" Text="till" />
                            <TextBlock Text="{Binding ToName}" />
                        </StackPanel>
                    </Button>
                    <TextBlock HorizontalAlignment="Left" Width="160" FontSize="16" FontWeight="ExtraBlack" Text="{Binding TravelTimeText}" />
                    <TextBlock HorizontalAlignment="Left" Width="160" Margin="0,-6,0,0" FontSize="16" Text="{Binding TransferCountText}" />
                </StackPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</toolkit:WrapPanel>

Answer 1

WrapPanel的唯一孩子将是ItemsControl，因此堆叠工作由ItemsPanel中的内部ItemsControl完成，默认情况下为StackPanel 1}}具有垂直方向。因此要获得“两列”，请尝试将WrapPanel移至ItemsControl.ItemsPanel，而不是像这样

<ItemsControl ItemsSource="{Binding Trips}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <toolkit:WrapPanel Margin="5,0,0,0" Width="400"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Height="236" Width="182">
                <Button Style="{StaticResource VasttrafikButtonTrip}">
                    <StackPanel Width="152" Height="140">
                        <TextBlock Text="{Binding FromName}" />
                        <TextBlock FontFamily="Segoe WP Semibold" Text="till" />
                        <TextBlock Text="{Binding ToName}" />
                    </StackPanel>
                </Button>
                <TextBlock HorizontalAlignment="Left" Width="160" FontSize="16" FontWeight="ExtraBlack" Text="{Binding TravelTimeText}" />
                <TextBlock HorizontalAlignment="Left" Width="160" Margin="0,-6,0,0" FontSize="16" Text="{Binding TransferCountText}" />
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

用数据绑定填充两列网格？

1 个答案: