Scenario4_AddOverlays.xaml

<!--
//*********************************************************
//
// Copyright (c) Microsoft. All rights reserved.
// This code is licensed under the MIT License (MIT).
// THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF
// ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY
// IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR
// PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
//
//*********************************************************
-->
<Page
    x:Class="SDKTemplate.Scenario4_AddOverlays"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SDKTemplate"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="720"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="chooseOverlayVideo.(RelativePanel.AlignTopWith)" Value="chooseBaseVideo" />
                        <Setter Target="chooseOverlayVideo.(RelativePanel.RightOf)" Value="chooseBaseVideo" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="chooseOverlayVideo.(RelativePanel.AlignLeftWith)" Value="chooseBaseVideo" />
                        <Setter Target="chooseOverlayVideo.(RelativePanel.Below)" Value="chooseBaseVideo" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid x:Name="RootGrid" Margin="14,22,10,10">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <StackPanel Margin="0,0,0,10">
                <TextBlock Text="Description:" Style="{StaticResource SampleHeaderTextStyle}"/>
                <TextBlock Style="{StaticResource ScenarioDescriptionTextStyle}" TextWrapping="Wrap">
                        Using Windows.Media.Editing API to add overlays to a composition.
                </TextBlock>
            </StackPanel>

            <ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
                <RelativePanel HorizontalAlignment="Stretch">
                    <MediaElement x:Name="mediaElement" AutoPlay="False" Margin="5" HorizontalAlignment="Stretch" AreTransportControlsEnabled="True" />
                    <Button x:Name="chooseBaseVideo" Content="1. Choose Base Video" Click="ChooseBaseVideo_Click" Margin="5" RelativePanel.AlignLeftWith="mediaElement" RelativePanel.Below="mediaElement" />
                    <Button x:Name="chooseOverlayVideo" Content="2. Choose Overlay Video" Click="ChooseOverlayVideo_Click" IsEnabled="False" Margin="5" />
                </RelativePanel>
            </ScrollViewer>
        </Grid>
    </Grid>
</Page>