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:
parent
c150bce28e
commit
2909d8b1d7
2 changed files with 82 additions and 1 deletions
|
|
@ -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=""
|
||||
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"
|
||||
|
|
|
|||
|
|
@ -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"/>
|
||||
|
|
|
|||
Loading…
Reference in a new issue