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"
|
x:Class="TeamsISO.App.WinUI.Views.MainWindow"
|
||||||
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
|
||||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
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.
|
TeamsISO MainWindow — redesigned IA per the approved shape brief.
|
||||||
|
|
@ -32,6 +33,29 @@
|
||||||
<ColumnDefinition Width="64"/>
|
<ColumnDefinition Width="64"/>
|
||||||
<ColumnDefinition Width="*"/>
|
<ColumnDefinition Width="*"/>
|
||||||
</Grid.ColumnDefinitions>
|
</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 ═══════════════════════ -->
|
<!-- ═══════════════════════ LEFT RAIL ═══════════════════════ -->
|
||||||
<Border Grid.Column="0"
|
<Border Grid.Column="0"
|
||||||
|
|
@ -106,6 +130,7 @@
|
||||||
<Button x:Name="SettingsButton"
|
<Button x:Name="SettingsButton"
|
||||||
Style="{StaticResource ButtonRailIcon}"
|
Style="{StaticResource ButtonRailIcon}"
|
||||||
Margin="8,0"
|
Margin="8,0"
|
||||||
|
Click="OnSettingsClick"
|
||||||
ToolTipService.ToolTip="Settings">
|
ToolTipService.ToolTip="Settings">
|
||||||
<FontIcon Glyph=""
|
<FontIcon Glyph=""
|
||||||
FontSize="20"
|
FontSize="20"
|
||||||
|
|
@ -444,6 +469,18 @@
|
||||||
</StackPanel>
|
</StackPanel>
|
||||||
</Border>
|
</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 ─── -->
|
<!-- ─── Status bar ─── -->
|
||||||
<Grid Grid.Row="4"
|
<Grid Grid.Row="4"
|
||||||
Padding="32,8,32,8"
|
Padding="32,8,32,8"
|
||||||
|
|
|
||||||
|
|
@ -63,6 +63,50 @@ public sealed partial class MainWindow : Window
|
||||||
ThemeManager.Current.Toggle();
|
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>
|
/// <summary>
|
||||||
/// Push a resolved theme to the visual tree and to the AppWindow
|
/// Push a resolved theme to the visual tree and to the AppWindow
|
||||||
/// title-bar buttons. Called on every <see cref="ThemeManager.Themed"/>
|
/// title-bar buttons. Called on every <see cref="ThemeManager.Themed"/>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue