CODEWITHSUNDEEP
xamlxamarin
Alex
Alex

Reputation: 99

How to create a Scroll View at top and three buttons at the bottom in Xamarin?

I want to achieve a result like this:

enter image description here

As you see, there is a big area for scroll view and a small area for three buttons at the bottom.

I tried this code:

<ContentPage Title="New Report" IconImageSource="NewReport.png" BackgroundImageSource="blue_windows.jpg">
        <StackLayout Margin="5">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="10*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <ScrollView>
                    <StackLayout x:Name="MyStack">
                        <!--Labels should be added here programmatically every time the button clicked-->
                    </StackLayout>
                </ScrollView>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Button Grid.Row="1" Grid.Column="0" Text="Add New Item" Clicked="Button_Clicked" />
                    <Button Grid.Row="1" Grid.Column="1" Text="Send" />
                    <Button Grid.Row="1" Grid.Column="2" Text="Reset" />
                </Grid>
            </Grid>
        </StackLayout>
    </ContentPage>
    <ContentPage Title="Report History" IconImageSource="History.png" BackgroundImageSource="blue_windows.jpg" />
    <ContentPage Title="Messages" IconImageSource="Message.png" BackgroundImageSource="blue_windows.jpg"/>

But it is not my desired result. Please help me.

Upvotes: 0

Views: 574

Answers (2)

Vishal_VE
Vishal_VE

Reputation: 2137

enter image description herePlease use the below code for your requirement:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             x:Class="SwimmingSpot.Views.Pages.TestPage"
             BackgroundColor="White">
    
    <!--<Grid Padding="0,0,0,0" WidthRequest="365">
        <StackLayout WidthRequest ="364" x:Name="stack" ></StackLayout>
        <Slider x:Name="slider" WidthRequest ="364"/>
    </Grid>-->

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="9*" />
            <RowDefinition Height="1*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <ScrollView
            Grid.Row="0"
            Grid.Column="0">
            <StackLayout
                BackgroundColor="Blue"
                Spacing="40">

                <Label Text="Scrollable area" HorizontalOptions="CenterAndExpand"
                       VerticalOptions="CenterAndExpand"
                       TextColor="White"/>

                <Label Text="Scrollable area" HorizontalOptions="CenterAndExpand"
                       VerticalOptions="CenterAndExpand"
                       TextColor="White"/>

                <Label Text="Scrollable area" HorizontalOptions="CenterAndExpand"
                       VerticalOptions="CenterAndExpand"
                       TextColor="White"/>

                <Label Text="Scrollable area" HorizontalOptions="CenterAndExpand"
                       VerticalOptions="CenterAndExpand"
                       TextColor="White"/>

                <Label Text="Scrollable area" HorizontalOptions="CenterAndExpand"
                       VerticalOptions="CenterAndExpand"
                       TextColor="White"/>

                <Label Text="Scrollable area" HorizontalOptions="CenterAndExpand"
                       VerticalOptions="CenterAndExpand"
                       TextColor="White"/>

                <Label Text="Scrollable area" HorizontalOptions="CenterAndExpand"
                       VerticalOptions="CenterAndExpand"
                       TextColor="White"/>

                <Label Text="Scrollable area" HorizontalOptions="CenterAndExpand"
                       VerticalOptions="CenterAndExpand"
                       TextColor="White"/>
                <Label Text="Scrollable area" HorizontalOptions="CenterAndExpand"
                       VerticalOptions="CenterAndExpand"
                       TextColor="White"/>
                <Label Text="Scrollable area" HorizontalOptions="CenterAndExpand"
                       VerticalOptions="CenterAndExpand"
                       TextColor="White"/>
                <Label Text="Scrollable area" HorizontalOptions="CenterAndExpand"
                       VerticalOptions="CenterAndExpand"
                       TextColor="White"/>
            </StackLayout>
        </ScrollView>
        <StackLayout
            Grid.Row="1"
            Grid.Column="0"
            HorizontalOptions="CenterAndExpand"
            VerticalOptions="StartAndExpand"
            Orientation="Horizontal">

            <Button
                HeightRequest="40"
                WidthRequest="100"
                BackgroundColor="Red"
                Text="First"
                TextColor="White"/>
            <Button
                HeightRequest="40"
                WidthRequest="100"
                BackgroundColor="Red"
                Text="Second"
                TextColor="White"/>
            <Button
                HeightRequest="40"
                WidthRequest="100"
                BackgroundColor="Red"
                Text="Third"
                TextColor="White"/>
        </StackLayout>
    </Grid>
    
</ContentPage>

Upvotes: 0

Leo Zhu
Leo Zhu

Reputation: 15031

You just need to use a Grid with two Rows and three Columns.

Place the ScrollView in the first row and the three Buttons in the second row.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="NewerForms.Page1">
  <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="8*"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <ScrollView Grid.Row="0" Grid.ColumnSpan="3" x:Name="MyStack" >
        
    </ScrollView>
    <Button Grid.Row="1" Grid.Column="0" Text="Login"  CornerRadius="30"></Button>
    <Button Grid.Row="1" Grid.Column="1" Text="Signup" CornerRadius="30"></Button>
    <Button Grid.Row="1" Grid.Column="2" Text="Signup" CornerRadius="30"></Button>
  </Grid>
</ContentPage>

The more about Grid you could look here.

Upvotes: 3

Related Questions