feat: add customizations for DrawerPageDemo.

This commit is contained in:
Zhang Dian
2026-04-24 18:24:57 +08:00
parent 89d6808214
commit 6fc6e3000f
2 changed files with 68 additions and 77 deletions

View File

@@ -10,45 +10,84 @@
<DockPanel> <DockPanel>
<ScrollViewer DockPanel.Dock="Right" Width="260"> <ScrollViewer DockPanel.Dock="Right" Width="260">
<StackPanel Margin="12" Spacing="8"> <StackPanel Margin="12" Spacing="8">
<TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16" <TextBlock
Foreground="{DynamicResource SemiColorText0}" /> Theme="{DynamicResource TitleTextBlock}"
Classes="H4"
Text="Configuration" />
<Button Content="Toggle Drawer" <CheckBox Name="ToggleDrawerCheck"
HorizontalAlignment="Stretch" Content="Toggle Drawer" />
Click="OnToggleDrawer" />
<Separator />
<CheckBox Name="GestureCheck" <CheckBox Name="GestureCheck"
Content="Gesture Enabled" Content="Gesture Enabled"
IsChecked="True" IsChecked="True" />
IsCheckedChanged="OnGestureChanged" />
<TextBlock Text="Behavior" FontSize="12" />
<ComboBox SelectionChanged="OnLayoutChanged" > <ComboBox
<ComboBoxItem Content="CompactOverlay" /> Name="BehaviorComboBox"
<ComboBoxItem Content="CompactInline" /> HorizontalAlignment="Stretch"
<ComboBoxItem Content="Split" /> SelectedIndex="0">
<ComboBoxItem Content="Overlay" /> <DrawerBehavior>Auto</DrawerBehavior>
<DrawerBehavior>Flyout</DrawerBehavior>
<DrawerBehavior>Locked</DrawerBehavior>
<DrawerBehavior>Disabled</DrawerBehavior>
</ComboBox> </ComboBox>
<Separator /> <TextBlock Text="Layout" FontSize="12" />
<ComboBox
Name="LayoutComboBox"
HorizontalAlignment="Stretch"
SelectedIndex="0">
<DrawerLayoutBehavior>Overlay</DrawerLayoutBehavior>
<DrawerLayoutBehavior>Split</DrawerLayoutBehavior>
<DrawerLayoutBehavior>CompactOverlay</DrawerLayoutBehavior>
<DrawerLayoutBehavior>CompactInline</DrawerLayoutBehavior>
</ComboBox>
<TextBlock Text="Status" FontWeight="SemiBold" FontSize="14" /> <TextBlock Text="Layout" FontSize="12" />
<TextBlock Name="StatusText" <ComboBox
Text="Drawer: Closed" Name="PlacementComboBox"
Opacity="0.7" HorizontalAlignment="Stretch"
TextWrapping="Wrap" /> SelectedIndex="0">
<DrawerPlacement>Left</DrawerPlacement>
<DrawerPlacement>Right</DrawerPlacement>
<DrawerPlacement>Top</DrawerPlacement>
<DrawerPlacement>Bottom</DrawerPlacement>
</ComboBox>
<TextBlock Text="Compact Drawer Length" FontSize="12" />
<StackPanel Orientation="Horizontal" Spacing="8">
<Slider Name="CompactDrawerLengthSlider"
Minimum="0" Maximum="250" Value="80"
TickFrequency="1"
IsSnapToTickEnabled="True"
Width="150" />
<TextBlock Text="{Binding #CompactDrawerLengthSlider.Value}" />
</StackPanel>
<TextBlock Text="Drawer Length" FontSize="12" />
<StackPanel Orientation="Horizontal" Spacing="8">
<Slider Name="DrawerLengthSlider"
Minimum="150" Maximum="400" Value="260"
TickFrequency="1"
IsSnapToTickEnabled="True"
Width="150" />
<TextBlock Text="{Binding #DrawerLengthSlider.Value}" />
</StackPanel>
</StackPanel> </StackPanel>
</ScrollViewer> </ScrollViewer>
<Border DockPanel.Dock="Right" Width="1" Background="{DynamicResource SemiColorBackground0}" /> <Border DockPanel.Dock="Right" Width="1" Background="{DynamicResource SemiColorBackground0}" />
<DrawerPage Name="DemoDrawer" <DrawerPage Name="DemoDrawer"
Margin="12" Margin="12"
Header="First Look" Header="First Look"
DrawerLayoutBehavior="Overlay" IsOpen="{Binding #ToggleDrawerCheck.IsChecked}"
CompactDrawerLength="80" IsGestureEnabled="{Binding #GestureCheck.IsChecked}"
DrawerLength="250"> DrawerBehavior="{Binding #BehaviorComboBox.SelectedItem}"
DrawerLayoutBehavior="{Binding #LayoutComboBox.SelectedItem}"
DrawerPlacement="{Binding #PlacementComboBox.SelectedItem}"
CompactDrawerLength="{Binding #CompactDrawerLengthSlider.Value}"
DrawerLength="{Binding #DrawerLengthSlider.Value}">
<DrawerPage.DrawerHeader> <DrawerPage.DrawerHeader>
<TextBlock Text="Menu" Margin="16" FontSize="18" FontWeight="SemiBold" Foreground="{DynamicResource SemiColorPrimary}" /> <TextBlock Text="Menu" Margin="16" FontSize="18" FontWeight="SemiBold" Foreground="{DynamicResource SemiColorPrimary}" />
</DrawerPage.DrawerHeader> </DrawerPage.DrawerHeader>
@@ -74,4 +113,4 @@
</DrawerPage.Content> </DrawerPage.Content>
</DrawerPage> </DrawerPage>
</DockPanel> </DockPanel>
</UserControl> </UserControl>

View File

@@ -1,8 +1,6 @@
using System; using System.Linq;
using System.Linq;
using Avalonia.Controls; using Avalonia.Controls;
using Avalonia.Input.GestureRecognizers; using Avalonia.Input.GestureRecognizers;
using Avalonia.Interactivity;
using Avalonia.Layout; using Avalonia.Layout;
namespace Semi.Avalonia.Demo.Pages; namespace Semi.Avalonia.Demo.Pages;
@@ -15,32 +13,6 @@ public partial class DrawerPageDemo : UserControl
EnableMouseSwipeGesture(DemoDrawer); EnableMouseSwipeGesture(DemoDrawer);
} }
protected override void OnLoaded(RoutedEventArgs e)
{
base.OnLoaded(e);
DemoDrawer.Opened += OnDrawerStatusChanged;
DemoDrawer.Closed += OnDrawerStatusChanged;
}
protected override void OnUnloaded(RoutedEventArgs e)
{
base.OnUnloaded(e);
DemoDrawer.Opened -= OnDrawerStatusChanged;
DemoDrawer.Closed -= OnDrawerStatusChanged;
}
private void OnDrawerStatusChanged(object? sender, EventArgs e) => UpdateStatus();
private void OnToggleDrawer(object? sender, RoutedEventArgs e)
{
DemoDrawer.IsOpen = !DemoDrawer.IsOpen;
}
private void OnGestureChanged(object? sender, RoutedEventArgs e)
{
DemoDrawer.IsGestureEnabled = GestureCheck.IsChecked == true;
}
private void OnMenuSelectionChanged(object? sender, SelectionChangedEventArgs e) private void OnMenuSelectionChanged(object? sender, SelectionChangedEventArgs e)
{ {
if (DrawerMenu.SelectedItem is ListBoxItem item) if (DrawerMenu.SelectedItem is ListBoxItem item)
@@ -50,10 +22,7 @@ public partial class DrawerPageDemo : UserControl
Header = item.Content?.ToString(), Header = item.Content?.ToString(),
Content = new TextBlock Content = new TextBlock
{ {
Text = $"{item.Content} page content", Text = $"{item.Content} page content", FontSize = 16, HorizontalAlignment = HorizontalAlignment.Center, VerticalAlignment = VerticalAlignment.Center,
FontSize = 16,
HorizontalAlignment = HorizontalAlignment.Center,
VerticalAlignment = VerticalAlignment.Center,
}, },
HorizontalContentAlignment = HorizontalAlignment.Stretch, HorizontalContentAlignment = HorizontalAlignment.Stretch,
VerticalContentAlignment = VerticalAlignment.Stretch VerticalContentAlignment = VerticalAlignment.Stretch
@@ -62,11 +31,6 @@ public partial class DrawerPageDemo : UserControl
} }
} }
private void UpdateStatus()
{
StatusText.Text = $"Drawer: {(DemoDrawer.IsOpen ? "Open" : "Closed")}";
}
private static void EnableMouseSwipeGesture(Control control) private static void EnableMouseSwipeGesture(Control control)
{ {
var recognizer = control.GestureRecognizers var recognizer = control.GestureRecognizers
@@ -75,16 +39,4 @@ public partial class DrawerPageDemo : UserControl
recognizer?.IsMouseEnabled = true; recognizer?.IsMouseEnabled = true;
} }
}
private void OnLayoutChanged(object? sender, SelectionChangedEventArgs e)
{
DemoDrawer.DrawerLayoutBehavior = (sender as ComboBox)?.SelectedIndex switch
{
0 => DrawerLayoutBehavior.CompactOverlay,
1 => DrawerLayoutBehavior.CompactInline,
2 => DrawerLayoutBehavior.Split,
3 => DrawerLayoutBehavior.Overlay,
_ => DrawerLayoutBehavior.CompactOverlay
};
}
}