Skip to content

Commit f7e3bb4

Browse files
jowang-msftjowang-msft
committed
Fixed sample markups
1 parent b2530cb commit f7e3bb4

File tree

1 file changed

+56
-24
lines changed

1 file changed

+56
-24
lines changed

‎articles/communication-services/quickstarts/voice-video-calling/includes/video-calling/video-calling-windows.md

Lines changed: 56 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -66,24 +66,35 @@ Open the `MainPage.xaml` of your project and replace the content with following
6666
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6767
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6868
mc:Ignorable="d"
69-
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Width="800" Height="600">
70-
<Grid>
69+
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
70+
71+
<Grid x:Name="MainGrid" HorizontalAlignment="Stretch">
7172
<Grid.RowDefinitions>
72-
<RowDefinition Height="60*"/>
73+
<RowDefinition Height="*"/>
74+
<RowDefinition Height="Auto"/>
7375
<RowDefinition Height="200*"/>
7476
<RowDefinition Height="60*"/>
77+
<RowDefinition Height="Auto"/>
7578
</Grid.RowDefinitions>
76-
<TextBox x:Name="CalleeTextBox" Text="Who would you like to call?" TextWrapping="Wrap" VerticalAlignment="Center" Grid.Row="0" Height="40" Margin="10,10,10,10" />
77-
<Grid Grid.Row="1">
79+
80+
<Grid Grid.Row="0" x:Name="AppTitleBar" Background="LightSeaGreen">
81+
<!-- Width of the padding columns is set in LayoutMetricsChanged handler. -->
82+
<!-- Using padding columns instead of Margin ensures that the background paints the area under the caption control buttons (for transparent buttons). -->
83+
<TextBlock x:Name="QuickstartTitle" Text="Calling Quickstart sample title bar" Style="{StaticResource CaptionTextBlockStyle}" Padding="4,4,0,0"/>
84+
</Grid>
85+
86+
<TextBox Grid.Row="1" x:Name="CalleeTextBox" PlaceholderText="Who would you like to call?" TextWrapping="Wrap" VerticalAlignment="Center" />
87+
88+
<Grid Grid.Row="2" Background="LightGray">
7889
<Grid.RowDefinitions>
7990
<RowDefinition/>
8091
</Grid.RowDefinitions>
8192
<Grid.ColumnDefinitions>
8293
<ColumnDefinition Width="*"/>
8394
<ColumnDefinition Width="*"/>
8495
</Grid.ColumnDefinitions>
85-
<MediaElement x:Name="LocalVideo" HorizontalAlignment="Center" Stretch="UniformToFill" Grid.Column="0" VerticalAlignment="Center"/>
86-
<MediaElement x:Name="RemoteVideo" HorizontalAlignment="Center" Stretch="UniformToFill" Grid.Column="1" VerticalAlignment="Center"/>
96+
<MediaPlayerElement x:Name="LocalVideo" HorizontalAlignment="Center" Stretch="UniformToFill" Grid.Column="0" VerticalAlignment="Center" AutoPlay="True" />
97+
<MediaPlayerElement x:Name="RemoteVideo" HorizontalAlignment="Center" Stretch="UniformToFill" Grid.Column="1" VerticalAlignment="Center" AutoPlay="True" />
8798
</Grid>
8899
<StackPanel Grid.Row="3" Orientation="Vertical" Grid.RowSpan="2">
89100
<StackPanel Orientation="Horizontal" Margin="10">
@@ -93,9 +104,11 @@ Open the `MainPage.xaml` of your project and replace the content with following
93104
<StackPanel Orientation="Horizontal">
94105
<Button x:Name="CallButton" Content="Start/Join call" Click="CallButton_Click" VerticalAlignment="Center" Margin="10,0,0,0" Height="40" Width="123"/>
95106
<Button x:Name="HangupButton" Content="Hang up" Click="HangupButton_Click" VerticalAlignment="Center" Margin="10,0,0,0" Height="40" Width="123"/>
107+
<CheckBox x:Name="MuteLocal" Content="Mute" Margin="10,0,0,0" Click="MuteLocal_Click" Width="74"/>
108+
<CheckBox x:Name="BackgroundBlur" Content="Background blur" Width="142" Margin="10,0,0,0" Click="BackgroundBlur_Click"/>
96109
</StackPanel>
97-
</StackPanel
98-
<TextBlock x:Name="State" Text="Status" TextWrapping="Wrap" VerticalAlignment="Center" Margin="40,0,0,0" Height="40" Width="200"/>
110+
</StackPanel>
111+
<TextBox Grid.Row="4" x:Name="Stats" Text="" TextWrapping="Wrap" VerticalAlignment="Center" Height="30" Margin="0,2,0,0" BorderThickness="2" IsReadOnly="True" Foreground="LightSlateGray" />
99112
</Grid>
100113
</Page>
101114
```
@@ -669,39 +682,58 @@ We also need to preview the local video and render the remote video of the other
669682
Open the `MainWindow.xaml` of your project and replace the content with following implementation.
670683

671684
```C#
672-
<Window
673-
x:Class="CallingQuickstart.MainWindow"
685+
<Page
686+
x:Class="CallingQuickstart.MainPage"
674687
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
675688
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
676689
xmlns:local="using:CallingQuickstart"
677690
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
678691
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
679692
mc:Ignorable="d">
680-
<Grid>
693+
694+
<Grid x:Name="MainGrid">
681695
<Grid.RowDefinitions>
682-
<RowDefinition Height="60*"/>
696+
<RowDefinition Height="32"/>
697+
<RowDefinition Height="Auto"/>
683698
<RowDefinition Height="200*"/>
684699
<RowDefinition Height="60*"/>
700+
<RowDefinition Height="Auto"/>
685701
</Grid.RowDefinitions>
686-
<TextBox x:Name="CalleeTextBox" Text="Who would you like to call?" TextWrapping="Wrap" VerticalAlignment="Center" Height="40" Margin="10,10,10,10" />
687-
<Grid Grid.Row="1">
702+
703+
<Grid Grid.Row="0" x:Name="AppTitleBar" Background="LightSeaGreen">
704+
<!-- Width of the padding columns is set in LayoutMetricsChanged handler. -->
705+
<!-- Using padding columns instead of Margin ensures that the background paints the area under the caption control buttons (for transparent buttons). -->
706+
<TextBlock x:Name="QuickstartTitle" Text="Calling Quickstart sample title bar" Style="{StaticResource CaptionTextBlockStyle}" Padding="4,4,0,0"/>
707+
</Grid>
708+
709+
<TextBox Grid.Row="1" x:Name="CalleeTextBox" PlaceholderText="Who would you like to call?" TextWrapping="Wrap" VerticalAlignment="Center" />
710+
711+
<Grid Grid.Row="2" Background="LightGray">
688712
<Grid.RowDefinitions>
689713
<RowDefinition/>
690714
</Grid.RowDefinitions>
691715
<Grid.ColumnDefinitions>
692716
<ColumnDefinition Width="*"/>
693717
<ColumnDefinition Width="*"/>
694718
</Grid.ColumnDefinitions>
695-
<MediaPlayerElement x:Name="LocalVideo" HorizontalAlignment="Center" Stretch="UniformToFill" Grid.Column="0" VerticalAlignment="Center"/>
696-
<MediaPlayerElement x:Name="RemoteVideo" HorizontalAlignment="Center" Stretch="UniformToFill" Grid.Column="1" VerticalAlignment="Center"/>
719+
<MediaPlayerElement x:Name="LocalVideo" HorizontalAlignment="Center" Stretch="UniformToFill" Grid.Column="0" VerticalAlignment="Center" AutoPlay="True" />
720+
<MediaPlayerElement x:Name="RemoteVideo" HorizontalAlignment="Center" Stretch="UniformToFill" Grid.Column="1" VerticalAlignment="Center" AutoPlay="True" />
697721
</Grid>
698-
<StackPanel Grid.Row="2" Orientation="Horizontal">
699-
<Button x:Name="CallButton" Content="Start Call" Click="CallButton_Click" VerticalAlignment="Center" Margin="10,0,0,0" Height="40" Width="200"/>
700-
<Button x:Name="HangupButton" Content="Hang Up" Click="HangupButton_Click" VerticalAlignment="Center" Margin="10,0,0,0" Height="40" Width="200"/>
701-
<TextBlock x:Name="State" Text="Status" TextWrapping="Wrap" VerticalAlignment="Center" Margin="40,0,0,0" Height="40" Width="200"/>
722+
<StackPanel Grid.Row="3" Orientation="Vertical" Grid.RowSpan="2">
723+
<StackPanel Orientation="Horizontal" Margin="10">
724+
<TextBlock VerticalAlignment="Center">Cameras:</TextBlock>
725+
<ComboBox x:Name="CameraList" HorizontalAlignment="Left" Grid.Column="0" DisplayMemberPath="Name" SelectionChanged="CameraList_SelectionChanged" Margin="10"/>
726+
</StackPanel>
727+
<StackPanel Orientation="Horizontal">
728+
<Button x:Name="CallButton" Content="Start/Join call" Click="CallButton_Click" VerticalAlignment="Center" Margin="10,0,0,0" Height="40" Width="123"/>
729+
<Button x:Name="HangupButton" Content="Hang up" Click="HangupButton_Click" VerticalAlignment="Center" Margin="10,0,0,0" Height="40" Width="123"/>
730+
<CheckBox x:Name="MuteLocal" Content="Mute" Margin="10,0,0,0" Click="MuteLocal_Click" Width="74"/>
731+
<CheckBox x:Name="BackgroundBlur" Content="Background blur" Width="142" Margin="10,0,0,0" Click="BackgroundBlur_Click"/>
732+
</StackPanel>
702733
</StackPanel>
703-
</Grid>
704-
</Window>
734+
<TextBox Grid.Row="4" x:Name="Stats" Text="" TextWrapping="Wrap" VerticalAlignment="Center" Height="30" Margin="0,2,0,0" BorderThickness="2" IsReadOnly="True" Foreground="LightSlateGray" />
735+
</Grid>
736+
</Page>
705737
```
706738

707739
Open to `App.xaml.cs` (right click and choose View Code) and add this line to the top:
@@ -805,7 +837,7 @@ this.callAgent.OnIncomingCall += Agent_OnIncomingCallAsync;
805837

806838
### Start a call with video
807839

808-
Add the implementation to the `CallButton_Click` to start a call with video. We need to enumerate the cameras with device manager instance and construct `LocalVideoStream`. We need to set the `VideoOptions` with `LocalVideoStream` and pass it with `startCallOptions` to set initial options for the call. By attaching `LocalVideoStream` to a `MediaPlayerElement`, we can see the preview of the local video.
840+
Add the implementation to the `CallButton_Click` to start a video call with video. We need to enumerate the cameras with device manager instance and construct `LocalVideoStream`. We need to set the `VideoOptions` with `LocalVideoStream` and pass it with `startCallOptions` to set initial options for the call. By attaching `LocalVideoStream` to a `MediaPlayerElement`, we can see the preview of the local video.
809841
```C#
810842
var startCallOptions = new StartCallOptions();
811843

0 commit comments

Comments
 (0)