1
votes

StackLayout n'obéit pas à la propriété VerticalOptions dans Xamarin.Forms

J'essaye de créer une interface utilisateur de stacklayout simple. Voici le XAML.

    <ContentView>
        <StackLayout
            BackgroundColor="Green"
            HeightRequest="500"
            VerticalOptions="End">
            <StackLayout
                BackgroundColor="LightSkyBlue"
                HeightRequest="100"
                VerticalOptions="End">
                <!--  // ADD CONTROLS HERE[!  -->
            </StackLayout>
        </StackLayout>
    </ContentView>

Idéalement, on s'attend à ce que le stacklayout «bleu» s'aligne en bas sur le green Mais, il ne bouge tout simplement pas et reste en haut.

Qu'est-ce que je fais de mal? Veuillez me diriger dans la bonne direction

Joindre l'image pour une meilleure clarté.

entrez la description de l'image ici


7 commentaires

Le jaune est-il la couleur d'arrière-plan de la page?


Pourriez-vous expliquer un peu plus ce que vous essayez de réaliser, peut-être un exemple d'interface utilisateur? Le StackLayout dans le StackLayout peut être à l'origine du problème. Il existe peut-être un meilleur moyen de créer une interface utilisateur qui fonctionne bien avec Forms.


@ Adam- J'essaie juste d'aligner la vue de la pile bleue au bas du green.


Ouais, je pense que c'est assez clair d'après ta question. Je pense simplement qu'il peut y avoir une meilleure approche à ce sujet en fonction de ce que vous voulez réaliser en fin de compte. Par exemple, si vous vouliez une image avec un titre en bas, vous pouvez utiliser une grille ( github.com/kphillpotts/XamarinFormsLayoutChallenges/blob/ma‌ ster /… ). Mais peut-être pas.


Y a-t-il quelque chose qui semble faux? pourquoi les vues de pile ne s'alignent-elles pas? ou est-ce un bogue xamarin?


Rien de ce qui semble faux, cela semblait être une utilisation étrange des contrôles, mais ce que vous construisez peut être très différent de ce à quoi je suis habitué, c'est pourquoi je vous le demandais.


@Shailesh Comme Sümeyya Tuğçe Arar l'a dit, je suggère que vous puissiez définir ces deux stacklayouts VerticalOptions comme EndAndExpand, car EndAndExpand signifie que cela place la vue à la fin de la mise en page (limite inférieure ou la plus à droite) et se développe pour prendre autant d'espace comme la mise en page vous le donnera. Vous pouvez jeter un œil: Xamarin.Forms StackLayout


3 Réponses :


2
votes

D'après mon expérience, un StackLayout n'obéira jamais aux options verticales ou horizontales. Il n'utilisera que l'espace dont il a besoin. Vous pouvez placer un BoxView transparent dans le StackLayout et définir ses VerticalOptions sur FillAndExpand . Cela forcera le StackLayout à utiliser tout l'espace.

J'utilise normalement une Grid à la place et j'utilise pour le forcer à utiliser tout l'espace.


5 commentaires

Mais je ne veux pas utiliser tout l'espace, j'essaie seulement d'aligner la vue de la pile bleue à la fin du vert.


comment fonctionnera exactement la logique de la vue boîte? pourriez-vous aider avec un échantillon?


Désolé, mauvaise formulation. j'aurais dû dire "utiliser tout l'espace disponible". Cela signifie qu'il utilisera tout l'espace dans l'emballage extérieur StackLayout (la zone verte).


le hack BoxView force simplement le StackLayout à remplir autant d'espace que disponible.


pourriez-vous s'il vous plaît aider avec un exemple de la logique de vue de boîte?



1
votes

Vous devez définir l'option verticale de la disposition de la pile bleue sur EndAndExpand. Parce que les enfants de disposition de pile ne se remplissent pas automatiquement. Vous devez le forcer si vous le souhaitez. Vous pouvez consulter cette réponse ici pour une explication détaillée.


0 commentaires

3
votes

Il vous suffit de remplacer votre code par le code ci-dessous:

<StackLayout
        BackgroundColor="Green"
        HeightRequest="500"
        VerticalOptions="End">
        <StackLayout
            BackgroundColor="LightSkyBlue"
            HeightRequest="100"
            VerticalOptions="EndAndExpand">
            <!--  // ADD CONTROLS HERE[!  -->
        </StackLayout>
    </StackLayout>

J'espère que cela vous aidera

Merci


0 commentaires