I have to fill all the screen with two buttons vertically
I already tried to use fill and expand:
<ContentPage.Content>
<StackLayout>
<Button Text="Histórico"
BackgroundColor="Transparent"
BorderColor="Black"
BorderWidth="1"
Clicked="Timeline"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"/>
<Button Text="Minha Agenda"
BackgroundColor="Transparent"
BorderColor="Black"
BorderWidth="1"
Clicked="MinhaAgenda"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"/>
</StackLayout>
</ContentPage.Content>
It works, but this caused to much lag on the screen, i dont know why
Is there other solution for this?
How about using a Grid, something like:
<ContentPage.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button Text="History"
Grid.Row="0"
HorizontalOptions="Fill"
VerticalOptions="Fill" />
<Button Text="Agenda"
Grid.Row="1"
HorizontalOptions="Fill"
VerticalOptions="Fill" />
</Grid>
</ContentPage.Content>
This will fill the view with two equally sized buttons.
Related
Good afternoon all,
Having an interesting issue here where by I have 4 buttons within a grid that all work ... kind of ... the top two buttons work without an issue however the bottom two you can only click the top half of the button otherwise it does not register the action.
Below is the Xaml code I am using ... Hope this helps... so far everything I have read doesn't seem to work so I can only assume I am missing something very simple.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="HomemasterMobileApplication.Views.HomePage"
Title=""
BackgroundImageSource = "HousingBackground2">
<ContentView >
<ScrollView>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="100"/>
<RowDefinition Height="15"/>
<RowDefinition Height="260"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="1" />
<StackLayout Grid.Row="1" Orientation="Horizontal" HorizontalOptions="Center" Padding="0,0,0,0" VerticalOptions="Center" Opacity="0.8" BackgroundColor="#002D485D" >
<ContentView>
<ImageButton Source="HomeMasterLogo.png" HeightRequest="100" CornerRadius="25"/>
</ContentView>
</StackLayout>
<StackLayout Grid.Row="3" Orientation="Horizontal" Padding="0,15,0,0" Spacing="5" HorizontalOptions="Center">
<Grid>
<Grid.ColumnDefinitions >
<!--0--><ColumnDefinition Width="10*"/>
<!--1--><ColumnDefinition Width="40*"/>
<!--2--><ColumnDefinition Width="10*"/>
<!--3--><ColumnDefinition Width="40*"/>
<!--4--><ColumnDefinition Width="10*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<!--0--><RowDefinition Height="10"/>
<!--1--><RowDefinition Height="125"/>
<!--2--><RowDefinition Height="40"/>
<!--3--><RowDefinition Height="125"/>
</Grid.RowDefinitions>
<Button ImageSource="homeuser24px"
BackgroundColor="#00AAA9"
BorderColor="White"
Opacity="1"
Text="Your Account"
TextTransform="Default"
BorderWidth="2"
CornerRadius="100"
TextColor="White"
FontSize="14"
Clicked="OnAccountClick"
Grid.Row="1" Grid.Column="1"
/>
<Button ImageSource="toolsadd24px"
BackgroundColor="#00AAA9"
BorderColor="White"
Opacity="1"
Text="Log a Repair"
TextTransform="Default"
BorderWidth="2"
CornerRadius="100"
TextColor="White"
FontSize="14"
Clicked="OnRepairRequestClick"
Grid.Row="1" Grid.Column="3"
/>
<Button ImageSource="toolsinfo24px"
BackgroundColor="#00AAA9"
BorderColor="White"
TextTransform="Default"
Opacity="1"
BorderWidth="2"
CornerRadius="100"
TextColor="White"
Text="Track a Repair"
FontSize="14"
Clicked="OnCheckRepairsClick"
Grid.Row="3" Grid.Column="1"
/>
<Button
Clicked="OnPersonalDetailsClick"
ImageSource="userinfo24px"
BackgroundColor="#00AAA9"
BorderColor="White"
TextTransform="Default"
Opacity="1"
BorderWidth="2"
CornerRadius="100"
TextColor="White"
Text="My Details"
FontSize="14"
Grid.Row="3" Grid.Column="3"
/>
</Grid>
</StackLayout>
</Grid>
</ScrollView>
</ContentView>
You need to use the DN function within the grid to adjust the grid height.
First, you define the grid on the outermost layer. The problem lies in Grid.Row="3".
Then you create another Grid in Grid.Row="3",But the height of Grid.Row="3" you define in the outer Grid is 260.Your internal view height exceeds it. Therefore, the view will be overwritten.
In general, you only need to increase the height of the external Grid.
<ScrollView>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
<RowDefinition Height="100"/>
<RowDefinition Height="15"/>
<RowDefinition Height="400"/>
<!--Change the bottom height to 400-->
</Grid.RowDefinitions>
....
</ScrollView>
I know I have already asked this question here: How to Center an image in each column inside one row in Xamarin?, but I didnt have access to an actual device that time, so I just run the emulator and it looks like this:
But now that I have a phone to run it, the page now looks like this:
This is my code for this page:
<StackLayout>
<RelativeLayout>
<Grid Margin="0,10,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="5*"/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" HorizontalOptions="CenterAndExpand">
<Image x:Name="ImgSrcMale"
HeightRequest="165"
Source="male"
WidthRequest="200"
Aspect="AspectFit"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand">
<Image.GestureRecognizers>
<TapGestureRecognizer x:Name="MaleClick"
NumberOfTapsRequired="1"
Tapped="MaleClick_Tapped"/>
</Image.GestureRecognizers>
</Image>
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="1" HorizontalOptions="CenterAndExpand">
<Image Source="female1"
WidthRequest ="200"
HeightRequest="165"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
Aspect="AspectFit"
x:Name="ImgSrcFemale">
<Image.GestureRecognizers>
<TapGestureRecognizer x:Name="FemaleClick"
NumberOfTapsRequired="1"
Tapped="FemaleClick_Tapped"/>
</Image.GestureRecognizers>
</Image>
</StackLayout>
</Grid>
<Grid Margin="0,178,0,0">
<ScrollView>
<StackLayout>
<Grid VerticalOptions="CenterAndExpand" Margin="20,0,20,0" RowSpacing="20">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Text="Gender"
FontSize="Title"
TextColor="WhiteSmoke"
HorizontalOptions="Center"
FontAttributes = "Bold"
Grid.Row="0"/>
<local:RoundedEntry x:Name="EntryUsername"
Placeholder="Username"
TextColor="WhiteSmoke"
PlaceholderColor="WhiteSmoke"
Grid.Row="1"/>
<local:RoundedEntry x:Name="EntryPassword"
Placeholder="Password"
IsPassword="True"
TextColor="WhiteSmoke"
PlaceholderColor="WhiteSmoke"
Grid.Row="2"/>
<local:RoundedEntry x:Name="EntryEmail"
Placeholder="Email"
Keyboard="Email"
TextColor="WhiteSmoke"
PlaceholderColor="WhiteSmoke"
Grid.Row="3"/>
<Button Text="Sign Up"
HorizontalOptions="CenterAndExpand"
TextColor="WhiteSmoke"
BackgroundColor="Coral"
WidthRequest="150"
Clicked="Button_Clicked"
CornerRadius="25"
FontAttributes = "Bold"
FontSize = "Large"
Grid.Row="4"/>
<Label x:Name="GenderLabel"
Text=""
TextColor="WhiteSmoke"
IsVisible="False"/>
</Grid>
</StackLayout>
</ScrollView>
</Grid>
</RelativeLayout>
</StackLayout>
You could easily create this layout with one grid. Remove the top-level StackLayout and RelativeLayout. You may want to put the whole grid inside a scrollview to allow the screen to move up with the keyboard.
I'd recommend a grid with two columns and six rows (the controls at the bottom will span both columns. Define the columns with width * (not sure why you had 5*). You don't need to wrap the images in anything, just place them in the grid directly.
I am making a page where there is a top title, an image in the middle and some text under it and then two buttons at the bottom for yes or no. As you can see the buttons are getting pushed down too much and getting cut off. I can't figure out how to move the text up a little or reduce the spacing between the image and the title and text. I know I probably could do this with absolute layouts but I am not sure how it would work with larger/smaller screens.
Here is my XAML for the image.
<ContentPage BackgroundColor="#FF233D">
<ContentPage.Content>
<StackLayout Padding="10,10,10,10">
<StackLayout VerticalOptions="Start">
<Label TextColor = "White" Text="You're having trouble sleeping." FontSize="Large" HorizontalTextAlignment="Center"></Label>
<Image Scale=".65" Source="bed" >
</Image>
</StackLayout>
<StackLayout VerticalOptions="CenterAndExpand">
<Label TextColor = "White" Text="When the kidneys aren't filtering properly, toxins stay in the blood rather than leaving the body through the urine. This can make it difficult to sleep. There is also a link between obesity and chronic kidney disease, and sleep apnea is more common in those with chronic kidney disease, compared with the general population." HorizontalTextAlignment="Center"></Label>
</StackLayout>
<StackLayout Orientation="Horizontal" VerticalOptions="EndAndExpand" >
<Button Text="Yes" Clicked="YesClicked" ClassId="1Yes" x:Name="Yes1" HorizontalOptions="FillAndExpand" BackgroundColor="#27ae60" TextColor="White" BorderRadius="0">
</Button>
<Button Text="No" Clicked="NoClicked" ClassId="1No" x:Name="No1" HorizontalOptions="FillAndExpand" BackgroundColor="#c0392b" TextColor="White" BorderRadius="0" >
</Button>
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Any help is much appreciated.
It will be easier if you use a Grid with 4 rows and two columns
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label TextColor = "White" Text="You're having trouble sleeping." FontSize="Large" HorizontalTextAlignment="Center" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" />
<Image Scale=".65" Source="bed" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" >
<Label TextColor = "White" Text="When the kidneys aren't filtering properly, toxins stay in the blood rather than leaving the body through the urine. This can make it difficult to sleep. There is also a link between obesity and chronic kidney disease, and sleep apnea is more common in those with chronic kidney disease, compared with the general population." HorizontalTextAlignment="Center" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"/>
<Button Text="Yes" Clicked="YesClicked" ClassId="1Yes" x:Name="Yes1" HorizontalOptions="FillAndExpand" BackgroundColor="#27ae60" TextColor="White" BorderRadius="0" Grid.Row="3" Grid.Column="1" />
<Button Text="No" Clicked="NoClicked" ClassId="1No" x:Name="No1" HorizontalOptions="FillAndExpand" BackgroundColor="#c0392b" TextColor="White" BorderRadius="0" Grid.Row="3" Grid.Column="0" />
Try to adjust rows Hheight and width if the result is different from your needs.
For more information about grids : Microsoft docs
I'm trying to add three button images on the same row inside a StackLayout.
The first button image doesn't show any error, but the problem is with two other buttons.
Here is the code:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1.5*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="auto"/>
<RowDefinition Height ="auto"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" HorizontalOptions="Center" VerticalOptions="Center">
<Image HorizontalOptions="Center" VerticalOptions="Center" Source="loginlogo.png"/>
</StackLayout>
<StackLayout Padding="5" Spacing="5" Grid.Row="1">
<StackLayout>
<Label Text ="editor is used for collecting text that is expected to take more than one line."
TextColor="Black" BackgroundColor="White" HeightRequest="100" />
</StackLayout>
<StackLayout HorizontalOptions="Center" VerticalOptions="Center"
Orientation="Horizontal">
<Button x:Name="facebook" WidthRequest="50" HeightRequest="50" Image="Fb.png">
<Button.Image Aspect="AspectFit" />
</Button>
<Button WidthRequest="50" HeightRequest="50" Image="LINKEDIN.png">
<Button.Image Aspect="AspectFit" />
</Button>
<Button x:Name="YB" WidthRequest="50" HeightRequest="50" Image="YOUTUBE.png">
<Button.Image Aspect="AspectFit" />
</Button>
</StackLayout>
</StackLayout>
<StackLayout Grid.Row="4" HorizontalOptions="Center" VerticalOptions="End" Orientation="Horizontal" Margin="1" >
<Label Text="sample text" TextColor="Gray" HorizontalOptions="Center" HorizontalTextAlignment="Center"/>
</StackLayout>
</Grid>
This is the exact error I receive:
Position 35:18. Can not set the content of Button as it doesn't have a
ContentPropertyAttribute
Position 35 is the third button named YB
I don't understand where the problem is.
Any advice will be helpful.
Thanks
Xamarin.Forms.Button.Image is an FileImageSource and thus there is no Aspect property to it. This abstract control is converted to a platform native one and full image control of how it appears within that button on each platform is not exposed.
But on Xamarin.Forms.Image there is an Aspect property.
If you need to control the aspect ratio, you could created a custom button renderer and handle it at the platform level, or just use a Xamarin.Forms.Image and set a tab gesture on them.
Hi Guys probably very easy question for Xamarin expert I am trying to vertically center align stacklayout control and it is working fine in android mobile but not working in windows mobile device. My code is below
<?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="aa.Views.MainPage">
<ScrollView>
<StackLayout Orientation="Vertical" VerticalOptions="CenterAndExpand"
Padding="20" Spacing="10">
<Entry x:Name="enEmail" Placeholder="Email"></Entry>
<Entry x:Name="enPassword" IsPassword="True" Placeholder="Password"></Entry>
<Button Text="Login" Clicked="OnClicked_btnLogin" x:Name="btnLogin"></Button>
<Button Text="Register" Clicked="OnClicked_btnRegister" x:Name="btnRegister"></Button>
</StackLayout>
</ScrollView>
</ContentPage>
For more details please have a look at the attached images and help me how would i align it in center of screen for windows phone
its StackLayout: puts views consecutive one another. If you want to move buttons to down side use Grid instead like:
<Grid RowSpacing="10"><!--RowSpacing gives some space between rows-->
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/> <!--You can also use constant size also-->
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/> <!--This fill the empty space-->
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Entry Grid.Row="0" Placeholder=" Email"/>
<Entry Grid.Row="1" Placeholder=" Password" IsPassword="True"/>
<Button Grid.Row="3" Text="Login" />
<Button Grid.Row="4" Text="Register" />
</Grid>
Try the code below, it will give you a scroll view plus your fields will be aligned to the center
<ScrollView>
<AbsoluteLayout>
<StackLayout Orientation="Vertical" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All" x:Name="maincontent" Spacing="0">
<StackLayout Orientation="Vertical" VerticalOptions="CenterAndExpand"
Padding="20" Spacing="10">
<Entry x:Name="enEmail" Placeholder="Email"></Entry>
<Entry x:Name="enPassword" IsPassword="True" Placeholder="Password"></Entry>
<Button Text="Login" Clicked="OnClicked_btnLogin" x:Name="btnLogin"></Button>
<Button Text="Register" Clicked="OnClicked_btnRegister" x:Name="btnRegister"></Button>
</StackLayout>
</StackLayout>
</AbsoluteLayout>
</ScrollView>