Question

I’m trying to create a simple media player interface using WPF. Though I’m a little familiar with Adobe Flex, I’ve never touched WPF before. Here’s a mock-up of what I’m trying to do: http://i53.tinypic.com/xdcbd.png

The blue buttons are for switching between images, audio or video. Clicking on either one of them simply changes the data source or content of the scrollable “item list”. Clicking on anything in the item list displays the selected item’s properties, while double clicking on it plays the item in the MediaElement in the center. Both the item list and detailed properties are retrieved from a server.

All I need help with at this point is to create a layout as described above. The problem is that I’m not really sure of where to begin. Could anyone give me some tips or point me to some sites that provide basic samples/tutorials on what I’m trying to do? Most of the tutorials I’ve found so far are either too in-depth or irrelevant.

Answer 1

Using a Grid in this case could be very useful as you have pretty well defined positions and relative sizes for your controls.

To use it, create rows and columns for your grid and add your controls specifying which cells it should fill.

e.g.,

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

Gives you a layout that looks like this:

Of course there are many ways to achieve this layout, so learn what’s available to you and how you can use them to achieve what you want.

---

To add another row to place your items in, there’s a couple of things you would need to do.

1. Add a new RowDefinition to the RowDefinitions specifying the height if necessary.
2. Shift all controls that would lie below the new row down one (by adding 1 to its Grid.Row).
3. Any controls that span multiple rows and is being cut by this new row should be increased by one as well (by adding 1 to its Grid.RowSpan).

Pay attention to the designer, it can really help you here.

So for this example, to make those adjustments, you could do this:

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

It produces the following result: