feat(winui3): wire Settings drawer slide-in animation into MainWindow

Hosts SettingsDrawer in the main content grid as a fixed-width 400px
panel positioned at the right edge, with a TranslateTransform pre-set
to X=400 so it starts off-screen. The rail's settings icon triggers a
220ms ease-out-quart slide-in storyboard; CloseRequested (or the
drawer's Esc/close button) triggers a 180ms ease-in slide-out.
IsHitTestVisible toggles in sync so the off-screen drawer doesn't
intercept clicks on the participants list.

This is the structural commitment from DESIGN.md: settings live in a
right-drawer (not a permanent 380px panel), the participants table
reclaims full width when settings aren't being edited.

Builds clean.

Followup: tab content currently rebuilds imperatively in code-behind;
wire it to a SettingsViewModel mirror of the WPF host's
GlobalSettingsViewModel once the view-model migration starts (Phase 4
of the migration plan).
This commit is contained in:
Zac Gaetano 2026-05-13 00:20:23 -04:00
parent c150bce28e
commit 2909d8b1d7
2 changed files with 82 additions and 1 deletions

View file

@ -3,7 +3,8 @@
x:Class="TeamsISO.App.WinUI.Views.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:models="using:TeamsISO.App.WinUI.Models">
xmlns:models="using:TeamsISO.App.WinUI.Models"
xmlns:views="using:TeamsISO.App.WinUI.Views">
<!--
TeamsISO MainWindow — redesigned IA per the approved shape brief.
@ -32,6 +33,29 @@
<ColumnDefinition Width="64"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.Resources>
<!-- Drawer slide-in: 220ms ease-out-quart, translates 400px → 0 -->
<Storyboard x:Key="DrawerSlideIn">
<DoubleAnimation Storyboard.TargetName="DrawerTransform"
Storyboard.TargetProperty="X"
To="0"
Duration="0:0:0.22">
<DoubleAnimation.EasingFunction>
<QuarticEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
<Storyboard x:Key="DrawerSlideOut">
<DoubleAnimation Storyboard.TargetName="DrawerTransform"
Storyboard.TargetProperty="X"
To="400"
Duration="0:0:0.18">
<DoubleAnimation.EasingFunction>
<QuarticEase EasingMode="EaseIn"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</Grid.Resources>
<!-- ═══════════════════════ LEFT RAIL ═══════════════════════ -->
<Border Grid.Column="0"
@ -106,6 +130,7 @@
<Button x:Name="SettingsButton"
Style="{StaticResource ButtonRailIcon}"
Margin="8,0"
Click="OnSettingsClick"
ToolTipService.ToolTip="Settings">
<FontIcon Glyph="&#xE713;"
FontSize="20"
@ -444,6 +469,18 @@
</StackPanel>
</Border>
<!-- ─── Settings drawer (slides over rows 1-3) ─── -->
<views:SettingsDrawer x:Name="SettingsDrawerHost"
Grid.Row="0"
Grid.RowSpan="4"
HorizontalAlignment="Right"
Width="400"
IsHitTestVisible="False">
<views:SettingsDrawer.RenderTransform>
<TranslateTransform x:Name="DrawerTransform" X="400"/>
</views:SettingsDrawer.RenderTransform>
</views:SettingsDrawer>
<!-- ─── Status bar ─── -->
<Grid Grid.Row="4"
Padding="32,8,32,8"

View file

@ -63,6 +63,50 @@ public sealed partial class MainWindow : Window
ThemeManager.Current.Toggle();
}
private bool _drawerOpen;
/// <summary>
/// Toggle the settings drawer with a slide animation. The drawer is
/// pre-translated 400px off the right edge in XAML; the storyboard
/// animates X back to 0 to slide it in. Hit-testing is gated so the
/// off-screen drawer doesn't intercept clicks on the participants list.
/// </summary>
private void OnSettingsClick(object sender, RoutedEventArgs e)
{
if (_drawerOpen)
{
CloseDrawer();
}
else
{
OpenDrawer();
}
}
private void OpenDrawer()
{
if (_drawerOpen) return;
_drawerOpen = true;
SettingsDrawerHost.IsHitTestVisible = true;
var sb = (Microsoft.UI.Xaml.Media.Animation.Storyboard)((Microsoft.UI.Xaml.Controls.Grid)Content)
.Resources["DrawerSlideIn"];
sb.Begin();
SettingsDrawerHost.CloseRequested -= OnDrawerCloseRequested;
SettingsDrawerHost.CloseRequested += OnDrawerCloseRequested;
}
private void CloseDrawer()
{
if (!_drawerOpen) return;
_drawerOpen = false;
var sb = (Microsoft.UI.Xaml.Media.Animation.Storyboard)((Microsoft.UI.Xaml.Controls.Grid)Content)
.Resources["DrawerSlideOut"];
sb.Completed += (_, _) => SettingsDrawerHost.IsHitTestVisible = false;
sb.Begin();
}
private void OnDrawerCloseRequested(object? sender, System.EventArgs e) => CloseDrawer();
/// <summary>
/// Push a resolved theme to the visual tree and to the AppWindow
/// title-bar buttons. Called on every <see cref="ThemeManager.Themed"/>