Avalonia11中自定义Drawer抽屉组件

背景：

现开发的应用中需要展示下嵌页面的内容，结合web开发经验，想到使用Drawer组件可以。

鉴于不重复造轮子的想法找了找，没有找到相关的轮子，于是自己动手实现一个。

需求：

弹出抽屉组件，组件中展示下嵌需展示的内容。

实现思路：

1. DockPanel组件通过DockPanel.Dock="Right"使面板显示在右侧；
2. 通过IsVisible属性控制显隐；
3. 添加2个方法控制打开，关闭。本例为2个button，实际使用中根据实际触发；

关键代码：

<DockPanel>



	<!-- 抽屉 -->
	<Border DockPanel.Dock="Right" Width="200" Background="LightGray" IsVisible="{Binding IsDrawerOpen}">
		<StackPanel>
			<TextBlock Text="抽屉内容" FontSize="16" Margin="10" />
			<Button Content="关闭抽屉" Command="{Binding ToggleDrawerCommand}" Margin="10" />
		</StackPanel>
	</Border>

	<!-- 主内容区域 -->
	<StackPanel>
		<Button Content="打开抽屉" Command="{Binding ToggleDrawerCommand}" Margin="10" />
		<TextBlock Text="主内容区域" FontSize="16" Margin="10" />
	</StackPanel>

</DockPanel>

private bool _isDrawerOpen;

public bool IsDrawerOpen
{
    get => _isDrawerOpen;
    set => this.RaiseAndSetIfChanged(ref _isDrawerOpen, value);
}

public ReactiveCommand<Unit, Unit> ToggleDrawerCommand { get; }

private void ToggleDrawer()
{
    IsDrawerOpen = !IsDrawerOpen;
}

效果展示：

深潜：

1. 通过IsVisible属性控制显隐，从视觉效果上感觉很突然，于是引入了页面过渡效果，淡入浅出；

1. 1. 官方介绍的Transitions不能满足页面的过渡，于是引入SukiUI

1. Avalonia11中可以通过Transitions设置，目前官方已实现的如下，包含触发机制和效果。

1. 1. 如何使用过渡效果 | Avalonia Docs

      

总结：

一个小组件但是又是必须的，可以拿来即用，基本贴出了全部代码；

本例中的过渡效果使用了SuKiUI。

附SukiUI地址：GitHub - kikipoulet/SukiUI: UI Theme for AvaloniaUI

本文完。