VCM and cleanup

src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/SidePanel/SettingsPageControl.xaml

@@ -18,7 +18,7 @@
         </Style>
     </UserControl.Resources>
 
-    <Grid RowSpacing="{StaticResource DefaultRowSpacing}" Padding="48,0,0,0">
+    <Grid RowSpacing="24" Padding="48,0,0,0">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
             <RowDefinition Height="*"/>
@@ -34,7 +34,7 @@
                    VerticalAlignment="Stretch"/>
 
         <ScrollViewer Grid.Row="1">
-            <Grid RowSpacing="{StaticResource DefaultRowSpacing}" Padding="0,0,48,48">
+            <Grid RowSpacing="24" Padding="0,0,48,48">
                 <Grid.RowDefinitions>
                     <RowDefinition Height="Auto" />
                     <RowDefinition Height="Auto"/>

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

@@ -26,12 +26,12 @@
             <VisualStateGroup x:Name="LayoutVisualStates">
                 <VisualState x:Name="WideLayout">
                     <VisualState.StateTriggers>
-                        <AdaptiveTrigger MinWindowWidth="{StaticResource WideLayoutMinWidth}" />
+                        <AdaptiveTrigger MinWindowWidth="720" />
                     </VisualState.StateTriggers>
                 </VisualState>
                 <VisualState x:Name="SmallLayout">
                     <VisualState.StateTriggers>
-                        <AdaptiveTrigger MinWindowWidth="{StaticResource SmallLayoutMinWidth}" />
+                        <AdaptiveTrigger MinWindowWidth="600" />
                         <AdaptiveTrigger MinWindowWidth="0" />
                     </VisualState.StateTriggers>
                     <VisualState.Setters>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw

@@ -143,7 +143,7 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
   <data name="VideoConference_SelectedMicrophone.Header" xml:space="preserve">
     <value>Selected microphone</value>
   </data>
-  <data name="VideoConference_CameraOverlayImagePathHeader.Text" xml:space="preserve">
+  <data name="VideoConference_CameraOverlayImagePathHeader.Header" xml:space="preserve">
     <value>Camera overlay image</value>
   </data>
   <data name="VideoConference_ToolbarPosition.Header" xml:space="preserve">
@@ -188,16 +188,16 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
   <data name="VideoConference.ModuleTitle" xml:space="preserve">
     <value>Video Conference</value>
   </data>
-  <data name="VideoConference_Camera.Text" xml:space="preserve">
+  <data name="VideoConference_Camera.Header" xml:space="preserve">
     <value>Camera</value>
   </data>
-  <data name="VideoConference_Microphone.Text" xml:space="preserve">
+  <data name="VideoConference_Microphone.Header" xml:space="preserve">
     <value>Microphone</value>
   </data>
-  <data name="VideoConference_Toolbar.Text" xml:space="preserve">
+  <data name="VideoConference_Toolbar.Header" xml:space="preserve">
     <value>Toolbar</value>
   </data>
-  <data name="VideoConference_Shortcuts.Text" xml:space="preserve">
+  <data name="VideoConference_Shortcuts.Header" xml:space="preserve">
     <value>Shortcuts</value>
   </data>
   <data name="VideoConference_CameraOverlayImageAlt.AutomationProperties.Name" xml:space="preserve">

src/settings-ui/Microsoft.PowerToys.Settings.UI/Styles/TextBlock.xaml

@@ -11,31 +11,9 @@
         <Setter Property="TextWrapping" Value="NoWrap" />
     </Style>
 
-    <Style x:Key="BodyTextStyle" TargetType="TextBlock">
-        <Setter Property="FontWeight" Value="Normal" />
-        <Setter Property="FontSize" Value="{StaticResource MediumFontSize}" />
-        <Setter Property="TextTrimming" Value="CharacterEllipsis" />
-        <Setter Property="TextWrapping" Value="Wrap" />
-    </Style>
-
-
-    <Style x:Key="SettingsGroupTitleStyle" TargetType="TextBlock" BasedOn="{StaticResource SubtitleTextBlockStyle}">
-        <Setter Property="Margin" Value="0,34,0,4" />
-        <Setter Property="FontWeight" Value="SemiBold"/>
-        <Setter Property="AutomationProperties.HeadingLevel" Value="Level2" />
-    </Style>
-
-    <Style x:Key="SettingsGroupTitleStyleAsHeader" TargetType="TextBlock" BasedOn="{StaticResource SettingsGroupTitleStyle}">
-        <Setter Property="Margin" Value="0,0,0,4" />
-    </Style>
-
     <Style x:Key="OobeSubtitleStyle" TargetType="TextBlock">
         <Setter Property="FontWeight" Value="SemiBold"/>
         <Setter Property="FontSize" Value="16" />
         <Setter Property="Margin" Value="0,16,0,0" />
     </Style>
-
-    <Style x:Key="SemiBoldBody" TargetType="TextBlock">
-        <Setter Property="FontWeight" Value="SemiBold"/>
-    </Style>
 </ResourceDictionary>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Styles/_Sizes.xaml

@@ -2,24 +2,4 @@
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:local="using:Microsoft.PowerToys.Settings.UI.Styles">
-
-    <x:Double x:Key="SidePanelWidth">240</x:Double>
-
-    <!-- Breakpoint for wide layout (side panel next to content) -->
-    <x:Double x:Key="WideLayoutMinWidth">720</x:Double>
-    
-    <!-- Breakpoint for small layout (side panel above content) -->
-    <x:Double x:Key="SmallLayoutMinWidth">600</x:Double>
-
-    <!-- Column spacing between content and sidepanel -->
-    <x:Double x:Key="DefaultColumnSpacing">24</x:Double>
-
-    <!-- Row spacing between content and sidepanel (in small mode) -->
-    <x:Double x:Key="DefaultRowSpacing">24</x:Double>
-
-    <!-- MaxWidth of the content panel, similar to W10 Settings -->
-    <x:Double x:Key="MaxContentWidth">460</x:Double>
-
-    <!-- Maximum Width of a combo box inside the content panel -->
-    <x:Double x:Key="MaxComboBoxWidth">444</x:Double>
 </ResourceDictionary>

src/settings-ui/Microsoft.PowerToys.Settings.UI/Styles/_Thickness.xaml

@@ -2,38 +2,6 @@
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
-    <!--Medium size margins-->
-    <Thickness x:Key="MediumLeftMargin">24,0,0,0</Thickness>
-    <Thickness x:Key="MediumTopMargin">0,24,0,0</Thickness>
-    <Thickness x:Key="MediumLeftRightMargin">24,0,24,0</Thickness>
-    <Thickness x:Key="MediumRightMargin">0,0,24,0</Thickness>
-    <Thickness x:Key="MediumTopBottomMargin">0,24,0,24</Thickness>
-    <Thickness x:Key="MediumLeftTopRightBottomMargin">24,24,24,24</Thickness>
-    <Thickness x:Key="MediumLeftRightBottomMargin">24,0,24,24</Thickness>
-    <Thickness x:Key="MediumBottomMargin">0,0,0,24</Thickness>
-
-    <!--Small size margins-->
-    <Thickness x:Key="SmallLeftMargin">12, 0, 0, 0</Thickness>
-    <Thickness x:Key="SmallTopMargin">0, 12, 0, 0</Thickness>
-    <Thickness x:Key="SmallTopBottomMargin">0, 12, 0, 12</Thickness>
-    <Thickness x:Key="SmallBottomMargin">0, 0, 0, 12</Thickness>
-    <Thickness x:Key="SmallLeftRightMargin">12, 0, 12, 0</Thickness>
-    <Thickness x:Key="SmallRightMargin">0, 0, 12, 0</Thickness>
-    <Thickness x:Key="SmallLeftRightBottomMargin">12, 0, 12, 12</Thickness>
-    <Thickness x:Key="SmallLeftTopRightBottomMargin">12, 12, 12, 12</Thickness>
-
-    <Thickness x:Key="AddItemButtonMargin">-10, 12, 0, 0</Thickness>
-
-    <!--Extra Small size margins-->
-    <Thickness x:Key="XSmallLeftMargin">8, 0, 0, 0</Thickness>
-    <Thickness x:Key="XSmallTopMargin">0, 8, 0, 0</Thickness>
-    <Thickness x:Key="XSmallBottomMargin">0, 0, 0, 8</Thickness>
-    <Thickness x:Key="XSmallLeftTopRightBottomMargin">8, 8, 8, 8</Thickness>
-
-    <!--Extra Extra Small size margins-->
-    <Thickness x:Key="XXSmallTopMargin">0, 4, 0, 0</Thickness>
-    <Thickness x:Key="XXSmallTopRightBottomMargin">0, 4, 4, 4</Thickness>
-
     <!-- OOBE -->
     <Thickness x:Key="OobePageContentMargin">32, 24, 32, 24</Thickness>
     

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

@@ -61,12 +61,9 @@
                         </controls:Setting.ActionContent>
                     </controls:Setting>
 
-                
+
                 </controls:SettingsGroup>
-                <!--<TextBlock x:Uid=""
-                       Style="{StaticResource SettingsGroupTitleStyleAsHeader}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsElevated, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>-->
-        </StackPanel>
+            </StackPanel>
         </controls:SettingsPageControl.ModuleContent>
 
         <controls:SettingsPageControl.ModuleLinks>

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

@@ -30,28 +30,11 @@
     </i:Interaction.Behaviors>
 
     <Grid x:Name="RootGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
-        <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>
-            </VisualStateGroup>
-        </VisualStateManager.VisualStateGroups>
-
-
+      
         <winui:NavigationView
         x:Name="navigationView"
         Background="{ThemeResource HomePageBackgroundBrush}"
         IsBackButtonVisible="Collapsed"
-           
         IsTitleBarAutoPaddingEnabled="False"
         IsBackEnabled="{x:Bind ViewModel.IsBackEnabled, Mode=OneWay}"
         SelectedItem="{x:Bind ViewModel.Selected, Mode=OneWay}"
@@ -120,11 +103,17 @@
 
                 <!--TODO(yuyoyuppe): uncomment when VCM should be enabled-->
                 <!--<winui:NavigationViewItem x:Uid="Shell_VideoConference" helpers:NavHelper.NavigateTo="views:VideoConferencePage" IsEnabled="{x:Bind ViewModel.IsVideoConferenceBuild, Mode=OneWay}">
-                    <winui:NavigationViewItem.Icon>
-                        <FontIcon Glyph="&#xE714;"/>
+                   <winui:NavigationViewItem.Icon>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsVideoConferenceMute.png" ShowAsMonochrome="False"/>
                     </winui:NavigationViewItem.Icon>
                 </winui:NavigationViewItem>-->
 
+              <winui:NavigationViewItem x:Uid="Shell_VideoConference" helpers:NavHelper.NavigateTo="views:VideoConferencePage" >
+                    <winui:NavigationViewItem.Icon>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsVideoConferenceMute.png" ShowAsMonochrome="False"/>
+                    </winui:NavigationViewItem.Icon>
+                </winui:NavigationViewItem>
+
             </winui:NavigationView.MenuItems>
             <winui:NavigationView.PaneFooter>
                 <Button Click="OobeButton_Click"

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

@@ -14,129 +14,142 @@
 
             <StackPanel Orientation="Vertical">
 
-                <ToggleSwitch x:Uid="VideoConference_Enable"
-                          IsOn="{ Binding Mode=TwoWay, Path=IsEnabled}"
-                          IsEnabled="{ Binding Mode=OneWay, Path=IsElevated }"
-                          />
+                <controls:Setting x:Uid="VideoConference_Enable">
+                    <controls:Setting.Icon>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsColorPicker.png" ShowAsMonochrome="False" />
+                    </controls:Setting.Icon>
+                    <controls:Setting.ActionContent>
+                        <ToggleSwitch IsOn="{x:Bind IsEnabled, Mode=TwoWay}" FlowDirection="RightToLeft" IsEnabled="{Binding Mode=OneWay, Path=IsElevated}"/>
+                    </controls:Setting.ActionContent>
+                </controls:Setting>
 
-                <TextBlock x:Uid="VideoConference_Shortcuts"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}" />
+                <controls:SettingsGroup x:Uid="VideoConference_Shortcuts" IsEnabled="{x:Bind Mode=OneWay, Path=IsEnabled}">
+                    <controls:Setting x:Uid="VideoConference_CameraAndMicrophoneMuteHotkeyControl_Header">
+                        <controls:Setting.Description>
+                            <TextBlock>
+                            <Run x:Uid="ShortcutWarningLabel"/>
+                            <Run Text="Win, Ctrl, Alt, Shift"/>
+                            </TextBlock>
+                        </controls:Setting.Description>
+                        <controls:Setting.ActionContent>
+                            <controls:HotkeySettingsControl Width="240" HotkeySettings="{x:Bind Path=ViewModel.CameraAndMicrophoneMuteHotkey, Mode=TwoWay}" Keys="Win, Ctrl, Alt, Shift"/>
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
 
-                <controls: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}"
-                                          />
+                    <controls:Setting x:Uid="VideoConference_MicrophoneMuteHotkeyControl_Header">
+                        <controls:Setting.Description>
+                            <TextBlock>
+                            <Run x:Uid="ShortcutWarningLabel"/>
+                            <Run Text="Win, Ctrl, Alt, Shift"/>
+                            </TextBlock>
+                        </controls:Setting.Description>
+                        <controls:Setting.ActionContent>
+                            <controls:HotkeySettingsControl Width="240" HotkeySettings="{x:Bind Path=ViewModel.MicrophoneMuteHotkey, Mode=TwoWay}" Keys="Win, Ctrl, Alt, Shift"/>
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
 
-                <controls: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}"
-                                          />
+                    <controls:Setting x:Uid="VideoConference_CameraMuteHotkeyControl_Header">
+                        <controls:Setting.Description>
+                            <TextBlock>
+                            <Run x:Uid="ShortcutWarningLabel"/>
+                            <Run Text="Win, Ctrl, Alt, Shift"/>
+                            </TextBlock>
+                        </controls:Setting.Description>
+                        <controls:Setting.ActionContent>
+                            <controls:HotkeySettingsControl Width="240" HotkeySettings="{x:Bind Path=ViewModel.CameraMuteHotkey, Mode=TwoWay}" Keys="Win, Ctrl, Alt, Shift"/>
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
 
-                <controls: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}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
+                </controls:SettingsGroup>
 
-                <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}"/>
+                <controls:SettingsGroup x:Uid="VideoConference_Microphone" IsEnabled="{x:Bind Mode=OneWay, Path=IsEnabled}">
 
-                <TextBlock x:Uid="VideoConference_Camera"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
+                    <controls:Setting x:Uid="VideoConference_SelectedMicrophone" Icon="&#xE1D6;">
+                        <controls:Setting.ActionContent>
+                            <ComboBox Width="240"
+                                      SelectedIndex="{Binding Path=SelectedMicrophoneIndex, Mode=TwoWay}"
+                                      ItemsSource="{Binding MicrophoneNames, Mode=OneTime}"/>
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
+                </controls:SettingsGroup>
 
-                <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}"/>
+                <controls:SettingsGroup x:Uid="VideoConference_Camera" IsEnabled="{x:Bind Mode=OneWay, Path=IsEnabled}">
 
-                <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>
+                    <controls:SettingExpander IsExpanded="True">
+                        <controls:SettingExpander.Header>
+                            <controls:Setting x:Uid="VideoConference_SelectedCamera" Icon="&#xE116;">
+                                <controls:Setting.ActionContent>
+                                    <ComboBox Width="240"
+                                              SelectedIndex="{Binding Path=SelectedCameraIndex, Mode=TwoWay}"
+                                              ItemsSource="{Binding CameraNames, Mode=OneTime}"
+                                              IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"/>
+                                </controls:Setting.ActionContent>
+                            </controls:Setting>
+                        </controls:SettingExpander.Header>
+                        <controls:SettingExpander.Content>
+                            <StackPanel Orientation="Vertical">
+                                <controls:Setting x:Uid="VideoConference_CameraOverlayImagePathHeader" Style="{StaticResource ExpanderContentSettingStyle}">
+                                    <controls:Setting.ActionContent>
+                                        <StackPanel Orientation="Horizontal" Spacing="8">
+                                            <Button x:Uid="VideoConference_CameraOverlayImageBrowse"
+                                                    Command="{Binding Mode=OneWay, Path=SelectOverlayImage}" />
 
-                <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 x:Uid="VideoConference_CameraOverlayImageClear"
+                                                    Command="{Binding Mode=OneWay, Path=ClearOverlayImage}"/>
+                                        </StackPanel>
+                                    </controls:Setting.ActionContent>
+                                </controls:Setting>
+                                <Border CornerRadius="4">
+                                    <Image Width="240"
+                                           x:Uid="VideoConference_CameraOverlayImageAlt"
+                                           ToolTipService.ToolTip="{Binding Mode=OneWay, Path=CameraImageOverlayPath}"
+                                           Source="{Binding Mode=OneWay, Path=CameraImageOverlayPath}"/>
+                                </Border>
+                            </StackPanel>
+                        </controls:SettingExpander.Content>
+                    </controls:SettingExpander>
 
-                    <Button IsEnabled="{Binding Mode=TwoWay, Path=IsEnabled}"
-                        Height="32"
-                        x:Uid="VideoConference_CameraOverlayImageClear"
-                        Command="{Binding Mode=OneWay, Path=ClearOverlayImage}"
-                        HorizontalAlignment="Left" />
-                </StackPanel>
+                </controls:SettingsGroup>
 
-                <TextBlock x:Uid="VideoConference_Toolbar"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"/>
 
-                <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}"
-                      />
+                <controls:SettingsGroup x:Uid="VideoConference_Toolbar" IsEnabled="{x:Bind Mode=OneWay, Path=IsEnabled}">
+
+                    <controls:SettingExpander IsExpanded="True">
+                        <controls:SettingExpander.Header>
+                            <controls:Setting x:Uid="VideoConference_ToolbarPosition" Icon="&#xEC12;">
+                                <controls:Setting.ActionContent>
+                                    <ComboBox MinWidth="240" SelectedIndex="{ Binding Mode=TwoWay, Path=ToolbarPostionIndex}">
+                                        <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>
+                                </controls:Setting.ActionContent>
+                            </controls:Setting>
+                        </controls:SettingExpander.Header>
+                        <controls:SettingExpander.Content>
+                            <StackPanel Orientation="Vertical">
+                                <controls:Setting x:Uid="VideoConference_ToolbarMonitor" Style="{StaticResource ExpanderContentSettingStyle}">
+                                    <controls:Setting.ActionContent>
+                                        <ComboBox MinWidth="240" SelectedIndex="{ Binding Mode=TwoWay, Path=ToolbarMonitorIndex}">
+                                            <ComboBoxItem x:Uid="VideoConference_ToolbarMonitor_Main"/>
+                                            <ComboBoxItem x:Uid="VideoConference_ToolbarMonitor_All"/>
+                                        </ComboBox>
+                                    </controls:Setting.ActionContent>
+                                </controls:Setting>
+                                <Rectangle Style="{StaticResource ExpanderSeparatorStyle}" />
+
+                                <CheckBox x:Uid="VideoConference_HideToolbarWhenUnmuted" IsChecked="{x:Bind Mode=TwoWay, Path=ViewModel.HideToolbarWhenUnmuted}" Margin="{StaticResource ExpanderSettingMargin}" />
+                            </StackPanel>
+                        </controls:SettingExpander.Content>
+                    </controls:SettingExpander>
+
+                </controls:SettingsGroup>
             </StackPanel>
         </controls:SettingsPageControl.ModuleContent>