Xamarin Forms remplissage de l'Image largeur avec un bon aspect

Voici xaml (une image dans stacklayout). Tout est logique: j'ai créé Aspect AspectFit et HorizontalOptions à FillAndExpand. La largeur de l'image doit remplir la largeur de stacklayout. La hauteur doit être calculée afin de proportions de l'image.

<Image BackgroundColor="Fuchsia"
       Aspect="AspectFit"
       Source="{Binding GroupLogo}"
       HorizontalOptions="FillAndExpand"
       VerticalOptions="FillAndExpand"/>

Il remplit toute la largeur, mais Il ne veut pas dessiner une image pleine largeur. Pourquoi?

utilisation AspectFill au lieu de AspectFit
Il permettra de réduire l'image

OriginalL'auteur Vorotnyak_Nazar | 2016-12-30

xamarin xamarin.forms

15

AspectFit fait ce qu'il dit sur l'étain, il convient à l'ensemble de l'image dans la Vue, ce qui peut laisser des parties de la vue vide. Directement à partir de Xamarin de la documentation:

L'échelle de l'image pour s'adapter à la vue. Certaines pièces peuvent être laissés vides (lettre de boxe).

Ce que vous cherchez est AspectFill, ce qui permettra de redimensionner l'image pour l'adapter:

L'échelle de l'image à agrandir. Certaines parties peuvent être coupées afin de combler la vue.

Si vous essayez d'obtenir l'affichage de l'image à la hauteur de l'image, je suggère l'ajout d'un HeightRequest à la hauteur de l'image. Image contrôles ne semblent pas automatiquement à l'échelle de Xamarin, dans mon expérience, que le natif de contrôles ne semblent pas soutenir que par défaut.

Référence

Ce que vous cherchez est AspectFill ( c ) non, je ne veux pas couper l'image. Je le veux pour remplir la largeur et la hauteur ont dont il a besoin afin d'économiser de l'aspect d'une image. Comment puis-je le faire? Hauteur de la demande n'est pas une option. Je ne sais pas quelle est l'Image que je vais recevoir
Comme je l'ai dit, les contrôles natifs ne sont pas à l'échelle, de sorte à le faire dans XF XAML sans personnalisé renderered de mise en œuvre (ce qui est possible à l'aide de certains changements sur iOS / Android) ne sera pas facile à accomplir. Je vous suggère de partout où vous obtenez votre image de vous pourrait également fournir un autre peut être liée à la propriété qui obtient la hauteur de l'image. À un certain moment, vous avez accès à la charge de l'image et d'obtenir ainsi ses propriétés.
C'est une sorte de problème avec xamarin forms ici. Je l'ai mis à AspectFill, alors il est écrêtée à la verticale. Exactement ce que dois-je définir HeightRequest à qui aurait du sens? Il pourrait être sur un millier de différents appareils avec un millier de différentes largeurs, et, par conséquent, à des hauteurs différentes. C'est quelque chose qui devrait vraiment être adressée dans xamarin forms.

OriginalL'auteur Rudi Visser
7

J'ai eu un problème similaire. Je voulais remplir la largeur et la hauteur d'une StackLayout lorsque c'est possible, mais sans recadrage de l'image réelle. Les réponses ici m'ont aidé à trouver le bon chemin. Voici ce qui a fonctionné pour moi:
```
            <Grid 
                HorizontalOptions="FillAndExpand"
                VerticalOptions="FillAndExpand"
                 >
                <Image
                   x:Name="photo"                         
                   Aspect="AspectFit"                    
                />
            </Grid>
```
Il sera peut-être utile pour quelqu'un.

Précisions:

HorizontalOptions et VerticalOptions sont avec la valeur FillAndExpand, de sorte que la hauteur et la largeur de la Grille ajustée pour remplir le parent, dans ce cas c'est le Stacklayout. L'image est un enfant de la Grille, de sorte qu'il se transforme selon le parent (nous n'avons pas donné d'autres options à l'image).

L'aspect de l'image est réglée sur AspectFit, de sorte que l'image s'adapte à la vue (dans ce cas la Grille) et aussi de préserver ses ratios.

De cette façon, si l'image est en mode portrait, mais trop étroit, il va remplir la Grille (StackLayout) hauteur mais ne pas remplir la largeur afin de préserver ses ratios et de ne pas être recadrée par le dessus ou le dessous.

Si l'image est en mode paysage, il va remplir la Grille (StackLayout) en largeur, mais de ne pas remplir la hauteur afin de préserver ses ratios et de ne pas rogner sur la gauche ou la droite.

Cela fonctionne! Mais pourquoi?
Salut @brundaged, désolé pour la réponse tardive. J'ai ajouté quelques précisions pour le code.

OriginalL'auteur Sonia
4

Que j'ai trouvé aucun exemple de travail. Cela fonctionne parfaitement pour moi:
```
<Grid VerticalOptions="FillAndExpand">
      <ImageSource="{Binding ImageSrc}" Aspect = "AspectFill"/>
</Grid>
```
C'est la bonne réponse!
Non, ne faites pas cela, l'image se tendu

OriginalL'auteur kingarthur
3

Aspect="AspectFit" utiliser pour adapter l'image à l'intérieur de la mise en page, il peut gauche de l'espace si les images sont de petite taille.
Aspect="AspectFill" utilisé pour l'adapter à votre image à l'intérieur de la disposition et il va étirer votre image afin de prendre pleinement de l'espace et il ne sera pas laissé de l'espace à votre image est de petite taille à l'égard de vos parents aménagement de l'espace.
Donc, Vous avez à utiliser AspectFill en place de AspectFit.

OriginalL'auteur Naveen
1

Essayer accompagnés d'image à l'intérieur d'une grille comme:
```
<grid>
    <image></image>
</grid>
```
Parfois, quand j'ai une image qui n'est pas le redimensionnement correctement, accompagnés d'elle à l'intérieur d'une grille résout le problème.

Il n'a pas aidé non plus
Cela fonctionne pour moi, la note de la valeur spécifique pour l'Échelle:<Grid HorizontalOptions="CenterAndExpand" ><Image Source="logo.jpg" Scale="1.0" Aspect="AspectFit" /> </Grid>

OriginalL'auteur Bjt1776

Essayez d'utiliser CachedImage de FFImageLoading package NuGet

MyPage.xaml

<StackLayout HorizontalOptions="FillAndExpand"
             VerticalOptions="FillAndExpand"
             Padding="0">
    <ff:CachedImage Source="{Binding GroupLogo}"
                    HorizontalOptions="Fill"
                    VerticalOptions="Fill"
                    Aspect="Fill"
                    DownsampleToViewSize="True"/>
</StackLayout>

Cela image de résultats essayer à l'horizontale remplir le conteneur et de générer automatiquement la largeur tout en conservant son aspect.

Ajouter cette ligne de code pour MainActivity.xaml après global::Xamarin.Forms.Forms.Init(this, bundle);

CachedImageRenderer.Init(true);

Exemple peut être trouvé ici

OriginalL'auteur Michael Yuwono

0

heightrequest de stacklayout doit être StartAndExpand ou FillAndExpand ou EndAndExpand afin d'ajuster automatiquement la hauteur

Toujours le même résultat <Image Source="{Binding GroupLogo}" VerticalOptions="StartAndExpand" HorizontalOptions="FillAndExpand" Aspect="AspectFit" />
Faire heightsrequest de la pile mise à StartAndExpand ou FillAndExpand ou EndAndExpand pas à la hauteur de la demande de l'image
J'ai essayer toutes les thèses des solutions, ce que je souhaite est de Garder le ratio d'aspect, de remplir l'image horizontalement, et la hauteur doit être adaptée automatiquement (Hauteur = Largeur). Est-il possible ? Quelqu'un avez une autre idée ?

OriginalL'auteur Jay Patel

Vous devez vous connecter pour publier un commentaire.