web-dev-qa-db-fra.com

Comment utiliser correctement la propriété Image Source avec Xamarin.Forms?

J'ai du mal à afficher une image sur la page de contenu dans une disposition de pile. J'ai parcouru la documentation de l'API Xamarin et trouvé propriété Xamarin.Forms.Image.Source , mais aucun exemple de code pour voir comment il est écrit. J'ai également vérifié pour voir comment il a été écrit en C # et semble correspondre à mon code en termes de chemin d'accès au nom de fichier, mais dans Xamarin, il peut être légèrement différent car c'est la première fois que vous faites cela. Le code que je teste actuellement via un émulateur Android (Google Nexus 5) dans Visual Studio 2013 qui fonctionne correctement, à l'exception de l'image non affichée.

Source de l'image:

new Image
{
     VerticalOptions = LayoutOptions.Center,
     HorizontalOptions = LayoutOptions.Center,
     Source = "/Assets/xamarin_logo.png",
},

Code complet:

public NFCPage()
    {
        StackLayout stackLayout = new StackLayout // instantiate a StackLayout object to layout its children
        {
            Spacing = 5, // amount of spae between each child element
            //HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.FillAndExpand, // defines how the elements should be laid out; fill the entire width of the content to the screen
            BackgroundColor = Color.Blue,

            Children = // gets a list of child elements
            {
                new Label
                {   
                    TextColor = Color.White,
                    BackgroundColor = Color.Red,
                    XAlign = TextAlignment.Center, // set text alignment horizontally
                    Text = "Google",
                },
                new Label
                {
                    Text = "Place your device directly at the symbol.",
                    XAlign = TextAlignment.Center,
                    TextColor = Color.White,
                },
                new Image
                {
                    VerticalOptions = LayoutOptions.Center,
                    HorizontalOptions = LayoutOptions.Center,
                    Source = "/Assets/xamarin_logo.png",
                },
                new Button
                {
                    Text = "QR Code",
                    TextColor = Color.White,
                },
                new Button
                {
                    Text = "?",
                    TextColor = Color.White,
                },
            }
        };
        Content = stackLayout; // apply stackLayout to Content
    }
23
TheAmazingKnight

Vous ne devez pas référencer le chemin d'accès car la propriété source est multiplateforme et comme chaque plate-forme possède un dossier différent pour les actifs tels que les images, il vous suffit de spécifier le nom de fichier et l'extension. La classe Image sait où chercher pour trouver le fichier.

Des fichiers image peuvent être ajoutés à chaque projet d'application et référencés à partir du code partagé Xamarin.Forms. Pour utiliser une seule image dans toutes les applications, le même nom de fichier doit être utilisé sur chaque plate-forme et il doit s'agir d'un Android (ce qui signifie pas d'espaces et de caractères spéciaux). Placez les images dans le répertoire Resources/drawable avec Build Action: AndroidResource. Des versions haute et basse DPI d'une image peuvent également être fournies (dans des sous-répertoires Resources convenablement nommés tels que drawable-ldpi, drawable-hdpi et drawable-xhdpi).

enter image description here

var beachImage = new Image { Aspect = Aspect.AspectFit };
beachImage.Source = ImageSource.FromFile("waterfront.jpg");

Source: https://developer.xamarin.com/guides/xamarin-forms/working-with/images/#Local_Images =

32
Adam

Si vous souhaitez ajouter des images à l'aide de code, essayez ceci

Téléchargé automatiquement et afficher l'image

        var webImage = new Image { Aspect = Aspect.AspectFit };
        webImage.Source = ImageSource.FromUri(new Uri("https://xamarin.com/content/images/pages/forms/example-app.png"));
6
Asbar Ali

Ajoutez l'image dans l'Explorateur de solutions en cliquant sur le dossier Ressources/dessinable et sélectionnez l'élément Nouveau/existant. Veuillez ne pas copier l'image dans le dossier Ressources/dessinable. J'espère que ça aide.

3