XAML DockPanel: The property content is set more than once - xaml

I'm have this XAML code where it throws an error:
The property 'Content' is set more than once.
This whole code points a same kind of error. Help much appreciated.
EDIT: Added XAML of Window
<Window x:Class="AddressBook.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="AddressBook"
Loaded="WindowLoaded"
SizeToContent="WidthAndHeight"
MinHeight="480"
MinWidth="640">
<Window.Resources>
<ObjectDataProvider x:Key="ContactList"
MethodName ="AddressBook.ContactList,AddressBook" />
<DataTemplate x:Key="ContactNameTemplate" >
<TextBlock Text=" {Binding Path=Firstname}" />
</DataTemplate>
</Window.Resources>
<Grid Background="White" Name="DocumentRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<!-- Menu -->
<RowDefinition Height="Auto"/>
<!-- Tool Bar -->
<RowDefinition Height="Auto"/>
<!-- Content Area -->
<RowDefinition Height="Auto"/>
<!-- Status Bar -->
</Grid.RowDefinitions>
</Grid>
<DockPanel Name="DockPanel_Menu" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
<Menu Background="White">
<MenuItem Header="File">
<MenuItem Header="New Contact" Click="LaunchNewContactWizard"/>
<MenuItem Header="New Group" Click="NotImplementedMsg"/>
<Separator />
<MenuItem Header="Properties" Click="NotImplementedMSg"/>
<MenuItem Header="Delete" Click="NotImplementedMsg"/>
<MenuItem Header="Import">
<MenuItem Header="Address book (WAB)..."
Click="NotImplementedMsg"/>
<MenuItem Header="Business card (vCard)..."
Click="NotImplementedMsg"/>
</MenuItem>
<Separator />
<MenuItem Header="Exit" InputGestureText="Alt-F4"
Click="ExitApplication">
<MenuItem.ToolTip>
<ToolTip>
Click here to exit
</ToolTip>
</MenuItem.ToolTip>
</MenuItem>
</MenuItem>
</Menu>
<Menu Background="White">
<MenuItem Header="Edit">
<MenuItem Command="ApplicationCommands.Copy"/>
<MenuItem Command="ApplicationCommands.Paste"/>
</MenuItem>
</Menu>
</DockPanel>
</Window>
I can't really debug it for the last 3 days :(

You have to modify your code for example in the following way:
<Window>
...
<StackPanel>
<Grid Background="White" Name="DocumentRoot">
...
</Grid>
<DockPanel Name="DockPanel_Menu" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0">
...
</DockPanel>
</StackPanel>
</Window>
Window can only have one child so you have to embed Grid and DockPanel within some container e.g. StackPanel, another DockPanel etc.

Related

ListView inside CarouselView is not vertical scrolling

I am having some issues with getting my ListView to be vertical scrollable, which should be default behavior(?).
The Listview is contained in a CarouselTemplate with several other Grid items.
The Mainpage containing the CarouselView:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage>
<ContentPage.Content>
<Grid>
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<CarouselView
Margin="0,25,0,0"
HorizontalScrollBarVisibility="Never"
IndicatorView="indicatorView"
IsBounceEnabled="False"
ItemsSource="{Binding ActivityData}"
VerticalOptions="Center">
<CarouselView.ItemTemplate>
<DataTemplate>
<Frame Style="{StaticResource CarouselWorkaround}">
<local:PCSActivityLocationBrowserTemplate />
</Frame>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView
x:Name="indicatorView"
Padding="0,0,0,30"
IndicatorColor="{DynamicResource TranslucidBlack}"
SelectedIndicatorColor="{DynamicResource BaseTextColor}"
VerticalOptions="Start" />
</Grid>
</Grid>
</ContentPage.Content>
</ContentPage>
The Carousel Template (PCSActivityLocationBrowserTemplate):
<?xml version="1.0" encoding="UTF-8" ?>
<ContentView>
<ContentView.Content>
<Grid>
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="120" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- PAGE BG -->
<BoxView Grid.Row="1" BackgroundColor="{DynamicResource BasePageColor}" />
<!-- CONTENT -->
<Grid Padding="0,0,0,10" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="250" />
<RowDefinition Height="140" />
<RowDefinition Height="450" />
</Grid.RowDefinitions>
<Grid Margin="20">
<!-- CARD -->
<grial:CardView
Grid.Row="0"
CornerRadius="5"
HeightRequest="180"
Style="{StaticResource ResponsiveLandscapeMarginStyle}"
VerticalOptions="End">
<StackLayout
Padding="20"
HorizontalOptions="Center"
VerticalOptions="End">
<!-- Rest of code left out for simplicity -->
</StackLayout>
</grial:CardView>
</Grid>
<!-- AVATAR -->
<Grid
Grid.Row="0"
HorizontalOptions="Center"
VerticalOptions="Start">
<!-- Rest of code left out for simplicity -->
</Grid>
<!-- BG -->
<BoxView Grid.Row="1" BackgroundColor="{DynamicResource BasePageColor}" />
<!-- FLOORS -->
<grial:Repeater
Grid.Row="1"
BackgroundColor="Red"
HeightRequest="130"
ItemsSource="{Binding CurrentFloors}"
Orientation="Horizontal"
ScrollPadding="10"
Spacing="30"
VerticalOptions="CenterAndExpand">
<grial:Repeater.ItemTemplate>
<DataTemplate>
<local:PCSActivityFloorsItemTemplate />
</DataTemplate>
</grial:Repeater.ItemTemplate>
</grial:Repeater>
<!-- BG -->
<BoxView Grid.Row="2" BackgroundColor="{DynamicResource BasePageColor}" />
<!-- Rooms -->
<ListView
Grid.Row="2"
CachingStrategy="RecycleElement"
HasUnevenRows="false"
ItemsSource="{Binding CurrentRooms}"
RowHeight="60"
SeparatorVisibility="None"
VerticalOptions="Start">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<local:PCSActivityRoomsItemTemplate />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Grid>
</Grid>
</ContentView.Content>
</ContentView>
The Rooms section (Listview) is where the vertical scrolling is not working:
There is probably a quite simple solution to it but I can't seem to find it after several adjustments, like setting the third RowDefinition height (the row which contains the ListView) to *, or to Auto, by doing that the ListView disappears entirely from the screen.
Finally found the problem, after testing it a bit more by moving things around (thanks to #LucasZhang-MSFT hint to test the ListView directly in the Carousel), which I should have done a bit more before posting.
TLDR;
There were several things wrong.
The first thing I removed was the outer Grid in PCSActivityLocationBrowserTemplate, this contained 1 fixed row with a height of 120 and 1 row with a * height. This Grid was implemented to have a custom Navigation bar (with a height of 120), though this was not used (anymore) so that outer Grid was unnecessary.
The second was that the Third row (the row of my ListView) was set to a fixed height, by setting this to * the List became scrollable.
I kept noticing that my third row (with the ListView) would disappear from my screen when I set it's height to * (which I did as described in .2). This was caused by the CarouselView in the Main page because it had it's VerticalOptions set to Center. So it would always center the whole, and because the screen size is increased with the non-fixed height of the third row, the whole shebang would be centered and thus not visible anymore. Setting the VerticalOptions to Start fixed this.
The fixed code:
The Main page containing the CarouselView:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage>
<ContentPage.Content>
<Grid>
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<CarouselView
Margin="0,25,0,0"
HorizontalScrollBarVisibility="Never"
IndicatorView="indicatorView"
IsBounceEnabled="False"
ItemsSource="{Binding ActivityData}"
VerticalOptions="Start">
<CarouselView.ItemTemplate>
<DataTemplate>
<Frame Style="{StaticResource CarouselWorkaround}">
<local:PCSActivityLocationBrowserTemplate />
</Frame>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView
x:Name="indicatorView"
Padding="0,0,0,30"
IndicatorColor="{DynamicResource TranslucidBlack}"
SelectedIndicatorColor="{DynamicResource BaseTextColor}"
VerticalOptions="Start" />
</Grid>
</Grid>
</ContentPage.Content>
</ContentPage>
The Carousel Template (PCSActivityLocationBrowserTemplate):
<?xml version="1.0" encoding="UTF-8" ?>
<ContentView>
<ContentView.Content>
<Grid>
<!-- CONTENT -->
<Grid Padding="0,0,0,10" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="250" />
<RowDefinition Height="140" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Margin="20">
<!-- CARD -->
<grial:CardView
Grid.Row="0"
CornerRadius="5"
HeightRequest="180"
Style="{StaticResource ResponsiveLandscapeMarginStyle}"
VerticalOptions="End">
<!-- Info -->
<StackLayout
Padding="20"
HorizontalOptions="Center"
VerticalOptions="End">
<!-- Name -->
<Label
FontSize="18"
HorizontalTextAlignment="Center"
Style="{StaticResource LabelBoldStyle}"
Text="{Binding LocationName}" />
<!-- {Binding Profile.Name} -->
<!-- Description -->
<Label HorizontalTextAlignment="Center" Text="{Binding ClientName}" />
<!-- {Binding Profile.Description} -->
<!-- Social -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- Column 1 -->
<StackLayout Grid.Column="0" Spacing="0">
<Label
HorizontalTextAlignment="Center"
Style="{StaticResource LabelBoldStyle}"
Text="{Binding LocationTotalFloors}"
TextColor="{DynamicResource AccentColor}" />
<!-- voorheen hard-coded tekst: 1629 -->
<Label
FontSize="12"
HorizontalTextAlignment="Center"
Text="ETAGES" />
</StackLayout>
<!-- Column 2 -->
<StackLayout Grid.Column="1" Spacing="0">
<Label
HorizontalTextAlignment="Center"
Style="{StaticResource LabelBoldStyle}"
Text="{Binding LocationTotalRooms}"
TextColor="{DynamicResource AccentColor}" />
<!-- voorheen hard-coded tekst: 235 -->
<Label
FontSize="12"
HorizontalTextAlignment="Center"
Text="RUIMTES" />
</StackLayout>
<!-- Column 3 -->
<StackLayout Grid.Column="2" Spacing="0">
<Label
HorizontalTextAlignment="Center"
Style="{StaticResource LabelBoldStyle}"
Text="{Binding LocationTotalElements}"
TextColor="{DynamicResource AccentColor}" />
<!-- voorheen hard-coded tekst: 2963 -->
<Label
FontSize="12"
HorizontalTextAlignment="Center"
Text="ELEMENTEN" />
</StackLayout>
</Grid>
</StackLayout>
</grial:CardView>
</Grid>
<!-- AVATAR -->
<Grid
Grid.Row="0"
HorizontalOptions="Center"
VerticalOptions="Start">
<!-- Image -->
<local:CircleCachedImage
BorderColor="{DynamicResource BasePageColor}"
BorderSize="{OnPlatform Android=8,
iOS=15}"
HeightRequest="100"
Source="resource://PCS2.APP.SharedImages.PCSDefaultClientImage.png"
WidthRequest="100" />
<!-- Badge -->
<local:Badge
BackgroundColor="#22c064"
HorizontalOptions="Center"
Text="10+"
TextColor="{DynamicResource InverseTextColor}"
TranslationX="40"
VerticalOptions="Start" />
</Grid>
<!-- FLOORS -->
<grial:Repeater
Grid.Row="1"
BackgroundColor="Red"
HeightRequest="130"
ItemsSource="{Binding CurrentFloors}"
Orientation="Horizontal"
ScrollPadding="10"
Spacing="30"
VerticalOptions="CenterAndExpand">
<grial:Repeater.ItemTemplate>
<DataTemplate>
<local:PCSActivityFloorsItemTemplate />
</DataTemplate>
</grial:Repeater.ItemTemplate>
</grial:Repeater>
<!-- Rooms -->
<ListView
Grid.Row="2"
BackgroundColor="Blue"
CachingStrategy="RecycleElement"
HasUnevenRows="false"
ItemsSource="{Binding CurrentRooms}"
RowHeight="60"
SeparatorVisibility="None"
VerticalOptions="Start"
VerticalScrollBarVisibility="Always">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<local:PCSActivityRoomsItemTemplate />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Grid>
</ContentView.Content>
</ContentView>

Xamarin.Forms: how to position a Circle Image above and between 2 ScrollLayout

I work on a Xamarin.Forms app containing a HomePage based on:
an Image at the top background of the screen
a list of items displayed in a ScrollView
The ScrollView can recover the Image if the list contain many informations.
This looks like this:
The XAML looks like this:
<Grid RowSpacing="0"
BackgroundColor="{StaticResource Gray-050}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<!-- Header view -->
<ScrollView>
<ContentView x:Name="headerView"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- the BoxView will be replaced by an Image -->
<BoxView x:Name="headerImage"
HeightRequest="280"
BackgroundColor="Yellow" />
</Grid>
</ContentView>
</ScrollView>
<!-- List view -->
<ScrollView HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid ColumnSpacing="0"
RowSpacing="0"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="140" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Main container -->
<yummy:PancakeView CornerRadius="16,16,0,0"
Padding="0,10,0,0"
BackgroundColor="{StaticResource Gray-050}"
Grid.Row="1">
<StackLayout BackgroundColor="Transparent"
Spacing="16" Margin="16">
<!-- Phone container -->
<yummy:PancakeView Style="{StaticResource YummyHomeFrame}"
Padding="16">
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Style="{StaticResource HomePageHeaderLabelStyle}"
Text="Phone Number" />
<Label Grid.Row="1"
Style="{StaticResource HomePageLabelStyle}"
Text="+33 6 20 10 70 40" />
</Grid>
</yummy:PancakeView>
<!-- Other containers -->
</StackLayout>
</yummy:PancakeView>
</Grid>
</Grid>
</ScrollView>
</Grid>
</Grid>
I would like to display a circle logo between the 2 ScrollViews, just above the MainContainer, something like this:
But I don't have managed to achieve this, and I don't know if it's possilbe...
You could have a try with RelativeLayout to achieve that.
Here is similar sample code:
<ScrollView HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid ColumnSpacing="0"
RowSpacing="0"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="140" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Main container -->
<RelativeLayout>
<Frame CornerRadius="16" x:Name="MainFrame"
Padding="0,10,0,0"
BackgroundColor="LightBlue"
Grid.Row="1">
<StackLayout BackgroundColor="Transparent"
Spacing="16"
Margin="16">
<!-- Phone container -->
<Frame Padding="16">
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Text="Phone Number" />
<Label Grid.Row="1"
Text="+33 6 20 10 70 40" />
</Grid>
</Frame>
<!-- Other containers -->
</StackLayout>
</Frame>
<BoxView CornerRadius="25"
BackgroundColor="AliceBlue"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=MainFrame, Property=Width,Factor=0.45}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=MainFrame, Property=Y,Constant=-20}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=MainFrame, Constant=100}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToView, ElementName=MainFrame, Constant=100}" />
</RelativeLayout>
</Grid>
</Grid>
</ScrollView>
The effect:
Add you circle logo at the same level of the container.
<!-- Items view -->
<ScrollView HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Grid
ColumnSpacing="0"
RowSpacing="0"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="140" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Container -->
<Frame ...>
<!-- Yoour logo -->
<Frame
Grid.Row="1"
Margin="0,-40,0,0"
BackgroundColor="Green"
CornerRadius="40"
HeightRequest="40"
HorizontalOptions="Center"
VerticalOptions="Start"
WidthRequest="40" />
</Grid>
</Grid>
</ScrollView>
Check the demo:
As I didn't use the nugget package, I just replaced the pancake view with a frame. And you can adjust the logo size, margin as you wish.
Btw, your structure is a bit complex or redundant, could be a 4-level main structure as below:
<Grid x:Name="mainGrid">
<!-- Header view -->
<BoxView (or Image).../>
<!-- Items view -->
<ScrollView ...>
<Grid ...>
<!-- Container -->
<Frame ...>
<!-- logo -->
<Frame (or Image)...>
</Grid>
</ScrollView>
</Grid>
Thank you #Shaw and #Junior Jiang - MSFT
There are so 2 solutions: with or without RelativeLayout.
The version without RelativeLayout was given by #Shaw.
<Grid RowSpacing="0"
BackgroundColor="LightGray"
x:Name="mainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<!-- Header view -->
<ScrollView>
<ContentView x:Name="headerView"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- the BoxView can be replaced by an Image -->
<BoxView x:Name="headerImage"
HeightRequest="280"
BackgroundColor="Yellow" />
</Grid>
</ContentView>
</ScrollView>
<!-- Content View -->
<ScrollView HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid ColumnSpacing="0"
RowSpacing="0"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="140" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Frame Container-->
<Frame x:Name="MainFrame"
CornerRadius="16"
Padding="0,10,0,0"
BackgroundColor="LightGray"
Grid.Row="1">
<StackLayout BackgroundColor="Transparent"
Spacing="16" Margin="16,48,16,16">
<!-- Phone Frame -->
<Frame Padding="16">
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Text="Phone Number" />
<Label Grid.Row="1"
Text="+33 6 20 10 70 40" />
</Grid>
</Frame>
<!-- Other Frames -->
<!-- ... -->
</StackLayout>
</Frame>
<!-- No RelativeLayout positioned item -->
<BoxView Grid.Row="1"
CornerRadius="45"
BackgroundColor="DarkBlue"
WidthRequest="90" HeightRequest="90"
VerticalOptions="Start" HorizontalOptions="Center"
Margin="0,-45,0,0" />
</Grid>
</Grid>
</ScrollView>
</Grid>
</Grid>
The version with RelativeLayout is based on #Junior Jiang - MSFT suggestion:
<Grid RowSpacing="0"
BackgroundColor="LightGray"
x:Name="mainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="1">
<!-- Header View -->
<ScrollView>
<ContentView x:Name="headerView"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- the BoxView can be replaced by an Image -->
<BoxView x:Name="headerImage"
HeightRequest="280"
BackgroundColor="Yellow" />
</Grid>
</ContentView>
</ScrollView>
<!-- Content View -->
<ScrollView HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid ColumnSpacing="0"
RowSpacing="0"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="140" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="1">
<RelativeLayout>
<!-- Frame container -->
<Frame x:Name="MainFrame"
CornerRadius="16"
Padding="0,10,0,0"
BackgroundColor="LightGray"
Grid.Row="1">
<StackLayout BackgroundColor="Transparent"
Spacing="16" Margin="16,48,16,16">
<!-- Phone Frame -->
<Frame Padding="16">
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Text="Phone Number" />
<Label Grid.Row="1"
Text="+33 6 20 10 70 40" />
</Grid>
</Frame>
<!-- Other Frames -->
<!-- ... -->
</StackLayout>
</Frame>
<!-- RelativeLayout positioned item -->
<BoxView CornerRadius="45"
BackgroundColor="DarkBlue"
WidthRequest="90" HeightRequest="90"
VerticalOptions="Center" HorizontalOptions="Center"
RelativeLayout.XConstraint="{ConstraintExpression
Type=RelativeToParent,
Property=Width,
Factor=0.5,
Constant=-45}"
RelativeLayout.YConstraint="{ConstraintExpression
Type=RelativeToView,
ElementName=MainFrame,
Property=Y,Constant=-45}" />
</RelativeLayout>
</StackLayout>
</Grid>
</ScrollView>
</Grid>
</Grid>

Control is pushed from the screen

I have a xamarin.forms app. A screen has many controls, and I use ScrollView to let the user ability to see all the controls. I have a button outside of the ScrollView, because I want it to be easily accessible without scrolling down the screen. But some of our customers have vision issues, so they enlarge the text size on their phones. Then the button disappears from the screen. I wonder what I can do to fix this... I guess I would agree with the scrolling only for those with the large text size, if there is no better solution.
Here is my code:
<ContentPage.Content>
<StackLayout>
<ScrollView>
<StackLayout Margin="30">
... Many controls are here
</StackLayout>
</ScrollView>
<StackLayout
x:Name="Validation"
HeightRequest="150"
IsVisible="{Binding ValidationResult.IsValid, Converter={converters:InverseBoolConverter}}">
<Label Text="Please fix the following errors:" TextColor="Red" Margin="0,0,0,10" />
<Label Text="{Binding Errors}" TextColor="Red" />
</StackLayout>
<Button
Text="Calculate"
Command="{Binding CalculateCommand}"
Style="{StaticResource ButtonStyle}"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
ADDED:
I did not mention that the content of the page is within a ControlTemplate:
<ControlTemplate x:Key="MainPageTemplate">
<Grid>
<Label Text="{Binding ErrorMessage}" TextColor="Red" />
<ContentPresenter Margin="10, 0, 10, 120" />
<StackLayout VerticalOptions="End" BackgroundColor="LightGray" Padding="20" >
<Label Text="{Binding Source={x:Static sys:DateTime.Now}, StringFormat='© {0:yyyy} Company Name, Inc.'}" />
<Label Text="All trademarks shown are the intellectual properties of their respective owners." />
</StackLayout>
</Grid>
</ControlTemplate>
Agree with #Jason , StackLayout will not fit the size of its child Elements . So you could use Grid with three Rows
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.9*" />
<RowDefinition Height="150" />
<RowDefinition Height="0.1*" />
</Grid.RowDefinitions>
<ScrollView Grid.Row="0" Orientation="Both">
<StackLayout Margin="30" BackgroundColor="LightBlue" HeightRequest="300">
</StackLayout>
</ScrollView>
<Grid HeightRequest = "150" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Grid.Row="0" Text="Please fix the following errors:" TextColor="Red" Margin="0,0,0,10" />
<Label Grid.Row="1" Text="{Binding Errors}" TextColor="Red" />
</Grid>
<Button
Grid.Row="2"
Text="Calculate"
HorizontalOptions="CenterAndExpand" />
</Grid>

Xamarin forms page layout with relative layout and background image

I am new to Xamarin forms and Xaml, trying to design a page layout with a background image, I found out that using Relative layout, I can get the image expand to whole screen using aspect property. However, When I put a grid or layout after the image inside RelativeLayout, It does not expand to whole area, It only covers the given content.
I have tried to achieve this using relative layout. I am using an Image tag with aspect property and then my stacklayout on top of image.
<RelativeLayout>
<Image Aspect="AspectFill" Source="c1.jpg" />
<StackLayout>
<Button Text="Meha" TextColor="White"/>
</StackLayout>
</RelativeLayout>
I want the button to cover whole width and align it vertically center.
This is how i normally solve this situation:
<Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="White">
<Image Source="c1.jpg" Aspect="AspectFill" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="Center">
<Button Text="Meha" TextColor="Black" HorizontalOptions="FillAndExpand"/>
</StackLayout>
</Grid>
Another way you can try is to use a grid strategy instead of a relative layout. like this example of a welcome page that i use in my app with a bg image:
<Grid
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<!---BG IMAGE -->
<Image
Source="yourimage"
Aspect="AspectFill"
Opacity="0.5"
/>
<Grid>
<Grid.RowDefinitions>
<RowDefinition
Height="Auto"/>
<RowDefinition
Height="Auto"/>
<RowDefinition
Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="*" />
<ColumnDefinition
Width="100" />
<ColumnDefinition
Width="*" />
</Grid.ColumnDefinitions>
<!--TEXT-->
<StackLayout
Grid.Row="1"
Grid.ColumnSpan="3"
Spacing="10"
Orientation="Vertical"
VerticalOptions="Center"
TranslationY="-20"
Padding="20">
<Label
LineBreakMode="WordWrap"
Text="Welcome!"
TextColor="White"
VerticalTextAlignment="Center"
FontAttributes="Bold"
>
<Label.FontSize>
<OnIdiom
x:TypeArguments="x:Double"
Phone="26"
Tablet="36" />
</Label.FontSize>
</Label>
<Setter
Property="HeightRequest"
Value="4" />
<Setter
Property="VerticalOptions"
Value="End" />
<Setter
Property="WidthRequest"
Value="40" />
<Setter
Property="BackgroundColor"
Value="{ DynamicResource AccentColor }"
<!-- ACCENT LINE -->
<BoxView VerticalOptions= "End"
HeightRequest = "4"
BackgroundColor="Green" />
</StackLayout>
</Grid>
</Grid>

In grid Layout how to scroll page when keyboard open in xamarin.forms?

I am facing one issue in xamarin.forms. I am using GridView to make login page design so it can be change accordingly device height and width. I don't want scroll that page So I didn't put any ScrollView.
Xaml Design Code :-
<?xml version="1.0" encoding="utf-8" ?>
<custom:KeyboardResizingAwareContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="HRMS.Login.LoginPage"
BackgroundImage="login_bg.png"
xmlns:local="clr-namespace:HRMS;assembly=HRMS"
Title="{x:Static local:AppResources.TitleLogin}"
xmlns:custom="clr-namespace:HRMS.Login;assembly=HRMS">
<ContentPage.Padding>
<OnIdiom x:TypeArguments="Thickness" Phone="60,40,60,40" Tablet="120,100,120,100" />
</ContentPage.Padding>
<custom:KeyboardResizingAwareContentPage.Resources>
<ResourceDictionary>
<Style x:Key="SubTitleStyle" TargetType="Label">
<Setter Property="FontSize" Value="Small" />
<Setter Property="FontAttributes" Value="Bold" />
<Setter Property="TextColor" Value="White" />
</Style>
</ResourceDictionary>
</custom:KeyboardResizingAwareContentPage.Resources>
<custom:KeyboardResizingAwareContentPage.Content>
<AbsoluteLayout x:Name="AbsMain">
<Grid VerticalOptions="Center" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
<Grid.RowDefinitions>
<RowDefinition Height="35*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="6*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="6*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image x:Name="ImgLogo" Source="login_logo.png" HorizontalOptions="Center" Grid.Row="0"/>
<StackLayout Grid.Row="1">
<StackLayout.HeightRequest>
<OnIdiom x:TypeArguments="x:Double" Tablet="55" Phone="35" />
</StackLayout.HeightRequest>
</StackLayout>
<Frame OutlineColor="#DCDCDC"
HorizontalOptions="FillAndExpand" VerticalOptions="Center"
HasShadow="false" Padding="1"
Grid.Row="2"
BackgroundColor="White"
Margin="5,0,5,0">
<Frame.HeightRequest>
<OnIdiom x:TypeArguments="x:Double" Tablet="55" Phone="35" />
</Frame.HeightRequest>
<Frame.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="9*"/>
</Grid.ColumnDefinitions>
<Image x:Name="ImgLoginName" Grid.Column="0" Source="ico_login_name.png"
HorizontalOptions="StartAndExpand" VerticalOptions="Center" Margin="5,0,0,0"/>
<StackLayout Grid.Column="1" VerticalOptions="Center">
<Entry x:Name="TxtUsername" TextColor="#f15a23"
Margin="5,0,0,0"
PlaceholderColor="#8c8c8c"
BackgroundColor="White"
Placeholder="{x:Static local:AppResources.PHEmployeeCode}" />
</StackLayout>
</Grid>
</Frame.Content>
</Frame>
<Frame OutlineColor="#DCDCDC"
HorizontalOptions="FillAndExpand" VerticalOptions="Center"
HasShadow="false" Padding="1"
Grid.Row="3"
BackgroundColor="White"
Margin="5,0,5,0">
<Frame.HeightRequest>
<OnIdiom x:TypeArguments="x:Double" Tablet="55" Phone="35" />
</Frame.HeightRequest>
<Frame.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="9*"/>
</Grid.ColumnDefinitions>
<Image x:Name="ImgLoginPassword" Grid.Column="0" Source="ico_login_password.png"
HorizontalOptions="StartAndExpand" VerticalOptions="Center" Margin="5,0,0,0"/>
<StackLayout Grid.Column="1" VerticalOptions="Center">
<Entry x:Name="TxtPassword" IsPassword="True" TextColor="#f15a23"
PlaceholderColor="#8c8c8c"
Margin="5,0,0,0"
BackgroundColor="White"
Placeholder="{x:Static local:AppResources.PHPassword}" />
</StackLayout>
</Grid>
</Frame.Content>
</Frame>
<Label x:Name="LblForgotPassword" Grid.Row="4" Margin="5,0,5,0"
Text="Forgot Password?" TextColor="Black" HorizontalTextAlignment="End"/>
<Button x:Name="BtnLogin" Text="{x:Static local:AppResources.BLogin}" Clicked="LoginButton_Clicked"
Grid.Row="5" BackgroundColor="#f15a23" TextColor="White"
HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Button.HeightRequest>
<OnIdiom x:TypeArguments="x:Double" Tablet="55" Phone="45" />
</Button.HeightRequest>
</Button>
<Image x:Name="ImgOr" Grid.Row="6" HorizontalOptions="FillAndExpand"
Source="or.png" />
<Button x:Name="BtnUpdateDevicewithlogin" Text="{x:Static local:AppResources.BUpdateDevice}"
Clicked="UpdateDeviceWithLoginButton_Clicked" Grid.Row="7"
BackgroundColor="#f15a23" TextColor="White" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Button.HeightRequest>
<OnIdiom x:TypeArguments="x:Double" Tablet="55" Phone="45" />
</Button.HeightRequest>
</Button>
</Grid>
<ActivityIndicator x:Name="actIndicator2" Color="#f15a23" Opacity="2"
HeightRequest="50" WidthRequest="50" VerticalOptions="Center" HorizontalOptions="Center"
AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" />
</AbsoluteLayout>
</custom:KeyboardResizingAwareContentPage.Content>
</custom:KeyboardResizingAwareContentPage>
I am using "KeyboardResizingAwareContentPage" page instead "ContentPage" because In ios Page is not set when keyboard is open. password field hide behind keyboard so users can not see whatever then typing. That's why I am using Render for content Page in IOs.
As Above images when I focus on username or password entry field two buttons are hide behind the keyboard. Client requirement is that at that time page should be scroll. How can I solve this problem? Is it possible through rendering? I am facing this issue in both the platform. (ios and android)
Even if you don't mean to scroll your page, use a ScrollView as the root of your Page, and put your grid in it.
This should fix it.