Spawn Images on certain position Xamarin Forms - image

Hello Xamarin community!
I just started with Xamarin Forms and wanted to create a simple app, which helps counting on a card game.
The points should be visualized in this image and should look like the following one:
In the first row there should be a horizontal line every fifth line and on the second line there should be a horizontal line every second line.
Here is how it looks like when i manually add the lines and add a backgroundcolor for visualization:
Here is the View:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="*" />
<RowDefinition Height="8*" />
<RowDefinition Height="8*" />
<RowDefinition Height="8*" />
<RowDefinition Height="*" />
<RowDefinition Height="4*" />
<RowDefinition Height="4*" />
</Grid.RowDefinitions>
<Entry Text="{Binding Team1.Name}" Grid.Column="0" Grid.Row="0" />
<Label Text="150" Grid.Column="0" Grid.Row="1" />
<Entry Text="{Binding Team2.Name}" Grid.Column="1" Grid.Row="0" />
<Label Text="129" Grid.Column="1" Grid.Row="1" />
<Image Source="Schlange.png"
Aspect="Fill"
BackgroundColor="#"
Grid.ColumnSpan="2"
Grid.Row="2"
Grid.RowSpan="3" />
<Image Scale="0.5" BackgroundColor="Gray" Source="Strich1.png" Grid.Column="0" Grid.Row="2" Margin="0,0,0,0"/>
<Image BackgroundColor="Blue" Source="Strich1.png"/>
<Button BackgroundColor="Transparent" Grid.Column="0" Grid.Row="2" />
<Button BackgroundColor="Transparent" Grid.Column="0" Grid.Row="3" />
<Button BackgroundColor="Transparent" Grid.Column="0" Grid.Row="4" />
<Button BackgroundColor="Transparent" Grid.Column="1" Grid.Row="2" />
<Button BackgroundColor="Transparent" Grid.Column="1" Grid.Row="3" />
<Button BackgroundColor="Transparent" Grid.Column="1" Grid.Row="4" />
<Label Text="1" Grid.Column="0" Grid.Row="5"></Label>
<Label Text="-1" Grid.Column="1" Grid.Row="5"></Label>
<Entry Grid.Column="0" Grid.Row="6"></Entry>
<Entry Grid.Column="1" Grid.Row="6"></Entry>
<Button Text="Runde!" Grid.Row="7" Grid.ColumnSpan="2" />
</Grid>
My Question would be how to spawn Images on certain positions? Is this even possible with a grid? What happens to mobile phones with different resolution?
Thanks in advance and don't hesitate to ask if needed.

Related

Xamarin Forms Remove space from Entry

I have a problem. I created a register page, with labels that show an error like "Username already exists". But the space between the Label and the Entry is a little bit too much. Here is an image of how it is now:
Now all of that is in a Grid, but the RowHeights are set to Auto, so this is the smallest size that the entry could get. The label, however, must be far more to the top (closer to the Username Entry).
Here is my code:
<Grid VerticalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="35" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="90" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Image Grid.Row="1" Grid.Column="0" x:Name="imgUsernameStatus" Margin="5"/>
<Entry Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Placeholder="Username" PlaceholderColor="#bababa" FontSize="16" x:Name="txtUsername" TextColor="White" Unfocused="OnUsernameUnfocused" TextChanged="OnUsernameTextChanged" />
<Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" Text="Username already exists" TextColor="Red" FontSize="11" x:Name="txtUsernameError" IsVisible="False" />
<Image Grid.Row="3" Grid.Column="0" x:Name="imgEmailStatus" Margin="5"/>
<Entry Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="2" Placeholder="Email" PlaceholderColor="#bababa" FontSize="16" x:Name="txtEmail" TextColor="White" TextChanged="OnEmailTextChanged" />
</Grid>
How can I do that?
Default value for RowSpacing is 6 unit
Set RowSpacing="0"
<Grid VerticalOptions="CenterAndExpand"
RowSpacing="0">
<!--Your Content-->
</Grid>

Xamarin, How can i contain the first batch of list of rows and columns with a border, like group them together?

I've been trying to put border on these text and the only way i can is taking off grid on every row so now it has borders but then the grid frame is off. I can't differentiate which part is from row1 or the beginning of list.
<StackLayout>
<Label Text="rain Log" VerticalOptions="Center" HorizontalOptions="Center" Margin="0,50,0,0" />
<ListView x:Name="postListView" >
<ListView.ItemTemplate>
<!-- from the post.cs -->
<DataTemplate>
<ViewCell >
<Grid BackgroundColor="Black" HorizontalOptions="CenterAndExpand" VerticalOptions="FillAndExpand">
<Grid.RowDefinitions > <!-- 8 rows -->
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<!-- Row 1 -->
<Label Grid.Row="1" FontSize="Medium" Grid.Column="0" Text="right tst:" HorizontalTextAlignment="Start" BackgroundColor="cornflowerblue" />
<Label Grid.Column="1" Grid.Row="1" Text="{Binding drain1vol}" BackgroundColor="cornflowerblue"/>
<!-- endrow1 -->
<!-- rain1 Row 1 -->
<Label Grid.Row="2" Grid.Column="0" Text="nothing" BackgroundColor="Yellow"/>
<Label Grid.Row="2" Grid.Column="1" Text="{Binding drain2vol}"
HorizontalTextAlignment="Center" BackgroundColor="Yellow" />
<!-- endrow1 -->
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
what i want
If you want to separate out your item as like group than you can use SeparatorColor and its visibility.
Instead of 2 boxview you can also use one grid as wrapper and using ColumnSpacing and RowSpacing.
<ListView x:Name="postListView" SeparatorVisibility="Default" HasUnevenRows="True" ItemsSource="{Binding Items}" SeparatorColor="White">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid BackgroundColor="Black" HorizontalOptions="CenterAndExpand"
VerticalOptions="FillAndExpand" Padding="1,2,1,0">
<Grid HorizontalOptions="CenterAndExpand"
VerticalOptions="FillAndExpand" ColumnSpacing="1" RowSpacing="1">
<Grid.RowDefinitions >
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" FontSize="Medium" Grid.Column="0" Text="right tst:" HorizontalTextAlignment="Start" BackgroundColor="cornflowerblue" />
<Label Grid.Column="1" Grid.Row="0" Text="{Binding drain1vol}" HorizontalTextAlignment="Center" BackgroundColor="cornflowerblue"/>
<Label Grid.Row="1" Grid.Column="0" Text="nothing" BackgroundColor="Yellow"/>
<Label Grid.Row="1" Grid.Column="1" Text="{Binding drain2vol}" HorizontalTextAlignment="Center" BackgroundColor="Yellow" />
</Grid>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Yes, you can use BoxView to achieve this function, try the following code :
<StackLayout>
<Label Text="rain Log" VerticalOptions="Center" HorizontalOptions="Center" Margin="0,50,0,0" />
<ListView x:Name="postListView" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell >
<Grid HorizontalOptions="CenterAndExpand" VerticalOptions="FillAndExpand" ColumnSpacing="2" RowSpacing="0" BackgroundColor="Black">
<Grid.RowDefinitions >
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" FontSize="Medium" Grid.Column="0" Text="right tst:" HorizontalTextAlignment="Start" BackgroundColor="cornflowerblue" />
<Label Grid.Column="1" Grid.Row="0" Text="{Binding drain1vol}" HorizontalTextAlignment="Center" BackgroundColor="cornflowerblue"/>
<!-- thin separator -->
<BoxView Color="Black" Grid.Row="0" Grid.ColumnSpan="2" HeightRequest="2" VerticalOptions="End" HorizontalOptions="FillAndExpand" />
<Label Grid.Row="1" Grid.Column="0" Text="nothing" BackgroundColor="Yellow"/>
<Label Grid.Row="1" Grid.Column="1" Text="{Binding drain2vol}" HorizontalTextAlignment="Center" BackgroundColor="Yellow" />
<!-- thick separator -->
<BoxView Color="Black" Grid.Row="3" Grid.ColumnSpan="2" HeightRequest="5" VerticalOptions="End" HorizontalOptions="FillAndExpand" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
The effect is as follows:
use a BoxView overlaid on your Grid to simulate a separator
<Grid HorizontalOptions="CenterAndExpand" VerticalOptions="FillAndExpand">
<!-- Row 1 -->
<Label Grid.Row="1" FontSize="Medium" Grid.Column="0" Text="right tst:" HorizontalTextAlignment="Start" BackgroundColor="cornflowerblue" />
<Label Grid.Column="1" Grid.Row="1" Text="{Binding drain1vol}" BackgroundColor="cornflowerblue"/>
<! thin separator -->
<BoxView Color="Black" Grid.Row="1" Grid.ColumnSpan="2" HeightRequest="2" VerticalOptions="End" HorizontalOptions="FillAndExpand" />
<!-- rain1 Row 1 -->
<Label Grid.Row="2" Grid.Column="0" Text="nothing" BackgroundColor="Yellow"/>
<Label Grid.Row="2" Grid.Column="1" Text="{Binding drain2vol}"
HorizontalTextAlignment="Center" BackgroundColor="Yellow" />
<! thick separator -->
<BoxView Color="Black" Grid.Row="2" Grid.ColumnSpan="2" HeightRequest="5" VerticalOptions="End" HorizontalOptions="FillAndExpand" />
</Grid>

Image on top of frame (center position) absolute layout or any other solution xamarin forms

I have to admit absolutelayout is the thing that does not get into my head.
Can you help?
I need to put an image on top of a frame -grid etc.. on few screen so I must find a solution that works.
This is what I want to achieve
This is what I have done used boxview (purple) supposed to be my img1.
MyXaml
<AbsoluteLayout>
<StackLayout Margin="20">
<BoxView Color="Purple" WidthRequest="40" HeightRequest="40"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"></BoxView>
<Frame
Padding="0"
BorderColor="Green"
CornerRadius="10">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<BoxView Grid.Row="0" Grid.Column="0" Margin="5" Color="Red"/>
<BoxView Grid.Row="0" Grid.Column="4" Margin="5" Color="GreenYellow"/>
</Grid>
<Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" HeightRequest="50" BackgroundColor="Coral" Margin="20,0,20,0"
TextColor="White" Text="Label 3" />
<!--other stuff down here -->
</Grid>
</Frame>
</StackLayout>
</AbsoluteLayout>
My Result (as you can see I get a long rectangle when all i want is the boxview in the middle like above). Can you help?
This should get you started (I mod'ed a demo of mine, so adjust accordingly):
<AbsoluteLayout x:Name="ViewControls" AbsoluteLayout.LayoutBounds="1,1,1,.50" AbsoluteLayout.LayoutFlags="All" BackgroundColor="#66000000" Margin="10,10,10,10">
<Frame CornerRadius="10" Margin="20,20,20,20" BackgroundColor="Black" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="1,1,1,1">
<Grid Margin="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Text="Left" BackgroundColor="White" HorizontalTextAlignment="Center" Grid.Column="0" />
<Label Text="Right" BackgroundColor="White" HorizontalTextAlignment="Center" Grid.Column="2" />
<Label Text="Across Page" BackgroundColor="White" HorizontalTextAlignment="Center" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" />
</Grid>
</Frame>
<Image Source="yt.png"
BackgroundColor="Transparent"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".5,0,50,50" />
</AbsoluteLayout>

Grid rows overlap on Android but not on iOS

I am using a Grid Layout to make a registration form. I have a Grid which contains two rows. The first row is an image, the second row is another Grid and has the problem that on Android the entries (which are in a StackLayout) overlap the button, but this doesn't make sense because the grid should never overlap its other rows. Indeed, it works on iOS.
XAML:
<Grid>
<Grid.RowDefinitions>
<RowDefinition
Height="Auto" />
<RowDefinition
Height="*" />
</Grid.RowDefinitions>
<Image
Source="blue_background.png"
Aspect="Fill"
Grid.Row="0"
Grid.Column="0" />
<Image
Source="icon.png"
Grid.Row="0"
Grid.Column="0"
VerticalOptions="Center" />
<Grid
Padding="10"
Grid.Row="1"
Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition
Height="*" />
<RowDefinition
Height="2*" />
<RowDefinition
Height="*" />
<RowDefinition
Height="Auto" />
</Grid.RowDefinitions>
<Label
Text="Unisciti a Youni!"
FontSize="Large"
FontAttributes="Bold"
HorizontalTextAlignment="Center"
TextColor="#174668"
Grid.Row="0"
Grid.Column="0"
VerticalOptions="Center" />
<StackLayout
Grid.Row="1"
Grid.Column="0"
Spacing="0"
VerticalOptions="Fill">
<Entry
Text="{Binding RegName}"
Placeholder="Nome"
VerticalOptions="FillAndExpand" />
<Entry
Text="{Binding RegSurname}"
Placeholder="Cognome"
VerticalOptions="FillAndExpand" />
<Entry
Text="{Binding RegEmail}"
Placeholder="Email"
Keyboard="Email"
VerticalOptions="FillAndExpand" />
<Entry
Text="{Binding RegPassword}"
Placeholder="Password"
IsPassword="true"
VerticalOptions="FillAndExpand" />
<Entry
Text="{Binding RegPasswordConfirm}"
Placeholder="Conferma password"
IsPassword="true"
VerticalOptions="FillAndExpand" />
</StackLayout>
<Button
Command="{Binding RegisterCommand}"
Text=" Registrati "
TextColor="White"
BackgroundColor="#3A8FDA"
Grid.Row="2"
Grid.Column="0"
HorizontalOptions="Center"
VerticalOptions="Center" />
<StackLayout
Orientation="Horizontal"
HorizontalOptions="Center"
VerticalOptions="Center"
Grid.Row="3"
Grid.Column="0">
<StackLayout.Spacing>
<OnPlatform
x:TypeArguments="x:Double">
<On
Platform="Android"
Value="-10" />
<On
Platform="iOS"
Value="3" />
</OnPlatform>
</StackLayout.Spacing>
<Label
Text="Sei già registrato?"
FontSize="Small"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center" />
<Button
x:Name="LoginSwitchButton"
Pressed="LoginSwitch_Handle_Pressed"
Released="LoginSwitch_Handle_Released"
Command="{Binding LoginSwitchCommand}"
Text="Passa al login"
FontSize="Small"
TextColor="#45BFEE"
BackgroundColor="Transparent" />
</StackLayout>
</Grid>
</Grid>
My suggestion to fix your issue would be to start by simplifying your layout because you have extra nested views inside of grids when one single Grid could probably be used for the entire thing. For example:
<Grid ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Grid.ColumnSpan="2" Source="blue_background.png" Aspect="Fill" />
<Image Grid.ColumnSpan="2" Source="icon.png" VerticalOptions="Center" HorizontalOptions="Center"/>
<Label Grid.Row="1" Grid.ColumnSpan="2" Text="Unisciti a Youni!" FontSize="Large" FontAttributes="Bold" TextColor="#174668" VerticalOptions="Center" HorizontalOptions="Center"/>
<Entry Grid.Row="2" Grid.ColumnSpan="2" Margin="10,0" Text="{Binding RegName}" Placeholder="Nome" VerticalOptions="FillAndExpand" />
<Entry Grid.Row="3" Grid.ColumnSpan="2" Margin="10,0" Text="{Binding RegSurname}" Placeholder="Cognome" VerticalOptions="FillAndExpand" />
<Entry Grid.Row="4" Grid.ColumnSpan="2" Margin="10,0" Text="{Binding RegEmail}" Placeholder="Email" Keyboard="Email" VerticalOptions="FillAndExpand" />
<Entry Grid.Row="5" Grid.ColumnSpan="2" Margin="10,0" Text="{Binding RegPassword}" Placeholder="Password" IsPassword="true" VerticalOptions="FillAndExpand" />
<Entry Grid.Row="6" Grid.ColumnSpan="2" Margin="10,0" Text="{Binding RegPasswordConfirm}" Placeholder="Conferma password" IsPassword="true" VerticalOptions="FillAndExpand" />
<Button Grid.Row="7" Grid.ColumnSpan="2" Command="{Binding RegisterCommand}" Text=" Registrati " TextColor="White" BackgroundColor="#3A8FDA" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Grid.Row="8" Text="Sei già registrato?" FontSize="Small" VerticalOptions="Center" HorizontalOptions="End" />
<Button Grid.Row="8" Grid.Column="1" x:Name="LoginSwitchButton" Command="{Binding LoginSwitchCommand}" Text="Passa al login" VerticalOptions="Center" HorizontalOptions="Start" FontSize="Small" TextColor="#45BFEE" BackgroundColor="Transparent" />
</Grid>
Then from there I'd adjust the row heights and spacing to match your designs accordingly.
Just change your root container layout to ScrollView
<ScrollView>
<Grid>
<Grid.RowDefinitions>
<RowDefinition
Height="Auto" />
<RowDefinition
Height="*" />
</Grid.RowDefinitions>
<Image
Source="blue_background.png"
Aspect="Fill"
Grid.Row="0"
Grid.Column="0" />
<Image
Source="icon.png"
Grid.Row="0"
Grid.Column="0"
VerticalOptions="Center" />
<Grid
Padding="10"
Grid.Row="1"
Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition
Height="*" />
<RowDefinition
Height="2*" />
<RowDefinition
Height="*" />
<RowDefinition
Height="Auto" />
</Grid.RowDefinitions>
<Label
Text="Unisciti a Youni!"
FontSize="Large"
FontAttributes="Bold"
HorizontalTextAlignment="Center"
TextColor="#174668"
Grid.Row="0"
Grid.Column="0"
VerticalOptions="Center" />
<StackLayout
Grid.Row="1"
Grid.Column="0"
Spacing="0"
VerticalOptions="Fill">
<Entry
Text="{Binding RegName}"
Placeholder="Nome"
VerticalOptions="FillAndExpand" />
<Entry
Text="{Binding RegSurname}"
Placeholder="Cognome"
VerticalOptions="FillAndExpand" />
<Entry
Text="{Binding RegEmail}"
Placeholder="Email"
Keyboard="Email"
VerticalOptions="FillAndExpand" />
<Entry
Text="{Binding RegPassword}"
Placeholder="Password"
IsPassword="true"
VerticalOptions="FillAndExpand" />
<Entry
Text="{Binding RegPasswordConfirm}"
Placeholder="Conferma password"
IsPassword="true"
VerticalOptions="FillAndExpand" />
</StackLayout>
<Button
Command="{Binding RegisterCommand}"
Text=" Registrati "
TextColor="White"
BackgroundColor="#3A8FDA"
Grid.Row="2"
Grid.Column="0"
HorizontalOptions="Center"
VerticalOptions="Center" />
<StackLayout
Orientation="Horizontal"
HorizontalOptions="Center"
VerticalOptions="Center"
Grid.Row="3"
Grid.Column="0">
<StackLayout.Spacing>
<OnPlatform
x:TypeArguments="x:Double">
<On
Platform="Android"
Value="-10" />
<On
Platform="iOS"
Value="3" />
</OnPlatform>
</StackLayout.Spacing>
<Label
Text="Sei già registrato?"
FontSize="Small"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center" />
<Button
x:Name="LoginSwitchButton"
Pressed="LoginSwitch_Handle_Pressed"
Released="LoginSwitch_Handle_Released"
Command="{Binding LoginSwitchCommand}"
Text="Passa al login"
FontSize="Small"
TextColor="#45BFEE"
BackgroundColor="Transparent" />
</StackLayout>
</Grid>
</Grid>
</ScrollView>
Put your Grid in ScrollView

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.
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>

Resources