爲簡單的媒體播放器界面創建佈局

Question

我正在嘗試使用WPF創建簡單的媒體播放器界面。雖然我對Adobe Flex有點熟悉，但我從未接觸過WPF。這裏是我想要做的模型：http://i53.tinypic.com/xdcbd.png

藍色按鈕用於切換圖像，音頻或視頻。點擊其中任何一個只需更改可滾動「項目列表」的數據源或內容即可。單擊項目列表中的任何內容都會顯示所選項目的屬性，而雙擊它會播放中心的MediaElement中的項目。項目列表和詳細屬性都從服務器中檢索。

在這一點上我需要幫助的是創建一個如上所述的佈局。問題是我不確定從哪裏開始。任何人都可以給我一些提示，或者指向一些提供基本樣本/教程的網站，以瞭解我正在嘗試做什麼？到目前爲止，我發現的大多數教程要麼太深入，要麼不相關。

Answer 1

在這種情況下使用Grid可能非常有用，因爲您的控件具有相當明確的位置和相對大小。

要使用它，請爲您的網格創建行和列，並添加控件以指定它應該填充的單元格。

例如，

<Grid Background="White"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="4*" /> 
     <RowDefinition /> 
     <RowDefinition Height="Auto" /> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition /> 
     <ColumnDefinition Width="3*" /> 
    </Grid.ColumnDefinitions> 

    <ListBox x:Name="itemList" Grid.Row="0" Grid.Column="0" Background="Green" /> 
    <UserControl x:Name="infoPanel" Grid.Row="1" Grid.RowSpan="2" Grid.Column="0" Background="Yellow" /> 

    <UserControl x:Name="mediaElement" Grid.Row="0" Grid.RowSpan="2" Grid.Column="1" Background="Blue" /> 
    <StackPanel Grid.Row="2" Grid.Column="1" Background="Red" 
       Orientation="Horizontal" HorizontalAlignment="Center"> 
     <StackPanel.Resources> 
      <Style TargetType="Button"> 
       <Setter Property="Margin" Value="5" /> 
       <Setter Property="Background" Value="Aqua" /> 
      </Style> 
     </StackPanel.Resources> 

     <Button>button1</Button> 
     <Button>button2</Button> 
     <Button>button3</Button> 
    </StackPanel> 
</Grid> 

給你一個佈局，看起來像這樣：

當然也有很多方法可以實現這一佈局，所以要學會什麼是提供給您，以及如何你可以使用它們來實現你想要的。

---

要添加另一行來放置您的項目，您需要做幾件事。

1. 將新的RowDefinition添加到RowDefinitions，指定高度（如有必要）。
2. 將所有位於新行下方的控件移到下一個（將Grid.Row加1）。
3. 跨越多行且正在被此新行剪切的任何控件也應該增加1（通過將其加1到Grid.RowSpan）。

注意設計師，它可以真正幫助你在這裏。

所以在這個例子中，作出這些調整，你可以這樣做：

<Grid Background="White"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="4*" /> 
     <RowDefinition Height="25" /> 
     <RowDefinition /> 
     <RowDefinition Height="Auto" /> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition /> 
     <ColumnDefinition Width="3*" /> 
    </Grid.ColumnDefinitions> 

    <ListBox x:Name="itemList" Grid.Row="0" Grid.Column="0" Background="Green" /> 
    <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center" Background="Orange"> 
     <StackPanel.Resources> 
      <Style TargetType="Button"> 
       <Setter Property="Margin" Value="5,0,5,0" /> 
       <Setter Property="Background" Value="Turquoise" /> 
      </Style> 
     </StackPanel.Resources> 

     <Button>button4</Button> 
     <Button>button5</Button> 
    </StackPanel> 
    <UserControl x:Name="infoPanel" Grid.Row="2" Grid.RowSpan="2" Grid.Column="0" Background="Yellow" /> 

    <UserControl x:Name="mediaElement" Grid.Row="0" Grid.RowSpan="3" Grid.Column="1" Background="Blue" /> 
    <StackPanel Grid.Row="3" Grid.Column="1" Background="Red" 
      Orientation="Horizontal" HorizontalAlignment="Center"> 
     <StackPanel.Resources> 
      <Style TargetType="Button"> 
       <Setter Property="Margin" Value="5" /> 
       <Setter Property="Background" Value="Aqua" /> 
      </Style> 
     </StackPanel.Resources> 

     <Button>button1</Button> 
     <Button>button2</Button> 
     <Button>button3</Button> 
    </StackPanel> 
</Grid> 

這將產生以下結果：