avalonia 控件-Image(显示图片)

1- resm方式

将图片文件属性设置为 嵌入的资源

Source=“resm:项目名称.图片文件夹.图片文件.png?assembly=项目名称”

<Image Cursor="Hand" Width="40" Height="40"
Source="resm:TestClient.Resources.title.png?assembly=resm:TestClient"/>

2- avares:// 路径格式

将要显示的图片文件，添加到项目，图片属性选择 AvaloniaResource

<Image Cursor="Hand" Width="40" Height="40"
Source="avares://TestClient/Assets/title.png"/>

3-svg格式图片显示

GeometryDrawing Brush=“#FFF7FCFF” 表示画图的颜色
GeometryDrawing.Geometry 是具体的图像数据，复用情况下，可放在资源文件中引用

<Image Cursor="Hand" Width="180" Height="180">
            <DrawingImage>
                <DrawingGroup>
                    <GeometryDrawing>
                        <GeometryDrawing.Geometry>
                            <RectangleGeometry Rect="0,0,1024,1024" />
                        </GeometryDrawing.Geometry>
                    </GeometryDrawing>
                    
                    <GeometryDrawing Brush="#FFF7FCFF">                        
                        <GeometryDrawing.Geometry>
                            M512,512 M0,512A512,512,0,1,0,1024,512A512,512,0,1,0,0,512z
                        </GeometryDrawing.Geometry>
                    </GeometryDrawing>

                    <GeometryDrawing Brush="#FF48C1FD">
                        <GeometryDrawing.Geometry>
                            M830.577778,756.622222L199.111111,756.622222C195.697778,756.622222,193.422222,754.346666,193.422222,750.933333L193.422222,512C193.422222,509.724444 195.128889,507.448889 196.835556,506.88 196.835556,505.742222 196.835556,504.604444 197.404444,504.035556L292.408889,319.146667C294.115556,315.164445,298.097778,312.888889,302.648889,312.888889L727.04,312.888889C731.591111,312.888889,735.004444,315.164445,737.28,319.146667L832.284444,504.035556C832.853333,505.173334 832.853333,505.742223 832.853333,506.88 835.128889,507.448889 836.266666,509.724444 836.266667,512L836.266667,750.933333C836.266667,754.346666,833.991111,756.622222,830.577778,756.622222z M302.648889,318.577778C300.373333,318.577778,298.666667,319.715556,297.528889,321.422222L202.524444,506.311111 202.524444,510.293333 199.111111,512 199.111111,750.933333 830.577778,750.933333 830.577778,512 826.595556,510.293333 826.595556,506.311111 731.591111,321.422222C730.453333,319.715555,728.746667,318.577778,726.471111,318.577778L302.648889,318.577778z
                        </GeometryDrawing.Geometry>
                    </GeometryDrawing>
                </DrawingGroup>
            </DrawingImage>
        </Image>

svg文件资源方式引用
1-创建Resource文件，并添加svg文件信息

<ResourceDictionary xmlns="https://github.com/avaloniaui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  
    <DrawingGroup x:Key="DrawingGroup">
        <GeometryDrawing Brush="#EDF7FF">
            <GeometryDrawing.Geometry>
              
            </GeometryDrawing.Geometry>
        </GeometryDrawing>

        <GeometryDrawing Brush="#57AFFE">
            <GeometryDrawing.Geometry>
           
            </GeometryDrawing.Geometry>
        </GeometryDrawing>
       
        <GeometryDrawing Brush="#F95F35">
            <GeometryDrawing.Geometry>
             
            </GeometryDrawing.Geometry>
        </GeometryDrawing>
    </DrawingGroup>

    <!--图标-->
    <DrawingGroup x:Key="DelDrawingGroup">
        <GeometryDrawing Brush="#606266">
            <GeometryDrawing.Geometry>
                M85.333 490.667l853.333 0 0 42.667-853.333 0 0-42.667z
            </GeometryDrawing.Geometry>
        </GeometryDrawing>        
    </DrawingGroup>
    
</ResourceDictionary>

2-要使用图片页面所在的项目App.axaml文件添加引用

 <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>             
                <ResourceInclude Source='avares://TestResource/SvgIcons.axaml'/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>  

3-页面显示添加引用

<Button Click="Btn_Click" Classes="IconStyle" IsVisible="{Binding ElementName=rdoBtn,Path=IsChecked}" >
       <Image Stretch="Uniform" Width="20" Height="20" >
            <DrawingImage Drawing="{StaticResource DelDrawingGroup}"/>
       </Image>
</Button>

3.4-图像单一情况下也可使用

直接显示：

 <Image Stretch="Uniform" Width="22" Height="22">
    <DrawingImage>
        <GeometryDrawing Brush="#606266" Geometry="M85.333 490.667l853.333 0 0 42.667-853.333 0 0-42.667z"/>
    </DrawingImage>
</Image>

 <Image Stretch="Uniform" Width="22" Height="22">
    <DrawingImage>
        <GeometryDrawing Brush="#606266">
         M85.333 490.667l853.333 0 0 42.667-853.333 0 0-42.667z
        </GeometryDrawing>
    </DrawingImage>
</Image>

使用资源：

<Image Stretch="Uniform" Width="22" Height="22">
   <DrawingImage>
       <GeometryDrawing Brush="#606266" Geometry="{StaticResource DelGeometry}"/>
   </DrawingImage>
</Image>

图像资源：

<ResourceDictionary xmlns="https://github.com/avaloniaui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
      <Geometry x:Key="Geometry">      
      </Geometry>

      <Geometry x:Key="DelGeometry">
            M85.333 490.667l853.333 0 0 42.667-853.333 0 0-42.667z
      </Geometry>

4-使用代码创建Image

var img = new Image
    {
        Source = new DrawingImage
        {
            Drawing = new ImageDrawing
            {
                ImageSource = new Bitmap(BitmapPath),
                Rect = new Rect(0, 0, 200, 200),
            }
    }

5-后台代码生成xaml页面控件

1-添加NuGet包引用，Avalonia.Markup.Xaml.Loader

2-使用

 string imageXaml = @"<Image xmlns='https://github.com/avaloniaui' Name='img' Stretch='Uniform' Width='22' Height='22'>
<DrawingImage Drawing = '{StaticResource DrawingGroup}'/> 
</Image>";               
          
if (!string.IsNullOrEmpty(imageXaml))
 {
    var image = (Image)AvaloniaRuntimeXamlLoader.Load(imageXaml);
    btn.Content = image;
 }

6-代码设置Source

6.1-Image.Source=byte[]

        /// <summary>
        /// byte[]转IBitmap
        /// </summary>
        /// <param name="bytes"></param>
        /// <returns></returns>
        public static IBitmap ByteToBitmap(byte[] bytes)
        {
            IBitmap bmpImg;
            try
            {
                if (bytes == null || bytes.Length == 0)
                {
                    bmpImg = null;
                }
                else
                {
                    bmpImg = new Bitmap(new MemoryStream(bytes));
                }
            }
            catch
            {
                bmpImg = null;
            }
            return bmpImg;
        }

//使用
Image image = new Image();
image.Source = ByteToBitmap(imageBytes);

6.2-Image.Source=图片路径

   public static IBitmap UriToBitmap(string uri)
   {
      IBitmap bitmap = null;
      var assets = AvaloniaLocator.Current.GetService<IAssetLoader>();
      bitmap = new Bitmap(assets.Open(new Uri(uri)));         
      if (bitmap == null)
      {
         bitmap = new Bitmap(uri);
      }
      return bitmap;
   }

//使用
Image image = new Image();
image.Source = UriToBitmap();

6.3-Image.Source=图片路径

Image image = new Image
{
  Source = new DrawingImage
  {
   Drawing = new ImageDrawing
   {
     ImageSource = new Bitmap(BitmapPath),
     Rect = new Rect(0, 0, 200, 200),
   }
 }
}

6.4-Image.Source=图片文件数据

  DrawingGroup drawingGroup = new DrawingGroup();
  var geometryDrawing = new GeometryDrawing
  {
    Pen = new Pen(SolidColorBrush.Parse("#909399")),
    Geometry = (Geometry)
  };
  drawingGroup.Children.Add(geometryDrawing);
  (image.Source as DrawingImage).Drawing = drawingGroup;

 //或者
  DrawingImage drawingImage = new DrawingImage(drawingGroup);
  image.Source = drawingImage;