Files
Semi.Avalonia/demo/Semi.Avalonia.Demo/Pages/DrawerPageDemo.axaml
Copilot 1d59cff87d Implement Semi Design theme for page-based navigation controls (ContentPage / DrawerPage / NavigationPage / TabbedPage) (#766)
* Initial plan

* Implement Semi Design theme for ContentPage, DrawerPage, NavigationPage, TabbedPage

Co-authored-by: zdpcdt <54255897+zdpcdt@users.noreply.github.com>

* fix: bind ItemsSource to Pages in TabControl of TabbedPage.

* chore: split demo navigation pages.

* demo: improve NavigationPage demo pages with interactive controls

Co-authored-by: zdpcdt <54255897+zdpcdt@users.noreply.github.com>

* fix: use comma-separated Padding syntax and remove trailing newline

Co-authored-by: zdpcdt <54255897+zdpcdt@users.noreply.github.com>

* feat: implement semi design theme for navigation controls in demo pages.

* feat: enhance demo pages with foreground color for better visibility

* feat: add back button visibility control and improve navigation page layout.

* chore: remove DrawerPage unused static resources.

* feat: add HighContrast resources for ContentPage, DrawerPage, NavigationPage, TabbedPage

Co-authored-by: zdpcdt <54255897+zdpcdt@users.noreply.github.com>

* feat: implement CardTabbedPage & ButtonTabbedPage themes.

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: zdpcdt <54255897+zdpcdt@users.noreply.github.com>
Co-authored-by: Dong Bin <popmessiah@hotmail.com>
2026-03-15 03:37:50 +08:00

72 lines
3.3 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" />
<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}" />
<Border Margin="12"
BorderBrush="{DynamicResource SemiColorBorder}"
BorderThickness="1"
CornerRadius="6"
ClipToBounds="True">
<DrawerPage Name="DemoDrawer"
Header="First Look"
DrawerLength="250">
<DrawerPage.DrawerHeader>
<Border Padding="16" Background="{DynamicResource SemiColorPrimary}">
<TextBlock Text="Menu" FontSize="18" FontWeight="SemiBold" Foreground="{DynamicResource SemiColorText0}" />
</Border>
</DrawerPage.DrawerHeader>
<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>
</Border>
</DockPanel>
</UserControl>