csharpc-sharpdotnetxamlavaloniauicross-platformcross-platform-xamlavaloniaguimulti-platformuser-interfacedotnetcore
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
176 lines
9.4 KiB
176 lines
9.4 KiB
<UserControl xmlns="https://github.com/avaloniaui"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
|
x:Class="ControlCatalog.Pages.ModernAppPage">
|
|
|
|
<UserControl.Resources>
|
|
<!-- Color tokens -->
|
|
<SolidColorBrush x:Key="ModernPrimary" Color="#0dccf2"/>
|
|
<SolidColorBrush x:Key="ModernBg" Color="#f5f8f8"/>
|
|
<SolidColorBrush x:Key="ModernDark" Color="#101f22"/>
|
|
<SolidColorBrush x:Key="ModernSurface" Color="#1a2e33"/>
|
|
<SolidColorBrush x:Key="ModernMuted" Color="#8a9ba3"/>
|
|
<SolidColorBrush x:Key="ModernBorder" Color="#dde6e9"/>
|
|
</UserControl.Resources>
|
|
|
|
<DockPanel>
|
|
|
|
<!-- Info panel (desktop only, >= 640 px) -->
|
|
<ScrollViewer x:Name="InfoPanel" DockPanel.Dock="Right" Width="290" IsVisible="False">
|
|
<StackPanel Margin="16" Spacing="16">
|
|
|
|
<TextBlock Text="ModernApp" FontSize="16" FontWeight="SemiBold"
|
|
Foreground="{DynamicResource SystemControlHighlightAccentBrush}"/>
|
|
|
|
<TextBlock TextWrapping="Wrap" FontSize="12" Opacity="0.7"
|
|
Text="Travel social app using a top-placement DrawerPage. A slide-down nav pane gives access to Discover, My Trips, Profile, and Settings. Features destination cards, story circles, an experience feed, a stats profile, and a travel gallery." />
|
|
|
|
<Separator/>
|
|
|
|
<TextBlock Text="Navigation Flow" FontSize="13" FontWeight="SemiBold"/>
|
|
<StackPanel Spacing="4">
|
|
<TextBlock FontSize="12" TextWrapping="Wrap" Text="1. DrawerPage: root, placement=Top"/>
|
|
<TextBlock FontSize="12" TextWrapping="Wrap" Text="2. Hamburger opens slide-down pane (260 px)"/>
|
|
<TextBlock FontSize="12" TextWrapping="Wrap" Text="3. Pane items navigate NavigationPage sections"/>
|
|
<TextBlock FontSize="12" TextWrapping="Wrap" Text="4. Discover has full-width destination cards"/>
|
|
<TextBlock FontSize="12" TextWrapping="Wrap" Text="5. Profile shows stats and a travel gallery"/>
|
|
</StackPanel>
|
|
|
|
<Separator/>
|
|
|
|
<TextBlock Text="Key Code" FontSize="13" FontWeight="SemiBold"/>
|
|
<Border Background="{DynamicResource SystemControlBackgroundBaseLowBrush}"
|
|
CornerRadius="4" Padding="8">
|
|
<TextBlock FontFamily="Cascadia Code,Consolas,Menlo,monospace"
|
|
FontSize="10" TextWrapping="Wrap"
|
|
Text="<DrawerPage
 DrawerPlacement="Top"
 DrawerLength="260"
 DrawerLayoutBehavior="Overlay">
 <DrawerPage.Drawer>
 <!-- nav items -->
 </DrawerPage.Drawer>
 <NavigationPage .../>
</DrawerPage>"/>
|
|
</Border>
|
|
|
|
</StackPanel>
|
|
</ScrollViewer>
|
|
<Border BorderBrush="{DynamicResource SystemControlForegroundBaseMediumLowBrush}"
|
|
BorderThickness="1" CornerRadius="8" ClipToBounds="True">
|
|
|
|
<DrawerPage x:Name="DrawerPageControl"
|
|
DrawerPlacement="Top"
|
|
DrawerLength="260"
|
|
DrawerLayoutBehavior="Overlay"
|
|
Background="{StaticResource ModernBg}"
|
|
DrawerBackground="White">
|
|
|
|
<DrawerPage.Resources>
|
|
<SolidColorBrush x:Key="NavigationControlNavBarBackground" Color="#ffffff"/>
|
|
</DrawerPage.Resources>
|
|
|
|
<!-- Header shown in PART_TopBar alongside the hamburger -->
|
|
<DrawerPage.Header>
|
|
<DockPanel>
|
|
<PathIcon x:Name="PageActionIcon"
|
|
Width="20" Height="20"
|
|
DockPanel.Dock="Right"
|
|
VerticalAlignment="Center"
|
|
Foreground="#0d1f22"
|
|
Data="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
|
|
<TextBlock x:Name="PageTitle"
|
|
Text="Discover"
|
|
FontSize="18" FontWeight="Bold"
|
|
Foreground="#0d1f22"
|
|
VerticalAlignment="Center"
|
|
HorizontalAlignment="Center"/>
|
|
</DockPanel>
|
|
</DrawerPage.Header>
|
|
|
|
<!-- Drawer header strip -->
|
|
<DrawerPage.DrawerHeader>
|
|
<Border Background="White" Padding="8,8,16,8"
|
|
BorderBrush="#dde6e9" BorderThickness="0,0,0,1">
|
|
<DockPanel>
|
|
<Button x:Name="BtnCloseDrawer" Click="OnCloseDrawer"
|
|
DockPanel.Dock="Left"
|
|
Background="Transparent" BorderThickness="0"
|
|
Padding="8,4" VerticalAlignment="Center">
|
|
<PathIcon Width="18" Height="18" Foreground="#0d1f22"
|
|
Data="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
|
|
</Button>
|
|
<TextBlock Text="Menu Open"
|
|
FontSize="16" FontWeight="Bold"
|
|
Foreground="#0d1f22"
|
|
VerticalAlignment="Center"
|
|
HorizontalAlignment="Center"/>
|
|
</DockPanel>
|
|
</Border>
|
|
</DrawerPage.DrawerHeader>
|
|
<DrawerPage.Drawer>
|
|
<StackPanel>
|
|
|
|
<Border Height="1" Background="#dde6e9" Margin="0,0,0,4"/>
|
|
|
|
<Button x:Name="BtnDiscover" Tag="Discover" Click="OnNavClick"
|
|
HorizontalAlignment="Stretch" HorizontalContentAlignment="Left"
|
|
Background="Transparent" BorderThickness="0"
|
|
Padding="20,14" CornerRadius="0">
|
|
<StackPanel Orientation="Horizontal" Spacing="16">
|
|
<PathIcon Width="20" Height="20" Foreground="#0d1f22"
|
|
Data="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
|
|
<TextBlock Text="Discover" Foreground="#0d1f22" FontSize="15"
|
|
VerticalAlignment="Center"/>
|
|
</StackPanel>
|
|
</Button>
|
|
|
|
<Border Height="1" Background="#f0f4f5" Margin="20,0"/>
|
|
|
|
<Button x:Name="BtnMyTrips" Tag="MyTrips" Click="OnNavClick"
|
|
HorizontalAlignment="Stretch" HorizontalContentAlignment="Left"
|
|
Background="Transparent" BorderThickness="0"
|
|
Padding="20,14" CornerRadius="0">
|
|
<StackPanel Orientation="Horizontal" Spacing="16">
|
|
<PathIcon Width="20" Height="20" Foreground="#0d1f22"
|
|
Data="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2zm0 15l-5-2.18L7 18V5h10v13z"/>
|
|
<TextBlock Text="My Trips" Foreground="#0d1f22" FontSize="15"
|
|
VerticalAlignment="Center"/>
|
|
</StackPanel>
|
|
</Button>
|
|
|
|
<Border Height="1" Background="#f0f4f5" Margin="20,0"/>
|
|
|
|
<Button x:Name="BtnProfile" Tag="Profile" Click="OnNavClick"
|
|
HorizontalAlignment="Stretch" HorizontalContentAlignment="Left"
|
|
Background="Transparent" BorderThickness="0"
|
|
Padding="20,14" CornerRadius="0">
|
|
<StackPanel Orientation="Horizontal" Spacing="16">
|
|
<PathIcon Width="20" Height="20" Foreground="#0d1f22"
|
|
Data="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
|
|
<TextBlock Text="Profile" Foreground="#0d1f22" FontSize="15"
|
|
VerticalAlignment="Center"/>
|
|
</StackPanel>
|
|
</Button>
|
|
|
|
<Border Height="1" Background="#f0f4f5" Margin="20,0"/>
|
|
|
|
<Button x:Name="BtnSettings" Tag="Settings" Click="OnNavClick"
|
|
HorizontalAlignment="Stretch" HorizontalContentAlignment="Left"
|
|
Background="Transparent" BorderThickness="0"
|
|
Padding="20,14" CornerRadius="0">
|
|
<StackPanel Orientation="Horizontal" Spacing="16">
|
|
<PathIcon Width="20" Height="20" Foreground="#0d1f22"
|
|
Data="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.4-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.57 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>
|
|
<TextBlock Text="Settings" Foreground="#0d1f22" FontSize="15"
|
|
VerticalAlignment="Center"/>
|
|
</StackPanel>
|
|
</Button>
|
|
|
|
<!-- Bottom accent line -->
|
|
<Border Height="3" Background="#0dccf2" Margin="0,8,0,0"/>
|
|
|
|
</StackPanel>
|
|
</DrawerPage.Drawer>
|
|
<NavigationPage x:Name="NavPage">
|
|
<NavigationPage.Resources>
|
|
<SolidColorBrush x:Key="NavigationBarBackground" Color="Transparent" />
|
|
</NavigationPage.Resources>
|
|
</NavigationPage>
|
|
|
|
</DrawerPage>
|
|
</Border>
|
|
|
|
</DockPanel>
|
|
</UserControl>
|
|
|