Создание макета для простого интерфейса медиаплеера

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. Сдвиньте все элементы управления, которые будут находиться ниже новой строки, на единицу (добавив 1 к Grid.Row).
3. Любые элементы управления, которые охватывают несколько строк и обрезаются этой новой строкой, также должны быть увеличены на единицу (путем добавления 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>

Это дает следующий результат: