Avalonia UserControl Grid布局

<!-- 定义列 -->
<Grid.ColumnDefinitions>
  <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

<!-- 按钮区域 -->
  <StackPanel Orientation="Horizontal" Grid.Row="0">
    <TextBlock Padding="5,15" Grid.Row="0" Grid.Column="0">
      <StackPanel Grid.Row="0" Grid.Column="0">
        <TextBlock FontSize="18" Margin="15,5">XXXXXX V1.0</TextBlock>
        <TextBlock FontSize="10" Margin="15,5">XXXXXXXXX.</TextBlock>
      </StackPanel>
    </TextBlock>

    <Border Width="1" Height="32" Background="#424242" Margin="1,0"/>
    <Button Tag="DBPage" Background="Transparent" Grid.Row="0" Grid.Column="1" Cursor="Hand" Click="Button_Click">
      <StackPanel>
        <Image Source="avares://AvaToolPro/Assets/Icons/index/database.png" Margin="0,15,0,5" Width="30" Height="30"/>
        <TextBlock FontSize="12" TextAlignment="Center">DB工具</TextBlock>
      </StackPanel>
    </Button>
    <Border Width="1" Height="32" Background="#424242" Margin="1,0"/>
    <Button Tag="DevicePage" Background="Transparent" Cursor="Hand" Grid.Row="0" Grid.Column="2" Click="Button_Click">
      <StackPanel>
        <Image Source="avares://AvaToolPro/Assets/Icons/index/tree.png" Margin="0,15,0,5" Width="30" Height="30"/>
        <TextBlock FontSize="12" TextAlignment="Center">设备中心</TextBlock>
      </StackPanel>
    </Button>
    <Border Width="1" Height="32" Background="#424242" Margin="1,0"/>
    <Button Tag="DataPage" Background="Transparent" Cursor="Hand" Grid.Row="0" Grid.Column="2" Click="Button_Click">
      <StackPanel>
        <Image Source="avares://AvaToolPro/Assets/Icons/index/data-recive.png" Margin="0,15,0,5" Width="30" Height="30"/>
        <TextBlock FontSize="12" TextAlignment="Center">数据采集</TextBlock>
      </StackPanel>
    </Button>
    <Border Width="1" Height="32" Background="#424242" Margin="1,0"/>
    <Button Tag="MQTTPage" Background="Transparent" Cursor="Hand" Grid.Row="0" Grid.Column="2" Click="Button_Click">
      <StackPanel>
        <Image Source="avares://AvaToolPro/Assets/Icons/index/MQTT.png" Margin="0,15,0,5" Width="30" Height="30"/>
        <TextBlock FontSize="12" TextAlignment="Center">MQTT</TextBlock>
      </StackPanel>
    </Button>
    <Border Width="1" Height="32" Background="#424242" Margin="1,0"/>
    <Button Tag="TCPPage" Background="Transparent" Cursor="Hand" Grid.Row="0" Grid.Column="2" Click="Button_Click">
      <StackPanel>
        <Image Source="avares://AvaToolPro/Assets/Icons/index/TCP.png" Margin="0,15,0,5" Width="30" Height="30"/>
        <TextBlock FontSize="12" TextAlignment="Center">TCP</TextBlock>
      </StackPanel>
    </Button>
    <Border Width="1" Height="32" Background="#424242" Margin="1,0"/>
    <Button Tag="SSHPage" Background="Transparent" Cursor="Hand" Grid.Row="0" Grid.Column="2" Click="Button_Click">
      <StackPanel>
        <Image Source="avares://AvaToolPro/Assets/Icons/index/ssh.png" Margin="0,15,0,5" Width="30" Height="30"/>
        <TextBlock FontSize="12" TextAlignment="Center">SSH</TextBlock>
      </StackPanel>
    </Button>
    <Border Width="1" Height="32" Background="#424242" Margin="1,0"/>
    <Button Tag="SerialPage" Background="Transparent" Cursor="Hand" Grid.Row="0" Grid.Column="2" Click="Button_Click">
      <StackPanel>
        <Image Source="avares://AvaToolPro/Assets/Icons/index/serial-port.png" Margin="0,15,0,5" Width="30" Height="30"/>
        <TextBlock FontSize="12" TextAlignment="Center">串口工具</TextBlock>
      </StackPanel>
    </Button>
    <Border Width="1" Height="32" Background="#424242" Margin="1,0"/>
    <Button Tag="VersionPage" Background="Transparent" Cursor="Hand" Grid.Row="0" Grid.Column="2" Click="Button_Click">
      <StackPanel>
        <Image Source="avares://AvaToolPro/Assets/Icons/index/version_line.png" Margin="0,15,0,5" Width="30" Height="30"/>
        <TextBlock FontSize="12" TextAlignment="Center">应用版本</TextBlock>
      </StackPanel>
    </Button>
    <Border Width="1" Height="32" Background="#424242" Margin="1,0"/>
    <Button Tag="DockerPage" Background="Transparent" Cursor="Hand" Grid.Row="0" Grid.Column="2" Click="Button_Click">
      <StackPanel>
        <Image Source="avares://AvaToolPro/Assets/Icons/index/docker.png" Margin="0,15,0,5" Width="30" Height="30"/>
        <TextBlock FontSize="12" TextAlignment="Center">镜像管理</TextBlock>
      </StackPanel>
    </Button>
    <Border Width="1" Height="32" Background="#424242" Margin="1,0"/>
    <Button Tag="BugPage" Background="Transparent" Cursor="Hand" Grid.Row="0" Grid.Column="2" Click="Button_Click">
      <StackPanel>
        <Image Source="avares://AvaToolPro/Assets/Icons/index/debug.png" Margin="0,15,0,5" Width="30" Height="30"/>
        <TextBlock FontSize="12" TextAlignment="Center">爬虫工具</TextBlock>
      </StackPanel>
    </Button>
    <Border Width="1" Height="32" Background="#424242" Margin="1,0"/>
    <Button Tag="KeyPage" Background="Transparent" Cursor="Hand" Grid.Row="0" Grid.Column="2" Click="Button_Click">
      <StackPanel>
        <Image Source="avares://AvaToolPro/Assets/Icons/index/key.png" Margin="0,15,0,5" Width="30" Height="30"/>
        <TextBlock FontSize="12" TextAlignment="Center">密钥中心</TextBlock>
      </StackPanel>
    </Button>
    <Border Width="1" Height="32" Background="#424242" Margin="1,0"/>
    <Button Tag="DevPage" Background="Transparent" Cursor="Hand" Grid.Row="0" Grid.Column="2" Click="Button_Click">
      <StackPanel>
        <Image Source="avares://AvaToolPro/Assets/Icons/index/dev.png" Margin="0,15,0,5" Width="30" Height="30"/>
        <TextBlock FontSize="12" TextAlignment="Center">开发调试</TextBlock>
      </StackPanel>
    </Button>
    <Border Width="1" Height="32" Background="#424242" Margin="1,0"/>
    <Button Tag="SettingPage" Background="Transparent" Cursor="Hand" Grid.Row="0" Grid.Column="2" Click="Button_Click">
      <StackPanel>
        <Image Source="avares://AvaToolPro/Assets/Icons/index/setting.png" Margin="0,15,0,5" Width="30" Height="30"/>
        <TextBlock FontSize="12" TextAlignment="Center">系统配置</TextBlock>
      </StackPanel>
    </Button>
    <Border Width="1" Height="32" Background="#424242" Margin="1,0"/>
    <Button Tag="OtherPage" Background="Transparent" Cursor="Hand" Grid.Row="0" Grid.Column="2" Click="Button_Click">
      <StackPanel>
        <Image Source="avares://AvaToolPro/Assets/Icons/index/other.png" Margin="0,15,0,5" Width="30" Height="30"/>
        <TextBlock FontSize="12" TextAlignment="Center">其他功能</TextBlock>
      </StackPanel>
    </Button>
    <!-- 可以添加更多按钮 -->
  </StackPanel>
<!-- 分隔线 -->
<Border Grid.Row="1" Background="#252525" Height="1"/>
<!-- 内容展示区域 -->
<ContentControl Content="{Binding IndexContentControl}" Grid.Row="2"/>

中需要添加的属性
xmlns:vm="using:YourNameSpace.ViewModels"
x:DataType="vm:YourViewModel"
x:Class="YourNameSpace.ThisName"

posted @ 2025-01-11 09:26  一步一个坑  阅读(220)  评论(0)    收藏  举报