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>

为您提供如下布局：

layout picture

当然，有很多方法可以实现这种布局，因此请了解您可以使用的内容以及如何使用它们来实现您的目标。

要添加另一行来放置您的商品，您需要执行以下操作。

在RowDefinition添加新的RowDefinitions，根据需要指定高度。
将位于新行下方的所有控件向下移动一个（通过向其Grid.Row添加1）。
任何跨越多行且正在被此新行剪切的控件也应增加1（通过向其Grid.RowSpan添加1）。

关注设计师，它真的可以帮助你。

designer view

因此，对于此示例，要进行这些调整，您可以执行此操作：

<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>

它产生以下结果：

layout view v2

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

1 个答案: