在 Windows 应用商店应用程序中垂直对齐 ListBox 的内容答案

【问题标题】：Vertically aligning the contents of a ListBox in a Windows Store app在 Windows 应用商店应用程序中垂直对齐 ListBox 的内容
【发布时间】：2014-01-22 16:42:50
【问题描述】：

我有一个带有 ListBox 的 Windows 应用商店应用程序，其中包含可变高度的网格。我无法让这些在顶部对齐。我已经尝试了我能想到的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 应用商店应用程序中。此代码在 WPF 中完美运行，因此造成混乱。但是它不适用于 Windows Store 应用程序

【问题讨论】：

-1 未在发布您的问题之前测试您的代码。
如果 Sheridan 的回答不正确，请澄清。
我已经离开我的机器一整天了。无论谁否决了您的回答，显然是其他人不赞成您的卑鄙举止。只是为了澄清它仍然对我不起作用。截图：dl.dropboxusercontent.com/u/568631/Untitled.png
@roryok，我无法道歉。我承认你没有对我投反对票，我很抱歉跳到错误的结论……那一定很烦人。但是，我对您的代码的观点仍然存在。我刚刚重新测试了您的所有代码，包括您的新代码，它仍然可以正常工作。我能看到的唯一区别是我使用了Window，而您使用的是Page。这很奇怪...如果您将您的代码复制到新 WPF 应用程序中的MainWindow.xaml 中，那么您还会发现它工作得很好。一定还有其他你没有在这里添加的东西。
请按照帮助中心How to create a Minimal, Complete, Tested and Readable example 页面中的步骤提供一个完整而简洁的代码示例，该示例仍然可以说明您的问题，我们都可以再看一遍。

标签： c# xaml listbox windows-store-apps

【解决方案1】：

您是否尝试过将 ItemContainerStyle 设置为 VerticalAlignment="Top"

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

【讨论】：