Windows 8 XAML布局问题-屏幕右侧的定位控件

我正在努力理解xaml控件如何帮助我完成以下布局：

我有一个三列布局。最左边和中间的列都有列表视图。最右边的列只有一个可单击（可点击）的堆栈面板，可以在其他地方导航。我希望这个stackpanel被锚定在页面的右侧，中间向下（即在CSS中，我会说right:0，top:50%）

我的XAML在下面。我的策略是创建一个包含所有3列的水平父stackpanel，以及一个垂直stackpanel，在最左边和中间的列中的listview控件顶部有一个textblock。但是，第三个stackpanel以一些意外的方式运行：

它不会填充第二个堆栈面板右侧剩余的水平空间。它似乎更喜欢只占用子控件所需的空间。这意味着我必须为子元素分配静态值，以尝试将可单击控件与页面右侧对齐。这意味着，当屏幕分辨率与我设计的不同时，此可单击控件将位于页面右侧或页面中间

我无法强制第三列中的clickable元素（stackpanel，或我尝试使用的任何其他控件）在页面的中间移动。正如我上面提到的，我希望它位于页面的一半，但它顽固地位于其面板的顶部 我看过canvas控件，但不希望它是静态的——这在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>

#FFFFFF
#FFFFFF

堆叠面板仅根据需要为其子元素提供足够的空间。我建议如下：

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

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

---

这是堆叠面板，可拉伸以适合立柱。

太棒了，谢谢奈杰尔！很抱歉耽搁了这么久，我已经好几个星期没来办公室了。这就是我需要的。有没有办法使前两列拉伸以填充除最右边列定义的像素宽度以外的所有内容？正如您所建议的，我使用的是HorizontalAlignment=“Stretch”，但前两列占用的空间似乎仍然远远小于可用的空间。列定义中的宽度可以像width=“200”一样大小，其他两列将占用其余空间的一半。看一看可以布置网格的不同方式。