Reputation: 99
I want to achieve a result like this:
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
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
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