在Windows Store应用中垂直对齐ListBox的内容

Question

我有一个Windows Store应用程序，其中包含高度不同的网格列表框（ListBox）。我无法使它们顶部对齐。我尝试了各种VerticalAlignment和VerticalContentAlignment组合，但它们总是在垂直方向上居中。

以下是我的XAML代码：

<Page 
    x:Class="MyApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <Grid Margin="50,50,50,50" HorizontalAlignment="Stretch" Width="Auto">
            <Grid.RowDefinitions>
                <RowDefinition Height="50"></RowDefinition>
                <RowDefinition Height="80"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
            </Grid.RowDefinitions>

            <TextBlock Grid.Row="0" Text="" Margin="12,0,0,0" Style="{StaticResource HeaderTextStyle}" />
            <Grid Grid.Row="1" Margin="30,0,0,0"> 
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="300"></ColumnDefinition>
                    <ColumnDefinition Width="15"></ColumnDefinition>
                    <ColumnDefinition Width="100"></ColumnDefinition>
                    <ColumnDefinition Width="15"></ColumnDefinition>
                    <ColumnDefinition Width="1*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <TextBox Grid.Column="0" x:Name="bxAddItem" Width="300" Height="28" Margin="0,0,0,0" Text="Item text" KeyUp="bxAddItem_KeyUp" GotFocus="bxAddItem_GotFocus" LostFocus="bxAddItem_LostFocus"></TextBox>
                <ComboBox Grid.Column="2" x:Name="comboList" SelectionChanged="comboList_SelectionChanged" Width="100" Height="32">
                    <ComboBoxItem Tag="0">No List</ComboBoxItem>
                </ComboBox>
                <Button Grid.Column="4" x:Name="btnAddItem" Click="AddItem_Click" HorizontalAlignment="Left" Background="#45000000" Height="34">Add an Item</Button>
            </Grid>


            <ScrollViewer HorizontalScrollBarVisibility="Visible" Grid.Row="2">
                <ListBox Width="Auto" VerticalContentAlignment="Top" ItemsSource="{Binding ToDoLists}">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Grid Background="Beige">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="50"></RowDefinition>
                                    <RowDefinition Height="*"></RowDefinition>
                                </Grid.RowDefinitions>
                                <TextBlock Text="{Binding Title}"></TextBlock>
                                <ListBox Grid.Row="1" Grid.Column="0" Name="ToDoList" ItemsSource="{Binding Path=Items}"
                                            Margin="24,0,0,0" Height="Auto" MinWidth="200" VerticalAlignment="Stretch" 
                                            BorderBrush="BlueViolet" SelectionChanged="ToDoList_SelectionChanged">
                                    <ListBox.ItemTemplate>
                                        <DataTemplate>
                                            <Grid>
                                                <TextBlock Text="{Binding ItemName}"></TextBlock>
                                            </Grid>
                                        </DataTemplate>
                                    </ListBox.ItemTemplate>
                                    <ItemsControl.ItemsPanel>
                                        <ItemsPanelTemplate>
                                            <VirtualizingStackPanel Orientation="Vertical"/>
                                        </ItemsPanelTemplate>
                                    </ItemsControl.ItemsPanel>
                                </ListBox>
                            </Grid>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel VerticalAlignment="Top" Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                </ListBox>
            </ScrollViewer>

        </Grid>
    </Grid>
</Page>

编辑：

Sheridan的答案对我无效。页面上可能有其他原因导致此问题。

我已更新问题，包括整个页面代码。

编辑2：

这篇文章被错误地标记为WPF，实际上问题出在Windows Store应用程序中。这段代码在WPF中完美运作，因此引起了混淆。但是，在Windows Store应用程序中却不起作用。

- roryok

---

在发布问题之前不测试你的代码，得到-1分。 - Sheridan

如果Sheridan的答案不正确，请澄清。 - paparazzo

我整天都离开了我的电脑。无论谁给你的答案投了反对票，显然是其他人不喜欢你那糟糕的态度。只是为了澄清，这个方法对我仍然不起作用。截图：https://dl.dropboxusercontent.com/u/568631/Untitled.png - roryok

@roryok，我再次向你道歉。我承认你没有对我进行负面评价，我为错误的结论感到抱歉...那一定很烦人。然而，我的观点关于你的代码仍然存在。我刚刚重新测试了你的所有代码，包括你的新代码，它仍然可以正常工作。我唯一能看到的区别是我使用了“Window”，而你使用了“Page”。这非常奇怪...如果你将你的代码复制到新的WPF应用程序的“MainWindow.xaml”中，那么你也会看到它可以正常工作。一定还有其他因素在起作用，你没有在这里添加。 - Sheridan

啊，那就解释了一切...不幸的是，我没有Windows 8，所以无法为您找到解决方案。在您编辑问题后，我的原始投票也已被取消。 - Sheridan

Answer 1

你尝试过将ItemContainerStyle设置为VerticalAlignment="Top"吗？这可以使内容在垂直方向上对齐顶部。

<ListBox.ItemContainerStyle>
    <Style TargetType="ListBoxItem">
            <Setter Property="VerticalAlignment" Value="Top"></Setter>
        </Style>
</ListBox.ItemContainerStyle>

- ChristiaanV