Avalonia 自定义丝滑NavigationBar控件

最新推荐文章于 2025-01-25 20:31:24 发布

文光山石

最新推荐文章于 2025-01-25 20:31:24 发布

阅读量1.6k

点赞数 16

文章标签： .net wasm wpf

本文链接：https://blog.youkuaiyun.com/ssl321/article/details/135866062

版权

Avalonia 自定义丝滑NavigationBar控件

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

步骤

安装Avalonia For VS2022扩展
新建名为NavigationBarApp的Avalonia Cross Platform项目及名为NavigationBar的库Avalonia项目
将NavigationBarApp主工程及各个平台的启动工程改为.Net8
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>

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

关键代码

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;
           }
       }
   }