add: 左侧页面切换按钮布局

Author: chenxuuu

llcomNext/LLCOM/App.axaml

@@ -12,5 +12,12 @@
 
     <Application.Styles>
         <semi:SemiTheme Locale="zh-CN" />
+        <semi:SemiPopupAnimations />
+        <StyleInclude Source="/Styles/MainStyle.axaml" />
     </Application.Styles>
+
+    <Application.Resources>
+        <FontFamily x:Key="Phosphor">/Assets/Fonts/Phosphor.ttf#Phosphor</FontFamily>
+        <FontFamily x:Key="PhosphorFill">/Assets/Fonts/Phosphor.ttf#Phosphor-Fill</FontFamily>
+    </Application.Resources>
 </Application>

llcomNext/LLCOM/Assets/Fonts/Phosphor.ttf

@@ -10,6 +10,7 @@
   </PropertyGroup>
 
   <ItemGroup>
+    <Folder Include="Assets\Images\" />
     <Folder Include="Models\" />
     <AvaloniaResource Include="Assets\**" />
   </ItemGroup>
@@ -25,6 +26,7 @@
     <PackageReference Include="Avalonia.Fonts.Inter" Version="11.2.5" />
     <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
     <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="11.2.5" />
+    <PackageReference Include="Avalonia.Svg.Skia" Version="11.2.0.2" />
     <PackageReference Include="CommunityToolkit.Mvvm" Version="8.4.0" />
     <PackageReference Include="Microsoft.Extensions.DependencyInjection" Version="9.0.3" />
     <PackageReference Include="NLua" Version="1.7.4" />

llcomNext/LLCOM/LLCOM.csproj

@@ -0,0 +1,27 @@
+<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Design.PreviewWith>
+        <StackPanel>
+            <Button Classes="IconButton" Content="&#xEB56;" />
+            <Button Classes="IconButtonActivated" Content="&#xEB56;" />
+        </StackPanel>
+    </Design.PreviewWith>
+
+    <!--  Add Styles Here  -->
+
+    <Style Selector="Button.IconButton">
+        <Setter Property="FontFamily" Value="{DynamicResource Phosphor}" />
+        <Setter Property="Padding" Value="0" />
+        <Setter Property="Theme" Value="{DynamicResource BorderlessButton}" />
+        <Setter Property="Height" Value="40" />
+        <Setter Property="Width" Value="40" />
+        <Setter Property="FontSize" Value="20" />
+    </Style>
+    <Style Selector="Button.IconButtonActivated">
+        <Setter Property="FontFamily" Value="{DynamicResource PhosphorFill}" />
+        <Setter Property="Padding" Value="0" />
+        <Setter Property="Theme" Value="{DynamicResource SolidButton}" />
+        <Setter Property="Height" Value="40" />
+        <Setter Property="Width" Value="40" />
+        <Setter Property="FontSize" Value="20" />
+    </Style>
+</Styles>

llcomNext/LLCOM/Styles/MainStyle.axaml

@@ -1,12 +1,23 @@
 using System;
 using System.Collections.Generic;
+using System.Collections.ObjectModel;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
 
 namespace LLCOM.ViewModels;
 
-public partial class MainViewModel(Func<Type, ViewModelBase?> getService) : ViewModelBase
+public partial class MainViewModel : ViewModelBase
 {
+    private Func<Type, ViewModelBase?> GetService;
+    
+
+    
+    public MainViewModel(Func<Type, ViewModelBase?> getService)
+    {
+        GetService = getService;
+    }
 
 }

llcomNext/LLCOM/ViewModels/MainViewModel.cs

@@ -1,4 +1,5 @@
 <UserControl
+    Background="{DynamicResource SemiColorBackground0}"
     d:DesignHeight="800"
     d:DesignWidth="1200"
     mc:Ignorable="d"
@@ -9,7 +10,36 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:vm="using:LLCOM.ViewModels"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <Grid>
-        <Button Content="test" />
+    <Grid ColumnDefinitions="auto,*">
+        <Border
+            Background="{DynamicResource SemiColorBackground4}"
+            BorderBrush="{DynamicResource SemiColorBorder}"
+            BorderThickness="0,0,1,0">
+            <Panel Margin="5">
+                <StackPanel Spacing="5">
+                    <Button
+                        Classes="IconButtonActivated"
+                        Content="&#xEB56;"
+                        ToolTip.Tip="数据收发" />
+                    <Button
+                        Classes="IconButton"
+                        Content="&#xECA0;"
+                        ToolTip.Tip="调试工具" />
+                    <Button
+                        Classes="IconButton"
+                        Content="&#xEAFE;"
+                        ToolTip.Tip="自动脚本" />
+                    <Button
+                        Classes="IconButton"
+                        Content="&#xE288;"
+                        ToolTip.Tip="在线功能" />
+                </StackPanel>
+                <Button
+                    Classes="IconButton"
+                    Content="&#xE270;"
+                    ToolTip.Tip="软件设置"
+                    VerticalAlignment="Bottom" />
+            </Panel>
+        </Border>
     </Grid>
 </UserControl>