web-dev-qa-db-fra.com

Liaison dynamique de l'image sur les formes en xamarin

ma question est la suivante: puis-je associer une image de chaîne à une image? J'ai plusieurs images et l'image changera si condition. Alors:

Xaml sur les formes de Xamarin: 

<Image Source="{Binding someImage}" Aspect="Fill" Grid.Row="2"></Image>

Codebehind c #

   public String someImage;
    public String SomeImage
    {
        set
        {
            if (someImage != value)
            {
                someImage = value;                                        
            }
        }
        get
        {
            return someImage;
        }
    }

Partie InitializeComponent:

if(true)
            {
                someImage = "backgroundListViewGren.png";
            }
            else
            {
                someImage = "backgroundListViewRed.png";
            }

l'image se trouve dans le dossier "Images" du projet portable

mais ça, ça ne marche pas, peut-être que j’ai quelque chose à dire mais je ne comprends pas… .. Des solutions?

J'ai essayé avec ImageSource et pas de chaîne, mais ne fonctionne pas trop.

c#imagexamarinbindingxamarin.forms
11
Mr. Developer

Je posterai cette réponse ici parce que c'est celle que je cherchais et je suppose que la plupart des autres le sont (et Google vous oriente actuellement ici, ce qui n'est actuellement pas très utile).

Comment lier une image en utilisant XAML:

XAML:

<Image>
    <Image.Source>
        <FileImageSource File="{Binding SomeImage}" />
    </Image.Source>
</Image>

Puis dans le ViewModel, C #:

public string SomeImage
{
    get { return string.Format("prefix-{0}-suffix.png", OtherProperty); }
}

Plus récent, meilleur, mais essentiellement équivalent, vous pouvez utiliser c # à la place de ce qui précède:

public string SomeImage => $"prefix-{OtherProperty}-suffix.png";

C’est certainement le moyen le plus simple de le configurer, IMO :).

EDIT: Cela devrait aller de soi, mais l'image devrait évidemment se trouver dans le dossier Resources du projet pour chaque plate-forme.

12
Maverick

Tu as dit:

l'image est dans le dossier "Images" du projet portable

Chaque plate-forme a une approche différente pour les ressources et les images. Xamarin gère le fait que dans chaque plate-forme, par exemple, Xamarin.iOS a une ressource intégrée, tandis que Xamarin.Android utilise une ressource Android pour les images.

Vous devez placer vos images dans chaque projet pour Xamarin.Forms pour savoir où les rechercher sur chaque plate-forme.

Pour plus d'informations, regardez this .

3
Emad

Pour utiliser des images de la PCL, consultez cette partie dans Documentation Xamarin .

Vous devez vous assurer que le Build action pour chaque image est défini sur Embedded Resource.

Ensuite, si vous souhaitez les utiliser en XAML, spécifiez un MarkupExtension

[ContentProperty ("Source")]
public class ImageResourceExtension : IMarkupExtension
{
  public string Source { get; set; }

  public object ProvideValue (IServiceProvider serviceProvider)
  {
    if (Source == null)
    {
      return null;
    }
    // Do your translation lookup here, using whatever method you require
    var imageSource = ImageSource.FromResource(Source);

    return imageSource;
  }
}

Vous devriez alors pouvoir utiliser vos images comme ceci.

<?xml version="1.0" encoding="UTF-8" ?>
<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.Microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:WorkingWithImages;Assembly=WorkingWithImages"
    x:Class="WorkingWithImages.EmbeddedImagesXaml">
  <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
    <!-- use a custom Markup Extension -->
    <Image Source="{local:ImageResource WorkingWithImages.beach.jpg}" />
  </StackLayout>
</ContentPage>

Comme indiqué dans les commentaires, si vous souhaitez que cela fonctionne immédiatement, placez-les dans le dossier Ressources de votre projet de plate-forme respectif. De cette façon, vous pouvez également utiliser les mécanismes de dimensionnement automatique en place. Pour en savoir plus sur cette méthode, voir cette page .

En les ajoutant avec la bonne convention de dénomination dans le bon dossier, vous pouvez simplement faire référence au nom de fichier et Xamarin.Forms le traduira au bon format pour la plate-forme.

3
Gerald Versluis

Vous pouvez le faire un peu plus simple je pense. Cela fonctionne sur le mien . Placez l'image à l'endroit approprié sur chaque plate-forme, par exemple. Ressources/dessinable sur Android

Dans votre Xaml:

<Image Source="{Binding someImage}" Aspect="Fill" Grid.Row="2"></Image>

Dans votre modèle de vue:

private string _someImage = "icon_eye_hidden";
    public string someImage
    {

        get => this._someImage;
        set
        {

            if (this._someImage == value) return;

            this._someImage = value;
            this.RaisePropertyChanged(() => this.someImage);
        }
    }

Ensuite, il suffit de définir someImage sur le nom de l'image (sans l'extension) et celle-ci devrait être mise à jour.

0
George McKibbin