I have XF checkbox that displays with too much right padding. Here is what it looks like in iOS (BackgroundColor="Red" to highlight the padding issue).
How can I remove the right padding to match the padding on the left? Or is this even possible?
XAML
<StackLayout Grid.Row="2" Grid.Column="1"
Orientation="Horizontal">
<CheckBox IsChecked="{Binding HasEnd}"
Margin="0"
BackgroundColor="Red" />
<Label Style="{StaticResource FormLabel}"
Margin="0"
Text="Has Ending Date" />
</StackLayout>
There is 2 ways of doing this with workarounds.
1º
Overlapping the Label and the Checkbox with an Grid and give the Label the correct margin needed like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<CheckBox Grid.Row="0" Grid.Column="0" IsChecked="{Binding HasEnd}"
Margin="0"
BackgroundColor="Red" />
<Label Grid.Row="0" Grid.Column="0" Style="{StaticResource FormLabel}"
Margin="10,0,0,0" <- The Margin needed
Text="Has Ending Date" />
</Grid>
2º
Not a graceful one, but you can give negative Margin to the Label
<Label Style="{StaticResource FormLabel}"
Margin="-10,0,0,0"
Text="Has Ending Date" />
You can also try the Input Kit Nugget package if you want more controll over your inputs.
Related
enter image description hereI want to implement the xamarin essentials map, but with a floating search for the pins that will appear on this map. I'm using a grid to divide the grid's rows and thus use the first row for the map and the second to show a cardview related to the selected pin. I put the search control in row 0 so that it seems to float on the map.
I couldn't get the focus of the search control to work. I don't know if I'm implementing the InputTransparent property correctly.
Any ideas?
<Grid InputTransparent="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="140"/>
</Grid.RowDefinitions>
<maps:Map
x:Name="map"
Grid.Column="0"
Grid.Row="0"
Grid.RowSpan="2"
MapType="Street"
HasZoomEnabled="True"
IsShowingUser="True"
InputTransparent="False"
MoveToLastRegionOnLayoutChange="false"
>
</maps:Map>
<StackLayout Grid.Row="0" Grid.Column="0" InputTransparent="True">
<Frame
Margin="20,40,20,0"
Padding="0"
BorderColor="{StaticResource BlackColor}"
CornerRadius="8"
HeightRequest="35">
<Grid VerticalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="35" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="35" />
</Grid.ColumnDefinitions>
<Image
Grid.Row="0"
Grid.Column="0"
HeightRequest="20"
HorizontalOptions="Center"
Source="ic_search_bar"
VerticalOptions="Center"
WidthRequest="20" />
<controls:CustomEntry
x:Name="entrySearch"
Grid.Row="0"
Grid.Column="1"
FontSize="14"
HeightRequest="35"
HorizontalOptions="FillAndExpand"
HorizontalTextAlignment="Start"
Keyboard="Text"
Placeholder="¿Qué se te antoja hoy?"
PlaceholderColor="#979797"
ReturnCommand="{Binding SearchCommand}"
InputTransparent="False"
ReturnType="Search"
Text="{Binding SearchText}"
TextChanged="entrySearch_TextChanged"
VerticalOptions="FillAndExpand"
VerticalTextAlignment="Center" />
<Image
Grid.Row="0"
Grid.Column="2"
HeightRequest="15"
HorizontalOptions="Center"
Source="ic_clear_search.png"
VerticalOptions="Center"
WidthRequest="15">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ClearSearchCommand}" NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
</Grid>
</Frame>
</StackLayout>
</Grid>
I try to use the property in many parts of the code
From the docs on InputTransparent
true if neither the element nor its children should receive input and
should, instead, pass inputs to the elements that are visually behind
the current visual element
Your stackLayout is transparent so it’s children, including the Entry, are also transparent
You might be thinking InputTransparent does the opposite of what it actually does. True makes an area effectively invisible to touch; touch goes through it.
If you want an element to be touchable, it has to be "False". BUT all its ancestors must also NOT BLOCK touch.
If you really mean "True", but you have children you want to click on, do this:
<SomeLayoutNameHere InputTransparent="True" CascadeInputTransparent="False" ...>
That allows children to specify whether they can receive touch (InputTransparent=False), or are invisible to touch (=True).
"False" is the default.
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.
With a horizontal StackLayout, I want to display 3 labels equal width across the screen. I don't want to use a WidthRequest property, but, rather, I want each label to be the same size with the content centered in the "box". And I want the labels to resize according to the device they are running on. So 3 labels, equal width, no matter the device.
I know this can be done with a Grid (Width="Auto"), but is it possible with a horizontally aligned StackLayout?
I was thinking this would work...
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label Text="aaaa"
HorizontalOptions="FillAndExpand"
HorizontalTextAlignment="Center"
BackgroundColor="Blue" />
<Label Text="aaaaaaaaaaaa"
HorizontalOptions="FillAndExpand"
HorizontalTextAlignment="Center"
BackgroundColor="Green" />
<Label Text="aa"
HorizontalOptions="FillAndExpand"
HorizontalTextAlignment="Center"
BackgroundColor="Red" />
</StackLayout>
But it just resulted in this...
Cause: When you add labels in stackLayout ,stackLayout will not make the subviews fit the size.
Solution:
Put the labels in a Grid. Refer the following code.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="aaaa" BackgroundColor="Blue" />
<Label Grid.Row="0" Grid.Column="1" Text="aaaaaaaaaaaa" BackgroundColor="Green"/>
<Label Grid.Row="0" Grid.Column="2" Text="aa" BackgroundColor="Red" />
</Grid>
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