PowerToys/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/VideoConference.xaml

<Page
    x:Class="Microsoft.PowerToys.Settings.UI.Views.VideoConferencePage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:CustomControls="using:Microsoft.PowerToys.Settings.UI.Controls"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid RowSpacing="{StaticResource DefaultRowSpacing}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="LayoutVisualStates">
                <VisualState x:Name="WideLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource WideLayoutMinWidth}" />
                    </VisualState.StateTriggers>
                </VisualState>
                <VisualState x:Name="SmallLayout">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="{StaticResource SmallLayoutMinWidth}" />
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="SidePanel.(Grid.Column)" Value="0"/>
                        <Setter Target="SidePanel.Width" Value="Auto"/>
                        <Setter Target="VideoConferenceView.(Grid.Row)" Value="1" />
                        <Setter Target="LinksPanel.(RelativePanel.RightOf)" Value="AboutImage"/>
                        <Setter Target="LinksPanel.(RelativePanel.AlignTopWith)" Value="AboutImage"/>
                        <Setter Target="AboutImage.Margin" Value="0,12,12,0"/>
                        <Setter Target="AboutTitle.Visibility" Value="Collapsed" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <StackPanel Orientation="Vertical" x:Name="VideoConferenceView">

            <ToggleSwitch x:Uid="VideoConference_Enable"
                          IsOn="{ Binding Mode=TwoWay, Path=IsEnabled}"
                          IsEnabled="{ Binding Mode=OneWay, Path=IsElevated }"
                          />

            <TextBlock x:Uid="VideoConference_Shortcuts"
                       Style="{StaticResource SettingsGroupTitleStyle}"
                       Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}" />
            
            <CustomControls:HotkeySettingsControl 
                                          x:Uid="VideoConference_CameraAndMicrophoneMuteHotkeyControl_Header"
                                          Width="240"
                                          HorizontalAlignment="Left"
                                          Margin="{StaticResource SmallTopMargin}"
                                          Keys="Win, Ctrl, Alt, Shift"
                                          HotkeySettings="{x:Bind Path=ViewModel.CameraAndMicrophoneMuteHotkey, Mode=TwoWay}"
                                          IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"
                                          />

            <CustomControls:HotkeySettingsControl 
                                          x:Uid="VideoConference_MicrophoneMuteHotkeyControl_Header"
                                          Width="240"
                                          HorizontalAlignment="Left"
                                          Margin="{StaticResource SmallTopMargin}"
                                          Keys="Win, Ctrl, Alt, Shift"
                                          HotkeySettings="{x:Bind Path=ViewModel.MicrophoneMuteHotkey, Mode=TwoWay}"
                                          IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"
                                          />

            <CustomControls:HotkeySettingsControl 
                                          x:Uid="VideoConference_CameraMuteHotkeyControl_Header"
                                          Width="240"
                                          HorizontalAlignment="Left"
                                          Margin="{StaticResource SmallTopMargin}"
                                          Keys="Win, Ctrl, Alt, Shift"
                                          HotkeySettings="{x:Bind Path=ViewModel.CameraMuteHotkey, Mode=TwoWay}"
                                          IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"
                                          />
            <TextBlock x:Uid="VideoConference_Microphone"
                       Style="{StaticResource SettingsGroupTitleStyle}"
                       Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>

            <ComboBox x:Uid="VideoConference_SelectedMicrophone"
                      Width="240"
                      HorizontalAlignment="Left"
                      Margin="{StaticResource SmallTopMargin}"
                      SelectedIndex="{Binding Path=SelectedMicrophoneIndex, Mode=TwoWay}"
                      ItemsSource="{Binding MicrophoneNames, Mode=OneTime}"
                      IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"/>

            <TextBlock x:Uid="VideoConference_Camera"
                       Style="{StaticResource SettingsGroupTitleStyle}"
                       Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>
            
            <ComboBox x:Uid="VideoConference_SelectedCamera"
                      Width="240"
                      HorizontalAlignment="Left"
                      Margin="{StaticResource SmallTopMargin}"
                      SelectedIndex="{Binding Path=SelectedCameraIndex, Mode=TwoWay}"
                      ItemsSource="{Binding CameraNames, Mode=OneTime}"
                      IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"/>

            <TextBlock x:Uid="VideoConference_CameraOverlayImagePathHeader"
                       Margin="{StaticResource SmallTopMargin}"/>

            <Border CornerRadius="4"
                    HorizontalAlignment="Left"
                    Margin="{StaticResource XXSmallTopMargin}">
                <Image Width="240"
                       x:Uid="VideoConference_CameraOverlayImageAlt"
                       ToolTipService.ToolTip="{Binding Mode=OneWay, Path=CameraImageOverlayPath}"
                       Source="{Binding Mode=OneWay, Path=CameraImageOverlayPath}"/>
            </Border>

            <StackPanel Orientation="Horizontal"
                        Padding="0"
                        Spacing="8"
                        Margin="{StaticResource SmallTopMargin}">
                <Button Height="32"
                        IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"
                        x:Uid="VideoConference_CameraOverlayImageBrowse"
                        Command="{Binding Mode=OneWay, Path=SelectOverlayImage}"
                        HorizontalContentAlignment="Left"
                        HorizontalAlignment="Left" />
                
                <Button IsEnabled="{Binding Mode=TwoWay, Path=IsEnabled}"
                        Height="32"
                        x:Uid="VideoConference_CameraOverlayImageClear"
                        Command="{Binding Mode=OneWay, Path=ClearOverlayImage}"
                        HorizontalAlignment="Left" />
            </StackPanel>

            <TextBlock x:Uid="VideoConference_Toolbar"
                       Style="{StaticResource SettingsGroupTitleStyle}"
                       Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>
            
            <ComboBox x:Uid="VideoConference_ToolbarPosition" 
                      MinWidth="240"
                      Margin="{StaticResource SmallTopMargin}"
                      SelectedIndex="{ Binding Mode=TwoWay, Path=ToolbarPostionIndex}"
                      IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}">
                <ComboBoxItem x:Uid="VideoConference_ToolbarPosition_TopLeftCorner"/>
                <ComboBoxItem x:Uid="VideoConference_ToolbarPosition_TopCenter"/>
                <ComboBoxItem x:Uid="VideoConference_ToolbarPosition_TopRightCorner"/>
                <ComboBoxItem x:Uid="VideoConference_ToolbarPosition_BottomLeftCorner"/>
                <ComboBoxItem x:Uid="VideoConference_ToolbarPosition_BottomCenter"/>
                <ComboBoxItem x:Uid="VideoConference_ToolbarPosition_BottomRightCorner"/>
            </ComboBox>

            <ComboBox x:Uid="VideoConference_ToolbarMonitor" 
                      MinWidth="240"
                      Margin="{StaticResource SmallTopMargin}"
                      SelectedIndex="{ Binding Mode=TwoWay, Path=ToolbarMonitorIndex}"
                      IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}">
                <ComboBoxItem x:Uid="VideoConference_ToolbarMonitor_Main"/>
                <ComboBoxItem x:Uid="VideoConference_ToolbarMonitor_All"/>
            </ComboBox>

            <CheckBox x:Uid="VideoConference_HideToolbarWhenUnmuted"
                      IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.HideToolbarWhenUnmuted}"
                      Margin="{StaticResource SmallTopMargin}"
                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                      />
        </StackPanel>
        <RelativePanel x:Name="SidePanel" 
                    HorizontalAlignment="Left"
                    Width="{StaticResource SidePanelWidth}"
                    Grid.Column="1">
            <StackPanel x:Name="DescriptionPanel">
                <TextBlock x:Uid="About_VideoConference"
                           x:Name="AboutTitle"
                           Grid.ColumnSpan="2"
                           Style="{StaticResource SettingsGroupTitleStyle}"
                           Margin="{StaticResource XSmallBottomMargin}"/>
                <TextBlock x:Uid="VideoConference_Description"
                           TextWrapping="Wrap"
                           Grid.Row="1" />
            </StackPanel>

            <Border x:Name="AboutImage"
                    CornerRadius="4"
                    Grid.Row="2"
                    MaxWidth="240"
                    HorizontalAlignment="Left"
                    Margin="{StaticResource SmallTopBottomMargin}"
                    RelativePanel.Below="DescriptionPanel">
                <HyperlinkButton x:Uid="VideoConference_ImageHyperlinkToDocs">
                    <Image Source="ms-appx:///Assets/Modules/VideoConference.png" />
                </HyperlinkButton>
            </Border>

            <StackPanel x:Name="LinksPanel"
                        Margin="0,1,0,0"
                        RelativePanel.Below="AboutImage"
                        Orientation="Vertical" >
                <HyperlinkButton x:Uid="VideoConference_ImageHyperlinkToDocs">
                    <TextBlock x:Uid="Module_overview" />
                </HyperlinkButton>
                <HyperlinkButton NavigateUri="https://aka.ms/powerToysGiveFeedback">
                    <TextBlock x:Uid="Give_Feedback" />
                </HyperlinkButton>
            </StackPanel>
        </RelativePanel>
    </Grid>
</Page>