使用Xamarin Forms显示图像

5 回答

• 0

  如果您想在应用程序中使用图像，可以将它们加载到共享项目中，例如

  

  确保将 Build Action 更改为 Embedded resource

  然后在你的代码中

  image.Source = ImageSource.FromResource("App5.Images.useravatar.png");
  

  请注意资源名称 .

  和XAML

  <ContentPage.Content>
      <StackLayout>
          <Image x:Name="image" WidthRequest="50"/>
      </StackLayout>
  </ContentPage.Content>
  

  回复于 2024-04-25T22:05:38+08:00
• 1

  您可以从列表中删除一些内容：

  [x]从Visual studio添加图像：

  • 右键单击正确的文件夹

  • 选择添加>>新文件...注意：您必须使用visual studio添加它，而不是将其放入文件夹中 . Visual Studio需要了解它

  [x]添加图像时，它位于正确的位置：

  • 对于android：它必须在

  ProjectName.Driod.Resources.drawable 文件夹

  • 对于ios：它必须在

  ProjectName.iOS.Resources 文件夹

  [x]命名公约

  • 总是最好在android和ios上使用 .png ， all lowercase ， no spaces 或特殊字符

  • 与ios通常使用以下namting约定获得相同图像的3张图像

  • theman.png

  • theman@2x.png

  • theman@3x.png

  • 它们都是不同尺寸的相同图像

  [x]以xaml显示：

  <StackLayout>
       <Image Source="thedog.png" HeightRequest="100" WidthRequest="100" />
     </StackLayout>
  

  • 在你的例子中你使用了一个框架，stacklayout怎么样？框架有更多要求 .

  • 对于MVVM，您可以使用以下内容更改Source，不要忘记twoway :)

  • Source="{Binding Thumbnail, Mode=TwoWay}"

  NB 这是非常基本的解释

  回复于 2024-04-25T22:05:38+08:00
• 4

  您可以尝试实现CrossMedia Plugin .

  然后在按钮单击代码部分中，输入以下内容：

  Button_Clicked.Clicked += async (sender, args) =>
          {
  
              if ( !CrossMedia.Current.IsPickPhotoSupported )
              {
                  DisplayAlert("Error message here", "More message", "OK");
                  return;
              }
  
              var file = await Plugin.Media.CrossMedia.Current.PickPhotoAsync(new Plugin.Media.Abstractions.PickMediaOptions
              {
                  PhotoSize = Plugin.Media.Abstractions.PhotoSize.Medium
              });
  
  
              if (file == null)
                  return;
  
              image.Source = ImageSource.FromStream(() =>
              {
                  var stream = file.GetStream();
                  file.Dispose();
                  return stream;
              });
          };
  

  单击按钮后，将显示gallery /目录 . 您可以选择所需的照片 . 点击OK后，图像将显示在图像控件/标签中 . 我不确定这是否是您正在寻找的解决方案 . 希望它能帮助你找到正确的方向 .

  回复于 2024-04-25T22:05:38+08:00
• 0

  这可能会或可能不会帮助我添加一些代码，关于Xamarin表单和Android以及使用内存流的令人惊讶的事情之一..即使您没有使用资源，设备密度乘数仍然应用（如果我正确记得）所以我想如果你正在看ADB接口，你会看到内存问题，这就是为什么你不能显示图像...我先前通过采样解决了这个问题

  我解决它的方法是创建一个新的Image子类-ResourceImage，

  public class ResourceImage :Image
  {
      public enum SourceTypes{
  
          Database,
  
          File,
  
          Function,
      }
  
      private bool _LoadAct = false;
  
      public bool LoadAct { get{
  
              return _LoadAct;
  
          }
  
  
  
          set{ _LoadAct = value; OnPropertyChanged ("LoadAct");
  
  
  
          }
  
      }
  
      public Func<Stream> Func{ get; set; }
  
      public SourceTypes SourceType{ get; set;}
  
      public string ResName{ get; set;}
  
      public ResourceImage ()
  
      {
  
      }
  
  
  
      public ResourceImage (string name)
  
      {
          ResName = name;
  
      }
  
  
  
      public ResourceImage(Func<Stream> func){
  
          SourceType = SourceTypes.Function;
  
          Func = func;
  
      }
  
  }
  

  然后在Android渲染器中：我做了以下操作

  public class ResourceImageRenderer : ImageRenderer
  
  {
  
      protected override void OnElementChanged (ElementChangedEventArgs<Image> e)
  
      {
  
          base.OnElementChanged (e);
  
  
  
          if (e.OldElement == null) 
  
          {
  
              var el = (ResourceImage)Element;
  
              if (el.SourceType == ResourceImage.SourceTypes.Database) {
  
                  //Ignore for now
  
              } else if (el.SourceType == ResourceImage.SourceTypes.File) {
  
                  using (global::Android.Graphics.BitmapFactory.Options options = new global::Android.Graphics.BitmapFactory.Options ()) {
  
                      options.InJustDecodeBounds = false;
                      options.InSampleSize = 1;//calculateInSampleSize (options, outS.X / 4, outS.Y / 4);
  
                      var gd = Context.Resources.GetIdentifier (el.ResName.Split (new char[]{ '.' }) [0], "drawable", Context.PackageName);
  
                      using (global::Android.Graphics.Rect rt = new global::Android.Graphics.Rect (0, 0, 0, 0)) {
  
                          var bitmap = global::Android.Graphics.BitmapFactory.DecodeResource (Context.Resources, gd, options);//DecodeStream (ms, rt, options);
  
                          bitmap.Density = global::Android.Graphics.Bitmap.DensityNone;
  
                          Control.SetImageDrawable (new global::Android.Graphics.Drawables.BitmapDrawable (bitmap));
  
                      }
  
                  }
  
              } else if (el.SourceType == ResourceImage.SourceTypes.Function) {
  
  
  
                  new Task (() => {
  
  
                      var ms = el.Func();
  
                      if(ms == null)return;
  
  global::Android.Graphics.BitmapFactory.Options options = new global::Android.Graphics.BitmapFactory.Options ();
  
  
  
                          options.InJustDecodeBounds = false;
  
  
  
                          options.InSampleSize = 2;//calculateInSampleSize (options, outS.X / 4, outS.Y / 4);
  
                          ms.Position = 0;
                          Device.BeginInvokeOnMainThread(()=>{
  
                              using (global::Android.Graphics.Rect rt = new global::Android.Graphics.Rect (0, 0, 0, 0)) {
  
  
  
                                  try{
  
                                      var bitmap = global::Android.Graphics.BitmapFactory.DecodeStream (ms, rt, options);
  
                                      bitmap.Density = global::Android.Graphics.Bitmap.DensityNone;
  
                                      Control.SetImageDrawable (new global::Android.Graphics.Drawables.BitmapDrawable (bitmap));
  
                                  }catch(Exception  eee){
  
  
                                  }
  
                          }
  
                          });
  
  
  
  
                  }).Start(); 
  
              }
  
          }       
  
      }
  

  回顾代码（多年来没有触及它） . 有很多需要改进的地方，我不得不添加采样来解决相同的问题，用户选择要在消息应用程序中显示的图像，它完美地工作iOS从未在Android上显示过

  回复于 2024-04-25T22:05:38+08:00
• 1

  这是我允许用户选择图像然后在页面上显示的方式 .

  我调用我的图像服务选择Image方法传递一个回调方法

  await _imageService.SelectImage(ImageSelected);
  

  这是我的SelectImage方法 . 一开始就有一些权限检查 . 它使用Media Plugin显示图库并允许用户选择图像 .

  public async Task SelectImage(Action<MediaFile> imageAction)
  {
      var allowed = await _permissionService.CheckOrRequestStoragePermission();
      if (!allowed) return;
  
      if (!_media.IsPickPhotoSupported)
      {
          throw new GalleryUnavailableException("Gallery unavailable");
      }
  
      var file = await _media.PickPhotoAsync(new PickMediaOptions
      {
          PhotoSize = PhotoSize.Small,
          CompressionQuality = 92
      });
  
      imageAction(file);
  }
  

  它返回一个MediaFile

  这是Image Selected回调方法

  private void ImageSelected(MediaFile image)
  {
      if (image == null)
      {
          return;
      }
  
      ChosenImage = new IncidentImage
      {
          ImageBytes = image.ToByteArray()
      };
  }
  

  ChosenImage是我视图模型中的一个属性

  public IncidentImage ChosenImage {get; set;}
  

  我使用PropertyChanged.Fody来触发属性更改通知，但您也可以使用INotifyPropertyChanged .

  而IncidentImage是我用来存储和显示图像的类

  public class IncidentImage
  {
      [PrimaryKey, AutoIncrement]
      public int Id { get; set; }
  
      public int IncidentDetailsId { get; set; }
  
      public byte[] ImageBytes { get; set; }
  
      [Ignore]
      public ImageSource ImageSource
      {
          get
          {
              ImageSource retval = null;
              try
              {
                  if (ImageBytes != null)
                  {
                      retval = ImageSource.FromStream(() => new MemoryStream(ImageBytes));
                  }
              }
  
              catch (Exception e)
              {
                  Debug.WriteLine(e);
              }
              return retval;
          }
      }
  
  }
  

  这是XAML

  <Image Source="{Binding ChosenImage.ImageSource}"
         Aspect="AspectFit"/>
  

  回复于 2024-04-25T22:05:38+08:00