Windows 8的XAML佈局問題 - 在屏幕上

Question

我掙扎理解XAML控件可以怎樣幫助我完成了以下佈局的右側錨控制：

我有一個3欄佈局。最左邊和中間的列有列表視圖。最右邊的列只有一個可點擊（可點擊）的導航欄，可以在其他地方導航。我希望這個堆棧面板在頁面的右側，半路下去（即在CSS中，我會說右：0，頂：50％）。

我的XAML如下。我的策略是創建一個包含所有3列的水平父級StackPanel，以及在最左側和中間列中的ListView控件頂部帶有文本塊的垂直堆棧面板。但是，第三個堆疊面板會以某些意外的方式運行：

1. 它不填充第二個堆疊面板右側的水平空間。它似乎更願意只佔用其子控制所需的任何空間。這意味着我必須將靜態值分配給子元素，以嘗試將可點擊的控件與頁面的右側對齊。這意味着，當屏幕分辨率與我設計的屏幕分辨率不同時，此可點擊控件將位於頁面右側或頁面中間。
2. 我不能強制在第三列（stackpanel或任何其他我試圖使用的控件）中的可點擊元素在頁面中間移動一半。正如我上面提到的，我希望它在頁面的一半處，但它固執地位於其包含的堆疊面板的頂部。

我已經看過畫布控件，但不希望它是靜態的 - 這在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

StackPanels只爲需要的子元素提供足夠的空間。我會建議如下：

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

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

這是堆棧面板延伸適合列。