首页 > 其他分享 >Avalonia 元素集合实现Menus(图片资源文件绑定后不显示问题)

Avalonia 元素集合实现Menus(图片资源文件绑定后不显示问题)

时间:2025-01-11 15:33:41浏览次数:7  
标签:Base64 Icons 绑定 AvaToolPro Menus JSON new Avalonia

<SplitView 
  IsPaneOpen="True"
       DisplayMode="Inline"
       OpenPaneLength="200"
        CompactPaneLength="60"
         >
<SplitView.Pane>
  <Grid Margin="0,5">
    <!-- 定义行 -->
    <Grid.RowDefinitions>
      <RowDefinition Height="40"/>
      <!-- 标题行 -->
      <RowDefinition Height="1"/>
      <!--分隔线-->
      <RowDefinition Height="*"/>
      <!-- 内容行 -->
    </Grid.RowDefinitions>

    <StackPanel Grid.Row="0">
      <TextBlock Text="开发调试" Padding="8" FontSize="16" TextAlignment="Center"/>
    </StackPanel>
    <Border Grid.Row="1" Background="#252525" Height="1"/>
    
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Top" Grid.Row="2" Width="200">
      <Button Background="Transparent" Cursor="Hand" Grid.Row="0">
        <Grid Width="200">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
          </Grid.ColumnDefinitions>
          <Image Source="avares://AvaToolPro/Assets/Icons/index/other.png" Margin="15,2,5,2" Width="20" Height="20" Grid.Column="0"/>
          <TextBlock FontSize="12" VerticalAlignment="Center" TextAlignment="Left" Grid.Column="1">文件⇌Base64</TextBlock>
        </Grid>
      </Button>
      <Border Grid.Row="1" Background="#252525" Height="1" Width="180"/>

      <Button Background="Transparent" Cursor="Hand" Grid.Row="0">
        <Grid Width="200">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
          </Grid.ColumnDefinitions>
          <Image Source="avares://AvaToolPro/Assets/Icons/index/other.png" Margin="15,2,5,2" Width="20" Height="20" Grid.Column="0"/>
          <TextBlock FontSize="12" VerticalAlignment="Center" TextAlignment="Left" Grid.Column="1">图片⇌Base64</TextBlock>
        </Grid>
      </Button>
      <Border Grid.Row="1" Background="#252525" Height="1" Width="180"/>

      <Button Background="Transparent" Cursor="Hand" Grid.Row="0">
        <Grid Width="200">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
          </Grid.ColumnDefinitions>
          <Image Source="avares://AvaToolPro/Assets/Icons/index/other.png" Margin="15,2,5,2" Width="20" Height="20" Grid.Column="0"/>
          <TextBlock FontSize="12" VerticalAlignment="Center" TextAlignment="Left" Grid.Column="1">JSON格式校验</TextBlock>
        </Grid>
      </Button>
      <Border Grid.Row="1" Background="#252525" Height="1" Width="180"/>

      <ItemsControl ItemsSource="{Binding MenuList}">
        <ItemsControl.ItemTemplate>
          <DataTemplate>
            <StackPanel>
              <Button ToolTip.Tip="{Binding Tips}" Tag="{Binding Tag}" Background="Transparent" Cursor="Hand">
                <Grid Width="200">
                  <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                  </Grid.ColumnDefinitions>
                  <Image Source="{Binding Icon}" Stretch="UniformToFill" Margin="15,2,5,2" Width="20" Height="20" Grid.Column="0"/>
                  <TextBlock FontSize="12" VerticalAlignment="Center" TextAlignment="Left" Grid.Column="1" Text="{Binding Title}"/>
              </Grid>
              </Button>
              <Border Background="#252525" Height="1" Width="180" Margin="0,5,0,0"/>
            </StackPanel>
          </DataTemplate>
        </ItemsControl.ItemTemplate>
      </ItemsControl>
      
    </StackPanel>
    
  </Grid>
</SplitView.Pane>

<Grid>
  <TextBlock Text="Content"
             FontSize="24"
             VerticalAlignment="Center"
             HorizontalAlignment="Center"/>
</Grid>
--ViewModel
public DevPageViewModel()
{
    MenuList = new ObservableCollection<Menus.LeftMenus>(new List<Menus.LeftMenus>
    {
        new Menus.LeftMenus("文件⇌Base64", "Dev_FileAndBase64Page","文件与Base64互转","avares://AvaToolPro/Assets/Icons/index/other.png",true),
        new Menus.LeftMenus("图片⇌Base64", "Dev_ImageAndBase64Page","图片与Base64互转","avares://AvaToolPro/Assets/Icons/index/other.png",true),
        new Menus.LeftMenus("JSON格式校验", "Dev_JsonParsePage","JSON文本格式解析校验","avares://AvaToolPro/Assets/Icons/index/other.png",true),
        new Menus.LeftMenus("JSON⇌XML", "Dev_JsonAndXmlPage","JSON文本与XML互转","avares://AvaToolPro/Assets/Icons/index/other.png",true),
        new Menus.LeftMenus("其他辅助操作", "Dev_OtherPage","其他辅助操作","avares://AvaToolPro/Assets/Icons/index/other.png",true)
    });
}

--资源图片加载
--直接绑定资源图片文件路径,图片不能正常加载,因为 Image Source 绑定需要 Avalonia.Media.IImage 类型数据,需要将资源图片转BitMap 后绑定,需要在函数中通过AssetLoader 获取资源文件后转为BitMap

    this.Title = Title;
    this.Tag = Tag;
    this.Tips = Tips;
    this.Enable = Enable;
    // 使用 AssetLoader 从嵌入资源加载 Bitmap
    var uri = new Uri(Icon);
    using (var stream = AssetLoader.Open(uri))
    {
        this.Icon = new Bitmap(stream);
    }

标签:Base64,Icons,绑定,AvaToolPro,Menus,JSON,new,Avalonia
From: https://www.cnblogs.com/ff-king/p/18665748

相关文章