VideoPage.xaml - jami-client-uwp - Gitiles

 <Page
     x:Class="RingClientUWP.Views.VideoPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:local="using:RingClientUWP"
     xmlns:views="using:RingClientUWP.Views"
     xmlns:ctl="using:RingClientUWP.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d"
     NavigationCacheMode="Enabled">

     <Page.Resources>
         <SolidColorBrush x:Key="SemiTransparentBlack" Color="#808080" Opacity="0.5"/>
         <Storyboard x:Name="myStoryboard">
             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="_controlsBar_"
                              Storyboard.TargetProperty="Opacity"
                              Duration="0:0:4">
                 <LinearDoubleKeyFrame Value="1" KeyTime="0:0:0" />
                 <LinearDoubleKeyFrame Value="1" KeyTime="0:0:2" />
                 <LinearDoubleKeyFrame Value="0" KeyTime="0:0:4" />

             </DoubleAnimationUsingKeyFrames>
             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="_headerBar_"
                              Storyboard.TargetProperty="Opacity"
                              Duration="0:0:4">
                 <LinearDoubleKeyFrame Value="1" KeyTime="0:0:0" />
                 <LinearDoubleKeyFrame Value="1" KeyTime="0:0:2" />
                 <LinearDoubleKeyFrame Value="0" KeyTime="0:0:4" />
             </DoubleAnimationUsingKeyFrames>
         </Storyboard>
         <!-- bubble -->
         <views:BubbleBackground x:Key="_bubbleBackground_" />
         <views:BubbleHorizontalAlignement x:Key="_bubbleHorizontalAlignement_" />
         <DataTemplate x:Key="ConversationMessageTemplate"
                       x:DataType="local:ConversationMessage">
             <Grid Margin="0"
                   HorizontalAlignment="{x:Bind FromContact, Converter={StaticResource _bubbleHorizontalAlignement_}}" >
                 <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="2*" />
                     <ColumnDefinition Width="8*" />
                 </Grid.ColumnDefinitions>
                 <Border  Background="{x:Bind FromContact, Converter={StaticResource _bubbleBackground_}}"
                          CornerRadius="10"
                          Grid.Column="1"
                          Width="auto"
                          Height="auto"
                          Padding="5"
                          Margin="5" >
                     <ContentPresenter>
                         <!--Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."-->
                         <TextBlock x:Name="_msgContent_"
                                    TextWrapping="Wrap"
                                    Text="{x:Bind Payload}"
                                    Foreground="White"/>
                     </ContentPresenter>
                 </Border>
             </Grid>
         </DataTemplate>
         <!-- barre d'envoi de message -->
         <Style TargetType="TextBox">
             <Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}" />
             <Setter Property="MinHeight" Value="{ThemeResource TextControlThemeMinHeight}" />
             <Setter Property="Foreground" Value="Black" />
             <Setter Property="Background" Value="white" />
             <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
             <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
             <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto" />
             <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
             <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />
             <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
             <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
             <Setter Property="Padding" Value="4,4"/>
             <Setter Property="Template">
                 <Setter.Value>
                     <ControlTemplate TargetType="TextBox">
                         <Grid>
                             <Grid.ColumnDefinitions>
                                 <ColumnDefinition Width="*" />
                                 <ColumnDefinition Width="Auto" />
                             </Grid.ColumnDefinitions>
                             <Grid.RowDefinitions>
                                 <RowDefinition Height="Auto" />
                                 <RowDefinition Height="*" />
                             </Grid.RowDefinitions>
                             <Border x:Name="BackgroundElement"
                                     Grid.Row="1"
                                     Background="{TemplateBinding Background}"
                                     Margin="{TemplateBinding BorderThickness}"
                                     Opacity="1"
                                     Grid.ColumnSpan="2"
                                     BorderBrush="LightBlue"
                                     BorderThickness="1"
                                     Grid.RowSpan="1"/>
                             <ScrollViewer x:Name="ContentElement"
                                           Grid.Row="1"
                                           HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                           HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                           VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                           VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                           IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                                           IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                                           IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                                           Margin="{TemplateBinding BorderThickness}"
                                           Padding="{TemplateBinding Padding}"
                                           IsTabStop="False"
                                           AutomationProperties.AccessibilityView="Raw"
                                           ZoomMode="Disabled" />

                             <Button x:Name="_sendBtn_"
                                     Background="Transparent"
                                     Grid.Row="1"
                                     FontFamily="Segoe MDL2 Assets"
                                     Foreground="LightBlue"
                                     Content="&#xE122;"
                                     IsTabStop="False"
                                     Grid.Column="1"
                                     Click="_sendBtn__Click"
                                     Visibility="Visible"
                                     MinWidth="34"
                                     FontSize="20"
                                     VerticalAlignment="Stretch"/>
                         </Grid>
                     </ControlTemplate>
                 </Setter.Value>
             </Setter>
         </Style>
     </Page.Resources>

     <SplitView x:Name="_videoSplitView_" IsPaneOpen="False" OpenPaneLength="400" PanePlacement="Right">
         <SplitView.Pane>
             <Frame x:Name="_chatPanel_"/>
         </SplitView.Pane>
         <SplitView.Content>
             <Grid>
                 <Grid.RowDefinitions>
                     <RowDefinition Height="*"/>
                     <RowDefinition x:Name="_rowChatBx_" Height="0"/>
                 </Grid.RowDefinitions>
                 <Grid   Background="#000000"
                         Grid.Row="0"
                         PointerMoved="_videoControl__PointerMoved">
                     <StackPanel x:Name="_headerBar_"
                                 Background="{StaticResource SemiTransparentBlack}"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Top"
                                 Height="50">
                         <TextBlock  x:Name="_callee_"
                                     Text="callee"
                                     Foreground="White"
                                     Margin="20,10"/>
                     </StackPanel>

                     <!-- video -->
                     <Image Name="IncomingVideoImage"
                            Grid.Column="0"
                            Canvas.ZIndex="-1"/>

                     <!--camera preview-->
                     <CaptureElement Name="PreviewImage"
                                     Width="200"
                                     VerticalAlignment="Center"
                                     HorizontalAlignment="Right"
                                     Stretch="Uniform"
                                     Grid.Column="0"/>

                     <StackPanel x:Name="_controlsBar_"
                             HorizontalAlignment="Center"
                             VerticalAlignment="Bottom"
                             Orientation="Horizontal">
                         <StackPanel.Resources>
                             <Style TargetType="Button">
                                 <Setter Property="Margin" Value="10,30"/>
                                 <Setter Property="Width" Value="40"/>
                                 <Setter Property="Height" Value="40"/>
                                 <Setter Property="Background" Value="Black"/>
                                 <Setter Property="Foreground" Value="White"/>
                                 <Setter Property="BorderBrush" Value="Gray"/>
                                 <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/>
                                 <Setter Property="Template">
                                     <Setter.Value>
                                         <ControlTemplate TargetType="Button">
                                             <Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
                                                 <VisualStateManager.VisualStateGroups>
                                                     <VisualStateGroup x:Name="CommonStates">
                                                         <VisualState x:Name="PointerOver">
                                                             <Storyboard>
                                                                 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
                                                                                            Storyboard.TargetName="ContentPresenter">
                                                                     <DiscreteObjectKeyFrame KeyTime="0"
                                                                                         Value="Gray"/>
                                                                 </ObjectAnimationUsingKeyFrames>
                                                                 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                                            Storyboard.TargetName="ContentPresenter">
                                                                     <DiscreteObjectKeyFrame KeyTime="0"
                                                                                         Value="White"/>
                                                                 </ObjectAnimationUsingKeyFrames>
                                                                 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
                                                                                            Storyboard.TargetName="ContentPresenter">
                                                                     <DiscreteObjectKeyFrame KeyTime="0"
                                                                                         Value="White"/>
                                                                 </ObjectAnimationUsingKeyFrames>
                                                             </Storyboard>
                                                         </VisualState>
                                                         <VisualState x:Name="Normal">
                                                             <Storyboard>
                                                                 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
                                                                                            Storyboard.TargetName="ContentPresenter">
                                                                     <DiscreteObjectKeyFrame KeyTime="0"
                                                                                         Value="Black"/>
                                                                 </ObjectAnimationUsingKeyFrames>
                                                                 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                                            Storyboard.TargetName="ContentPresenter">
                                                                     <DiscreteObjectKeyFrame KeyTime="0"
                                                                                         Value="White"/>
                                                                 </ObjectAnimationUsingKeyFrames>
                                                                 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
                                                                                            Storyboard.TargetName="ContentPresenter">
                                                                     <DiscreteObjectKeyFrame KeyTime="0"
                                                                                         Value="Gray"/>
                                                                 </ObjectAnimationUsingKeyFrames>
                                                                 <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                                             </Storyboard>
                                                         </VisualState>
                                                         <VisualState x:Name="Pressed">
                                                             <Storyboard>
                                                                 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
                                                                                            Storyboard.TargetName="ContentPresenter">
                                                                     <DiscreteObjectKeyFrame KeyTime="0"
                                                                                         Value="White"/>
                                                                 </ObjectAnimationUsingKeyFrames>
                                                                 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                                            Storyboard.TargetName="ContentPresenter">
                                                                     <DiscreteObjectKeyFrame KeyTime="0"
                                                                                         Value="Black"/>
                                                                 </ObjectAnimationUsingKeyFrames>
                                                                 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
                                                                                            Storyboard.TargetName="ContentPresenter">
                                                                     <DiscreteObjectKeyFrame KeyTime="0"
                                                                                         Value="Gray"/>
                                                                 </ObjectAnimationUsingKeyFrames>
                                                                 <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/>
                                                             </Storyboard>
                                                         </VisualState>
                                                     </VisualStateGroup>
                                                 </VisualStateManager.VisualStateGroups>
                                                 <ContentPresenter x:Name="ContentPresenter"
                                                               AutomationProperties.AccessibilityView="Raw"
                                                               BorderBrush="{TemplateBinding BorderBrush}"
                                                               BorderThickness="{TemplateBinding BorderThickness}"
                                                               ContentTemplate="{TemplateBinding ContentTemplate}"
                                                               ContentTransitions="{TemplateBinding ContentTransitions}"
                                                               Content="{TemplateBinding Content}"
                                                               HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                               Padding="{TemplateBinding Padding}"
                                                               VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                             </Grid>
                                         </ControlTemplate>
                                     </Setter.Value>
                                 </Setter>
                             </Style>
                         </StackPanel.Resources>

                         <Button x:Name="_btnHangUp_"
                             PointerEntered="btnAny_entered"
                             PointerExited="btnAny_exited"
                             Tapped="_btnHangUp__Tapped">
                             <SymbolIcon Symbol="HangUp"/>
                         </Button>
                         <Button x:Name="_btnPause_"
                             PointerEntered="btnAny_entered"
                             PointerExited="btnAny_exited"
                             Tapped="_btnPause__Tapped" Visibility="Collapsed">
                             <SymbolIcon Symbol="Pause"/>
                         </Button>
                         <Button x:Name="_btnChat_"
                             PointerEntered="btnAny_entered"
                             PointerExited="btnAny_exited"
                             Tapped="_btnChat__Tapped">
                             <SymbolIcon Symbol="Message" HorizontalAlignment="Left" Width="20"/>
                         </Button>
                         <Button x:Name="_btnAddFriend_"
                             PointerEntered="btnAny_entered"
                             PointerExited="btnAny_exited"
                             Tapped="_btnAddFriend__Tapped" Visibility="Collapsed">
                             <SymbolIcon Symbol="AddFriend"/>
                         </Button>
                         <Button x:Name="_btnSwitch_"
                             PointerEntered="btnAny_entered"
                             PointerExited="btnAny_exited"
                             Tapped="_btnSwitch__Tapped" Visibility="Collapsed">
                             <SymbolIcon Symbol="Switch"/>
                         </Button>
                         <Button x:Name="_btnMicrophone_"
                             PointerEntered="btnAny_entered"
                             PointerExited="btnAny_exited"
                             Tapped="_btnMicrophone__Tapped" Visibility="Collapsed">
                             <SymbolIcon Symbol="Microphone"/>
                         </Button>
                         <Button x:Name="_btnVideo_"
                             PointerEntered="btnAny_entered"
                             PointerExited="btnAny_exited"
                             Tapped="_btnVideo__Tapped" Visibility="Collapsed">
                             <SymbolIcon Symbol="Video"/>
                         </Button>
                         <Button x:Name="_btnMemo_"
                             PointerEntered="btnAny_entered"
                             PointerExited="btnAny_exited"
                             Tapped="_btnMemo__Tapped" Visibility="Collapsed">
                             <SymbolIcon Symbol="Memo"/>
                         </Button>
                         <Button x:Name="_btnHQ_"
                             PointerEntered="btnAny_entered"
                             PointerExited="btnAny_exited"
                             Tapped="_btnHQ__Tapped" Visibility="Collapsed">
                             <TextBlock FontSize="12" Text="HQ"/>
                         </Button>
                     </StackPanel>
                 </Grid>
                 <!-- in call chat box -->
                 <Grid Grid.Row="1">
                     <Grid Background="#FFF2F2F2">
                         <Grid.RowDefinitions>
                             <RowDefinition Height="auto" />
                             <RowDefinition Height="*"/>
                             <RowDefinition Height="auto" />
                         </Grid.RowDefinitions>
                         <ScrollViewer   x:Name="_scrollView_"
                                         Grid.Row="1">
                             <StackPanel>
                                 <ListBox    x:Name="_messagesList_"
                                             Margin="0"
                                             Padding="0"
                                             ItemContainerStyle="{StaticResource messageBubleStyle}"
                                             ItemTemplate="{StaticResource ConversationMessageTemplate}">
                                 </ListBox>
                             </StackPanel>
                         </ScrollViewer>
                         <Grid   Height="50"
                                 Grid.Row="2"
                                 Margin="0"
                                 Padding="0"
                                 Background="#FFF2F2F2">
                             <TextBox    x:Name="_messageTextBox_"
                                         HorizontalAlignment="Stretch"
                                         TextWrapping="NoWrap"
                                         VerticalAlignment="Bottom"
                                         Margin="10"
                                         Background="White"
                                         KeyDown="_messageTextBox__KeyDown"/>
                         </Grid>
                     </Grid>
                 </Grid>
             </Grid>
         </SplitView.Content>
     </SplitView>
 </Page>
	<Page
	x:Class="RingClientUWP.Views.VideoPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:local="using:RingClientUWP"
	xmlns:views="using:RingClientUWP.Views"
	xmlns:ctl="using:RingClientUWP.Controls"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	NavigationCacheMode="Enabled">

	<Page.Resources>
	<SolidColorBrush x:Key="SemiTransparentBlack" Color="#808080" Opacity="0.5"/>
	<Storyboard x:Name="myStoryboard">
	<DoubleAnimationUsingKeyFrames Storyboard.TargetName="_controlsBar_"
	Storyboard.TargetProperty="Opacity"
	Duration="0:0:4">
	<LinearDoubleKeyFrame Value="1" KeyTime="0:0:0" />
	<LinearDoubleKeyFrame Value="1" KeyTime="0:0:2" />
	<LinearDoubleKeyFrame Value="0" KeyTime="0:0:4" />

	</DoubleAnimationUsingKeyFrames>
	<DoubleAnimationUsingKeyFrames Storyboard.TargetName="_headerBar_"
	Storyboard.TargetProperty="Opacity"
	Duration="0:0:4">
	<LinearDoubleKeyFrame Value="1" KeyTime="0:0:0" />
	<LinearDoubleKeyFrame Value="1" KeyTime="0:0:2" />
	<LinearDoubleKeyFrame Value="0" KeyTime="0:0:4" />
	</DoubleAnimationUsingKeyFrames>
	</Storyboard>
	<!-- bubble -->
	<views:BubbleBackground x:Key="_bubbleBackground_" />
	<views:BubbleHorizontalAlignement x:Key="_bubbleHorizontalAlignement_" />
	<DataTemplate x:Key="ConversationMessageTemplate"
	x:DataType="local:ConversationMessage">
	<Grid Margin="0"
	HorizontalAlignment="{x:Bind FromContact, Converter={StaticResource _bubbleHorizontalAlignement_}}" >
	<Grid.ColumnDefinitions>
	<ColumnDefinition Width="2*" />
	<ColumnDefinition Width="8*" />
	</Grid.ColumnDefinitions>
	<Border Background="{x:Bind FromContact, Converter={StaticResource _bubbleBackground_}}"
	CornerRadius="10"
	Grid.Column="1"
	Width="auto"
	Height="auto"
	Padding="5"
	Margin="5" >
	<ContentPresenter>
	<!--Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."-->
	<TextBlock x:Name="_msgContent_"
	TextWrapping="Wrap"
	Text="{x:Bind Payload}"
	Foreground="White"/>
	</ContentPresenter>
	</Border>
	</Grid>
	</DataTemplate>
	<!-- barre d'envoi de message -->
	<Style TargetType="TextBox">
	<Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}" />
	<Setter Property="MinHeight" Value="{ThemeResource TextControlThemeMinHeight}" />
	<Setter Property="Foreground" Value="Black" />
	<Setter Property="Background" Value="white" />
	<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
	<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
	<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto" />
	<Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
	<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />
	<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
	<Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
	<Setter Property="Padding" Value="4,4"/>
	<Setter Property="Template">
	<Setter.Value>
	<ControlTemplate TargetType="TextBox">
	<Grid>
	<Grid.ColumnDefinitions>
	<ColumnDefinition Width="*" />
	<ColumnDefinition Width="Auto" />
	</Grid.ColumnDefinitions>
	<Grid.RowDefinitions>
	<RowDefinition Height="Auto" />
	<RowDefinition Height="*" />
	</Grid.RowDefinitions>
	<Border x:Name="BackgroundElement"
	Grid.Row="1"
	Background="{TemplateBinding Background}"
	Margin="{TemplateBinding BorderThickness}"
	Opacity="1"
	Grid.ColumnSpan="2"
	BorderBrush="LightBlue"
	BorderThickness="1"
	Grid.RowSpan="1"/>
	<ScrollViewer x:Name="ContentElement"
	Grid.Row="1"
	HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
	HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
	VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
	VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
	IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
	IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
	IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
	Margin="{TemplateBinding BorderThickness}"
	Padding="{TemplateBinding Padding}"
	IsTabStop="False"
	AutomationProperties.AccessibilityView="Raw"
	ZoomMode="Disabled" />

	<Button x:Name="_sendBtn_"
	Background="Transparent"
	Grid.Row="1"
	FontFamily="Segoe MDL2 Assets"
	Foreground="LightBlue"
	Content=""
	IsTabStop="False"
	Grid.Column="1"
	Click="_sendBtn__Click"
	Visibility="Visible"
	MinWidth="34"
	FontSize="20"
	VerticalAlignment="Stretch"/>
	</Grid>
	</ControlTemplate>
	</Setter.Value>
	</Setter>
	</Style>
	</Page.Resources>

	<SplitView x:Name="_videoSplitView_" IsPaneOpen="False" OpenPaneLength="400" PanePlacement="Right">
	<SplitView.Pane>
	<Frame x:Name="_chatPanel_"/>
	</SplitView.Pane>
	<SplitView.Content>
	<Grid>
	<Grid.RowDefinitions>
	<RowDefinition Height="*"/>
	<RowDefinition x:Name="_rowChatBx_" Height="0"/>
	</Grid.RowDefinitions>
	<Grid Background="#000000"
	Grid.Row="0"
	PointerMoved="_videoControl__PointerMoved">
	<StackPanel x:Name="_headerBar_"
	Background="{StaticResource SemiTransparentBlack}"
	HorizontalAlignment="Stretch"
	VerticalAlignment="Top"
	Height="50">
	<TextBlock x:Name="_callee_"
	Text="callee"
	Foreground="White"
	Margin="20,10"/>
	</StackPanel>

	<!-- video -->
	<Image Name="IncomingVideoImage"
	Grid.Column="0"
	Canvas.ZIndex="-1"/>

	<!--camera preview-->
	<CaptureElement Name="PreviewImage"
	Width="200"
	VerticalAlignment="Center"
	HorizontalAlignment="Right"
	Stretch="Uniform"
	Grid.Column="0"/>

	<StackPanel x:Name="_controlsBar_"
	HorizontalAlignment="Center"
	VerticalAlignment="Bottom"
	Orientation="Horizontal">
	<StackPanel.Resources>
	<Style TargetType="Button">
	<Setter Property="Margin" Value="10,30"/>
	<Setter Property="Width" Value="40"/>
	<Setter Property="Height" Value="40"/>
	<Setter Property="Background" Value="Black"/>
	<Setter Property="Foreground" Value="White"/>
	<Setter Property="BorderBrush" Value="Gray"/>
	<Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/>
	<Setter Property="Template">
	<Setter.Value>
	<ControlTemplate TargetType="Button">
	<Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
	<VisualStateManager.VisualStateGroups>
	<VisualStateGroup x:Name="CommonStates">
	<VisualState x:Name="PointerOver">
	<Storyboard>
	<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
	Storyboard.TargetName="ContentPresenter">
	<DiscreteObjectKeyFrame KeyTime="0"
	Value="Gray"/>
	</ObjectAnimationUsingKeyFrames>
	<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
	Storyboard.TargetName="ContentPresenter">
	<DiscreteObjectKeyFrame KeyTime="0"
	Value="White"/>
	</ObjectAnimationUsingKeyFrames>
	<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
	Storyboard.TargetName="ContentPresenter">
	<DiscreteObjectKeyFrame KeyTime="0"
	Value="White"/>
	</ObjectAnimationUsingKeyFrames>
	</Storyboard>
	</VisualState>
	<VisualState x:Name="Normal">
	<Storyboard>
	<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
	Storyboard.TargetName="ContentPresenter">
	<DiscreteObjectKeyFrame KeyTime="0"
	Value="Black"/>
	</ObjectAnimationUsingKeyFrames>
	<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
	Storyboard.TargetName="ContentPresenter">
	<DiscreteObjectKeyFrame KeyTime="0"
	Value="White"/>
	</ObjectAnimationUsingKeyFrames>
	<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
	Storyboard.TargetName="ContentPresenter">
	<DiscreteObjectKeyFrame KeyTime="0"
	Value="Gray"/>
	</ObjectAnimationUsingKeyFrames>
	<PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
	</Storyboard>
	</VisualState>
	<VisualState x:Name="Pressed">
	<Storyboard>
	<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
	Storyboard.TargetName="ContentPresenter">
	<DiscreteObjectKeyFrame KeyTime="0"
	Value="White"/>
	</ObjectAnimationUsingKeyFrames>
	<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
	Storyboard.TargetName="ContentPresenter">
	<DiscreteObjectKeyFrame KeyTime="0"
	Value="Black"/>
	</ObjectAnimationUsingKeyFrames>
	<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
	Storyboard.TargetName="ContentPresenter">
	<DiscreteObjectKeyFrame KeyTime="0"
	Value="Gray"/>
	</ObjectAnimationUsingKeyFrames>
	<PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/>
	</Storyboard>
	</VisualState>
	</VisualStateGroup>
	</VisualStateManager.VisualStateGroups>
	<ContentPresenter x:Name="ContentPresenter"
	AutomationProperties.AccessibilityView="Raw"
	BorderBrush="{TemplateBinding BorderBrush}"
	BorderThickness="{TemplateBinding BorderThickness}"
	ContentTemplate="{TemplateBinding ContentTemplate}"
	ContentTransitions="{TemplateBinding ContentTransitions}"
	Content="{TemplateBinding Content}"
	HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
	Padding="{TemplateBinding Padding}"
	VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
	</Grid>
	</ControlTemplate>
	</Setter.Value>
	</Setter>
	</Style>
	</StackPanel.Resources>

	<Button x:Name="_btnHangUp_"
	PointerEntered="btnAny_entered"
	PointerExited="btnAny_exited"
	Tapped="_btnHangUp__Tapped">
	<SymbolIcon Symbol="HangUp"/>
	</Button>
	<Button x:Name="_btnPause_"
	PointerEntered="btnAny_entered"
	PointerExited="btnAny_exited"
	Tapped="_btnPause__Tapped" Visibility="Collapsed">
	<SymbolIcon Symbol="Pause"/>
	</Button>
	<Button x:Name="_btnChat_"
	PointerEntered="btnAny_entered"
	PointerExited="btnAny_exited"
	Tapped="_btnChat__Tapped">
	<SymbolIcon Symbol="Message" HorizontalAlignment="Left" Width="20"/>
	</Button>
	<Button x:Name="_btnAddFriend_"
	PointerEntered="btnAny_entered"
	PointerExited="btnAny_exited"
	Tapped="_btnAddFriend__Tapped" Visibility="Collapsed">
	<SymbolIcon Symbol="AddFriend"/>
	</Button>
	<Button x:Name="_btnSwitch_"
	PointerEntered="btnAny_entered"
	PointerExited="btnAny_exited"
	Tapped="_btnSwitch__Tapped" Visibility="Collapsed">
	<SymbolIcon Symbol="Switch"/>
	</Button>
	<Button x:Name="_btnMicrophone_"
	PointerEntered="btnAny_entered"
	PointerExited="btnAny_exited"
	Tapped="_btnMicrophone__Tapped" Visibility="Collapsed">
	<SymbolIcon Symbol="Microphone"/>
	</Button>
	<Button x:Name="_btnVideo_"
	PointerEntered="btnAny_entered"
	PointerExited="btnAny_exited"
	Tapped="_btnVideo__Tapped" Visibility="Collapsed">
	<SymbolIcon Symbol="Video"/>
	</Button>
	<Button x:Name="_btnMemo_"
	PointerEntered="btnAny_entered"
	PointerExited="btnAny_exited"
	Tapped="_btnMemo__Tapped" Visibility="Collapsed">
	<SymbolIcon Symbol="Memo"/>
	</Button>
	<Button x:Name="_btnHQ_"
	PointerEntered="btnAny_entered"
	PointerExited="btnAny_exited"
	Tapped="_btnHQ__Tapped" Visibility="Collapsed">
	<TextBlock FontSize="12" Text="HQ"/>
	</Button>
	</StackPanel>
	</Grid>
	<!-- in call chat box -->
	<Grid Grid.Row="1">
	<Grid Background="#FFF2F2F2">
	<Grid.RowDefinitions>
	<RowDefinition Height="auto" />
	<RowDefinition Height="*"/>
	<RowDefinition Height="auto" />
	</Grid.RowDefinitions>
	<ScrollViewer x:Name="_scrollView_"
	Grid.Row="1">
	<StackPanel>
	<ListBox x:Name="_messagesList_"
	Margin="0"
	Padding="0"
	ItemContainerStyle="{StaticResource messageBubleStyle}"
	ItemTemplate="{StaticResource ConversationMessageTemplate}">
	</ListBox>
	</StackPanel>
	</ScrollViewer>
	<Grid Height="50"
	Grid.Row="2"
	Margin="0"
	Padding="0"
	Background="#FFF2F2F2">
	<TextBox x:Name="_messageTextBox_"
	HorizontalAlignment="Stretch"
	TextWrapping="NoWrap"
	VerticalAlignment="Bottom"
	Margin="10"
	Background="White"
	KeyDown="_messageTextBox__KeyDown"/>
	</Grid>
	</Grid>
	</Grid>
	</Grid>
	</SplitView.Content>
	</SplitView>
	</Page>