为简单的媒体播放器界面创建布局

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> 

这将产生以下结果：