Avalonia 自定义丝滑NavigationBar控件

Avalonia 自定义丝滑NavigationBar控件

Avalonia是.Net跨平台的UI库,支持Windows,Linux,iOS,MacOS,Android等;
本文测试内容为使用Avalonia在创建NavigationBar控件,并带有类似WPF的丝滑动画;
本文代码

步骤

1. 安装Avalonia For VS2022扩展
2. 新建名为NavigationBarApp的Avalonia Cross Platform项目及名为NavigationBar的库Avalonia项目
3. 将NavigationBarApp主工程及各个平台的启动工程改为.Net8
4. NavigationBarApp工程增加如下引用

  <ItemGroup>
    <ProjectReference Include="..\NavigationBar\NavigationBar.csproj" />
	  <PackageReference Include="Prism.Avalonia" Version="8.1.97.11000" />
	  <PackageReference Include="Prism.DryIoc.Avalonia" Version="8.1.97.11000" />
  </ItemGroup>

5. 写代码主要为NavigationBar库工程实现水平及垂直导航条
6. 启动及调试代码

关键代码

NavigationBarApp

        <navigation:VerticalMagicBar x:Name="vbar"
                                     Grid.Row="1"
                                     Grid.Column="0"
                                     Width="90"
                                     Height="560"
                                     HorizontalAlignment="Left"
                                     FontFamily="{StaticResource FIcon}">
            <!--  这里添加 ListBoxItem  -->
            <navigation:VerticalMagicBarItem Command="{Binding GotoPageCommand}"
                                             CommandParameter="1"
                                             Content="主页"
                                             Tag="&#xe655;" />
            <navigation:VerticalMagicBarItem Command="{Binding GotoPageCommand}"
                                             CommandParameter="2"
                                             Content="实时数据"
                                             Tag="&#xe61b;" />
        </navigation:VerticalMagicBar>

   public partial class MainView : UserControl
   {
       public MainView()
       {
           InitializeComponent();
           this.Loaded += MainView_Loaded;
       }

       private void MainView_Loaded(object? sender, Avalonia.Interactivity.RoutedEventArgs e)
       {
           bar.SelectedIndex = 0;
           vbar.SelectedIndex = 0;
       }
   }

切换主题代码

   public static void SetThemeVariant(bool IsDark)
   {
       var app = Application.Current;
       if (app is not null)
       {
           if (IsDark)
           {
               app.RequestedThemeVariant = ThemeVariant.Dark;
           }
           else
           {
               app.RequestedThemeVariant = ThemeVariant.Light;
           }
       }
   }

效果

备注说明

1. iconfont 阿里巴巴矢量图标库,其图标可自定义生成
2. 理论上支持Android及WebAssembly平台,但本人未测试
3. 每个导航条大小固定为80