Files
Semi.Avalonia/demo/Semi.Avalonia.Demo/Pages/DrawerPageDemo.axaml
Dong Bin 1348149957 Update Drawer to match upstream design (#790)
* feat: update DrawerPage and related resources for improved layout and functionality

* feat: enable mouse swipe gesture for Drawer control.

* chore: remove useless resources.

* chore: remove useless Style.

* chore: using TemplateBinding.

* fix: using InnerPathIcon theme for Icon.

* fix: use normal Binding.

---------

Co-authored-by: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
2026-04-07 23:56:17 +08:00

77 lines
3.5 KiB
XML

<UserControl
x:Class="Semi.Avalonia.Demo.Pages.DrawerPageDemo"
xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="700"
d:DesignWidth="800"
mc:Ignorable="d">
<DockPanel>
<ScrollViewer DockPanel.Dock="Right" Width="260">
<StackPanel Margin="12" Spacing="8">
<TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16"
Foreground="{DynamicResource SemiColorText0}" />
<Button Content="Toggle Drawer"
HorizontalAlignment="Stretch"
Click="OnToggleDrawer" />
<Separator />
<CheckBox Name="GestureCheck"
Content="Gesture Enabled"
IsChecked="True"
IsCheckedChanged="OnGestureChanged" />
<ComboBox SelectionChanged="OnLayoutChanged" >
<ComboBoxItem Content="CompactOverlay" />
<ComboBoxItem Content="CompactInline" />
<ComboBoxItem Content="Split" />
<ComboBoxItem Content="Overlay" />
</ComboBox>
<Separator />
<TextBlock Text="Status" FontWeight="SemiBold" FontSize="14" />
<TextBlock Name="StatusText"
Text="Drawer: Closed"
Opacity="0.7"
TextWrapping="Wrap" />
</StackPanel>
</ScrollViewer>
<Border DockPanel.Dock="Right" Width="1" Background="{DynamicResource SemiColorBackground0}" />
<DrawerPage Name="DemoDrawer"
Margin="12"
Header="First Look"
DrawerLayoutBehavior="Overlay"
CompactDrawerLength="80"
DrawerLength="250">
<DrawerPage.DrawerHeader>
<TextBlock Text="Menu" Margin="16" FontSize="18" FontWeight="SemiBold" Foreground="{DynamicResource SemiColorPrimary}" />
</DrawerPage.DrawerHeader>
<DrawerPage.DrawerFooter>
<TextBlock HorizontalAlignment="Center" Text="Powered by IRIHI" Margin="8" />
</DrawerPage.DrawerFooter>
<DrawerPage.Drawer>
<ListBox Name="DrawerMenu" SelectionChanged="OnMenuSelectionChanged">
<ListBoxItem Content="Home" />
<ListBoxItem Content="Settings" />
<ListBoxItem Content="Profile" />
<ListBoxItem Content="About" />
</ListBox>
</DrawerPage.Drawer>
<DrawerPage.Content>
<ContentPage Header="Home">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Spacing="8">
<TextBlock Text="Home Page" FontSize="20" FontWeight="SemiBold" HorizontalAlignment="Center" />
<TextBlock Text="Swipe from the left edge or use the hamburger button to open the drawer."
FontSize="13" Opacity="0.7" TextWrapping="Wrap" TextAlignment="Center" MaxWidth="300" />
</StackPanel>
</ContentPage>
</DrawerPage.Content>
</DrawerPage>
</DockPanel>
</UserControl>