如何在XAML/Silverlight右上角佈局控件？

Question

我會通過基於Silverlight的4. PivotViewer控制設計我的第一個Silverlight應用程序的過程中，我組織在上面按我的設計中的要求有問題：

Pivot UI http://www.richard-slater.co.uk/wp-content/uploads/2010/08/PivotUI.png

我發現將徽標和標題左對齊的方式，這是一種將按鈕與各種面板組合對齊的方式，但存在兩個主要問題。

1. 該XAML看起來真的很醜，嵌套面板似乎工作，但似乎不是很好的做法。
2. 我似乎無法找到處理向下調整窗口的大小沒有任何限幅或重疊的方式。

我已經來達到的用下面的代碼的最好成績：

<StackPanel x:Name="LayoutHeader" Margin="4" Height="50" Grid.Column="0" Grid.Row="0" Orientation="Horizontal"> 
    <Image x:Name="LogoImage" Height="50" Width="50" Source="/EVEMonPivot;component/EVEMonLogoBlue.png" Grid.Column="0" Grid.Row="0" /> 
    <TextBlock x:Name="TitleText" Height="50" Text="EVEMon Pivot" FontSize="40" Grid.Column="1" Grid.Row="0" VerticalAlignment="Center" FontWeight="Bold" Padding="10,0,0,0" /> 
</StackPanel> 
<StackPanel x:Name="NavHeader" Margin="4" Height="50" Grid.Column="0" Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Right"> 
    <Button x:Name="StackExButton" Style="{StaticResource NavButton}" Click="StackExButton_Click">EVE Online StackExchange</Button> 
    <Button x:Name="BugsButton" Style="{StaticResource NavButton}">Bugs &amp; Suggestions</Button> 
</StackPanel> 

我打算將一些特性爲風格，但它仍然感覺凌亂。

上面的代碼還可以導致以下的小窗口：

alt text http://www.richard-slater.co.uk/wp-content/uploads/2010/08/EVEMonPivotOverLay.png

有沒有更好的辦法？

Answer 1

如果你不喜歡築巢板，網格可能是一個更好的選擇。有了您的四大要素，有五柱網這樣的：

<Grid HorizontalAlignment="Stretch"> 
    <Grid.ColumnDefinitions> 
    <ColumnDefinition Width="Auto"/> 
    <ColumnDefinition Width="Auto"/> 
    <ColumnDefinition Width="*"/> 
    <ColumnDefinition Width="Auto"/> 
    <ColumnDefinition Width="Auto"/> 
    </Grid.ColumnDefinitions> 
    <Image x:Name="LogoImage" 
      Height="50" 
      Width="50" 
      Source="/EVEMonPivot;component/EVEMonLogoBlue.png" 
      Grid.Column="0" /> 
    <TextBlock x:Name="TitleText" 
       Height="50" 
       Text="EVEMon Pivot" 
       FontSize="40" 
       Grid.Column="1" 
       Grid.Row="0" 
       VerticalAlignment="Center" 
       FontWeight="Bold" 
       Padding="10,0,0,0" /> 
    <Button x:Name="StackExButton" 
      Grid.Column="4" 
      Style="{StaticResource NavButton}" 
      Click="StackExButton_Click">EVE Online StackExchange</Button> 
    <Button x:Name="BugsButton" 
      Grid.Column="5" 
      Style="{StaticResource NavButton}">Bugs &amp; Suggestions</Button> 
</Grid> 

這臺四列自動大小，所以他們調整到你的UI元素的大小和中心柱是星大小，因此填補他們之間的空間的其餘部分。

Answer 2

雖然你可以使用一個明星級網格列執行的控制之間的可摺疊區域，你還是留下來解釋發生了什麼時，我們確實沒有足夠的空間（例如，在顯示器的600個像素400像素寬的區域）。我認爲你需要的是一個ScrollViewer，它是一個可以讓你確定滾動條何時出現的ContentControl。

在下面的標記中，我做了兩件事：首先，我使用Silverlight工具包的DockPanel來隔離顯示的左側和右側部分（一個非常類似的事情可以用Cols 0的3列Grid和2設置爲「自動」和Col 1設置爲「*」，但在DockPanel中的具體使用左，右的可能使意圖更具可讀性。）其次，整個事情是被包裹在一個ScrollViewer中與Horizo​​ntalScrollBarVisibility集到「自動」 - 當內容太大而不適合時，放置一個滾動條。

<UserControl xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" x:Class="SilverlightApplication2.MainPage" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
mc:Ignorable="d" 
d:DesignHeight="300" d:DesignWidth="400"> 

<Grid x:Name="LayoutRoot" Background="White"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto"/> 
     <RowDefinition Height="*"/> 
    </Grid.RowDefinitions> 
    <ScrollViewer Grid.Row="0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"> 
     <toolkit:DockPanel > 
      <StackPanel toolkit:DockPanel.Dock="Left" Orientation="Horizontal" VerticalAlignment="Top" Height="50" Margin="5"> 
       <TextBlock Text="Some long text" FontSize="30"/> 
      </StackPanel> 
      <StackPanel toolkit:DockPanel.Dock="Right" Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Right" Height="50" Margin="5"> 
       <Button Content="First Button" Margin="5"/> 
       <Button Content="Second Button" Margin="5"/> 
      </StackPanel> 
     </toolkit:DockPanel> 
    </ScrollViewer> 
    <TextBlock Grid.Row="1" Text="Body Content (DataGrid, etc.)" HorizontalAlignment="Center" VerticalAlignment="Center"/> 
</Grid>