Windows 8 XAML 布局问题 - 屏幕右侧的锚点控件

Question

我很难理解 xaml 控件如何帮助我完成以下布局：

我有一个 3 列布局。最左边和中间的列有列表视图。最右边的列只是有一个可点击（可点击）的堆栈面板，可以导航到其他地方。我希望这个堆栈面板锚定在页面的右侧，中间向下（即在 CSS 中我会说正确：0，顶部：50%）。

我的 XAML 在下面。我的策略是创建一个包含所有 3 列的水平父堆栈面板，以及一个在最左侧和中间列的列表视图控件顶部带有文本块的垂直堆栈面板。然而，第三个堆栈面板以一些意想不到的方式表现：

1. 它不会填充第二个堆栈面板右侧剩余的水平空间。它似乎更喜欢只占用其子控件所需的空间。这意味着我必须为子元素分配静态值，以尝试将可点击控件与页面右侧对齐。这意味着当屏幕分辨率与我设计的不同时，这个可点击的控件将不在页面的右侧，或者在页面的中间。
2. 我无法强制第三列中的可点击元素（堆栈面板或我尝试使用的任何其他控件）移动到页面的一半。正如我上面提到的，我希望它位于页面的中间，但它固执地位于其包含堆栈面板的顶部。

我查看了画布控件，但不希望它是静态的 - 这在 CSS 中很容易，我不知道为什么它在 XAML 中如此复杂。

 <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Style="{StaticResource LayoutRootStyle}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1160"/>
            <ColumnDefinition Width="206"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>



        <!-- Back button and page title -->
        <Grid Grid.ColumnSpan="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
            <TextBlock x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}"/>
        </Grid>

        <StackPanel Orientation="Horizontal" Grid.Row="1" HorizontalAlignment="Stretch" Grid.ColumnSpan="2">
            <StackPanel 
                Orientation="Vertical"
                Margin="0,0,40,0">
                <StackPanel
                Height="100"
                Width="400"
                HorizontalAlignment="Left"
                Margin="40,15,0,0">
                    <StackPanel.Background>
                        <SolidColorBrush>
                            <Color>#FFFFFF</Color>
                        </SolidColorBrush>
                    </StackPanel.Background>
                    <TextBlock
                    Text="Announcements"
                    FontSize="42"
                    FontWeight="Light"
                    TextAlignment="Left"
                    Padding="0,25,25,25">
                    </TextBlock>
                </StackPanel>
                <ListView 
                HorizontalAlignment="Left" 
                Height="475"
                Margin="40,15,0,0" 
                VerticalAlignment="Top" 
                Width="400" 
                ItemsSource="{Binding Incidents}" 
                IsItemClickEnabled="True" 
                SelectionMode="None" 
                ItemTemplate="{StaticResource Standard130ItemTemplate}" 
                ItemClick="Item_Click" >
                </ListView>
            </StackPanel>



            <StackPanel 
                Orientation="Vertical" 
                Margin="40,0,0,0">
                <StackPanel
                Height="100"
                Width="600"
                HorizontalAlignment="Right"
                Margin="0,15,40,0">
                    <StackPanel.Background>
                        <SolidColorBrush>
                            <Color>#FFFFFF</Color>
                        </SolidColorBrush>
                    </StackPanel.Background>
                    <TextBlock
                    Text="News from Yammer"
                    FontSize="42"
                    FontWeight="Light"
                    TextAlignment="Left"
                    Padding="0,25,25,25">
                    </TextBlock>
                </StackPanel>
                <ListView 
                HorizontalAlignment="Left" 
                Height="475"
                Margin="40,15,0,0" 
                VerticalAlignment="Top" 
                Width="Auto" 
                ItemsSource="{Binding Incidents}" 
                IsItemClickEnabled="True" 
                SelectionMode="None" 
                ItemTemplate="{StaticResource Standard130ItemTemplate}" 
                ItemClick="Item_Click" >
                </ListView>
            </StackPanel>

            <StackPanel Background="AliceBlue" Width="206" Height="628">
                <TextBlock x:Name="stackPanel" Background="Black" Height="50" Width="20" HorizontalAlignment="Right" Margin="10,100,10,0" Opacity="0"/>
            </StackPanel>

        </StackPanel>

Answer 1

StackPanel 仅根据需要为其子元素提供足够的空间。我会推荐以下内容：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <StackPanel Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Center">
        <!-- Right most column  -->
    </StackPanel>
</Grid>

这是为了适应列而拉伸的堆栈面板。