CODEWITHSUNDEEP
xamarinxamarin.forms
nix
nix

Reputation: 2285

How to fit a picture inside vertical stack layout?

there should be a page that looks like following:

<ContentView>
    <StackLayout Padding="20, 50, 20, 20"
                   VerticalOptions="Start">
      <Image Source=""
             x:Name="selfie"
             VerticalOptions="StartAndExpand"/>
      <StackLayout Orientation="Horizontal"
                   HorizontalOptions="Center"
                   VerticalOptions="End">
        <Button Text="Choose from gallery"
                FontSize="Medium"
                HeightRequest="60"
                x:Name="galleryButton"
                Clicked="OnGalleryButtonClicked" />
        <Button Text="Take a selfie"
                FontSize="Medium"
                HeightRequest="60"
                x:Name="cameraButton"
                Clicked="OnCameraButtonClicked" />
      </StackLayout>
      <Frame Padding="0, 20, 0, 0"
             VerticalOptions="End">
        <Button Text="Submit"
                FontSize="Medium"
                HeightRequest="60"
                x:Name="submitButton" />
      </Frame>
    </StackLayout>
  </ContentView>

When galleryButton or cameraButton are clicked, user is taken to phone image gallery or camera, in order to select or take a picture. Then, this picture is displayed in selife image. The problem is, that I don't know how to make image fill exactly the space left after all three buttons are displayed. How can I do that? I tiried several combinations of VerticalOptions, as you can see, but none of them worked.

Upvotes: 1

Views: 1959

Answers (1)

Timothy James
Timothy James

Reputation: 1102

So I got rid of the stack layout and worked with a grid instead. Hope that doesn't cause too much of a problem. Try this:

<ContentView>

    <Grid HorizontalOptions="StartAndExpand"
            VerticalOptions="FillAndExpand"
            Padding="20, 50, 20, 20"
    >

            <!-- Grid row and column formatting -->
            <Grid.RowDefinitions>
                <RowDefinition Height="*" /> <!-- Selfie    -->
                <RowDefinition Height="auto" /> <!-- Buttons -->
                <RowDefinition Height="auto" /> <!-- Submit -->
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <!-- End grid row and column formatting -->

            <Image Source="icon.png"
                x:Name="selfie"
                VerticalOptions="Fill"
                HorizontalOptions="Fill"
                Grid.Column="0"
                Grid.Row="0"
                Aspect="Fill"/>

            <Grid HorizontalOptions="Fill"
                VerticalOptions="End"
                Grid.Column="0"
                Grid.Row="1">

                <!-- Grid row and column formatting -->

                <Grid.RowDefinitions>
                    <RowDefinition Height="auto" />
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <!-- End grid row and column formatting -->

                <Button Text="Choose from gallery"
                    FontSize="Medium"
                    HeightRequest="60"
                    x:Name="galleryButton"
                    HorizontalOptions="CenterAndExpand"
                    Grid.Column="0"
                    Grid.Row="0"
                />

                <Button Text="Take a selfie"
                    FontSize="Medium"
                    HeightRequest="60"
                    x:Name="cameraButton"
                    HorizontalOptions="CenterAndExpand"
                    Grid.Column="1"
                    Grid.Row="0"
                />
        </Grid>
        <Frame Padding="0, 20, 0, 0"
            VerticalOptions="End"
            Grid.Column="0"
            Grid.Row="2">
            <Button Text="Submit"
                FontSize="Medium"
                HeightRequest="60"
                x:Name="submitButton" />
        </Frame>

    </Grid>

</ContentView>

Upvotes: 1

Related Questions