CODEWITHSUNDEEP
wpf
Valamas
Valamas

Reputation: 24749

How to have filled video at top and show label at bottom. (Fill and Anchor)

In Winforms, I use Fill and Dock to achieve this.

I have a "Page" where I would like to play a video file and also show the label at the bottom. I would like the page to be able to stretch and for the video to stretch and to have the label stay at the bottom of the page.

My attempts so far always results in the video covering the label when it is played. How can this be fixed?

(Other controls in the StackPanel have been omitted)

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      x:Class="SDKSample.MediaElementExample" >

    <DockPanel LastChildFill="True">
        <MediaElement Source="media\numbers.wmv" Name="myMediaElement" 
            LoadedBehavior="Manual" UnloadedBehavior="Stop" 
            MediaOpened="Element_MediaOpened" MediaEnded="Element_MediaEnded" 
            DockPanel.Dock="Top" Margin="50" />
        <StackPanel HorizontalAlignment="Center" Orientation="Horizontal" 
                Height="30"  DockPanel.Dock="Bottom" Margin="50">
                <TextBlock Margin="5"  VerticalAlignment="Center">
                Video Label
                </TextBlock>
        </StackPanel>
    </DockPanel>
</Page>

Solution (with thanks to Daniel May):

<Grid Height="Auto">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="30"/>
    </Grid.RowDefinitions>

    <MediaElement Source="media\numbers.wmv" Name="myMediaElement" LoadedBehavior="Manual" UnloadedBehavior="Stop" 
     MediaOpened="Element_MediaOpened" MediaEnded="Element_MediaEnded" />
    <StackPanel HorizontalAlignment="Center" Orientation="Horizontal" Height="30" Grid.Row="1">
        <Button Content="Button" Height="23" Name="button1" Width="75" Click="button1_Click" />
    </StackPanel>
</Grid>

Upvotes: 1

Views: 217

Answers (1)

Daniel May
Daniel May

Reputation: 8226

You can achieve this using a Grid.

<Grid Height="300" Width="300">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
    <MediaElement Source="media\numbers.wmv" 
            Name="myMediaElement" 
            LoadedBehavior="Manual" 
            UnloadedBehavior="Stop" 
            MediaOpened="Element_MediaOpened" 
            MediaEnded="Element_MediaEnded" />
    <TextBlock Margin="5" 
            Grid.Row="1"
            VerticalAlignment="Center"
            Text="Video Label" />
</Grid>

Using the Height attribute on the second RowDefinition, you force that row to size to it's contents. The preceding RowDefinition then fills the rest of the available space (in your case, your MediaElement).

Upvotes: 1

Related Questions