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>
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.
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.
I have this XAML:
<Grid BackgroundColor="Red">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" HorizontalOptions="Start">
<Label Text="X" />
</Grid>
<Grid Grid.Column="1" HorizontalOptions="EndAndExpand">
<Label Text="Y" HorizontalOptions="End" />
</Grid>
</Grid>
I wanted to see something like this with a red background from one side to another:
X Y
However what happens is this with a red background from one side to another:
X Y
Can someone give me advice on how I can achieve the effect I want and what might be going wrong? Note that the Label Text that's currently "Y" could actually be much longer and more than half of the width of the screen. Here I just used one character to simplify the question.
Set your main Grid to HorizontalOptions="FillAndExpand" and your columns to take up the full width with *.
Now, you don't need the extra wrapping Grids. You could use them, but it will complicate things. Then set the Labels to HorizontalOptions="Start" and End respectively.
<Grid BackgroundColor="Red" VerticalOptions="Center" HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Text="X" HorizontalOptions="Start"/>
<Label Grid.Column="1" Text="Y" HorizontalOptions="End" />
</Grid>
Resulting in:
I am trying to create a custom, material-style, card cell in my Xamarin Forms app. I have the appearance pretty much down, but I'm having problems with the image in it. I want it to touch the top and bottom edges, the left hand edge, and be a square sort of shape, while maintaining the aspect ratio. But right now, all I get is this small image that won't play ball:
(I've had to cover the company images with paint, but trust me that they're about that size).
Here's what I actually want (again, please excuse the paint job)
I'm using an image in a grid view, in the 1st column and spanning all 4 rows. I've tried all of the LayoutOptions, which I used to understand but now I'm second guessing myself. I've also tried putting the image in a StackLayout as I thought you can expand children of a Stacklayout, but still no dice. Here is my simplified Xaml right now:
<Frame CornerRadius="10"
Margin="10, 5"
IsClippedToBounds="True"
BackgroundColor="White">
<Grid BackgroundColor="White" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" Grid.RowSpan="4"
HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Image HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Aspect="AspectFill" Source="{Binding ImageSource}"/>
</StackLayout>
<Label Grid.Row="0" Grid.Column="1"
Text="{Binding Favourite.FavKindName}"
FontSize="{DynamicResource InfoLargerTextFontSize}"/>
<Image Grid.Row="1" Grid.Column="3" Grid.RowSpan="4" Source="Contact.png"
VerticalOptions="CenterAndExpand" >
<Image.GestureRecognizers>
<TapGestureRecognizer />
</Image.GestureRecognizers>
</Image>
</Grid>
</Frame>
What's more, you can probably tell I'm pretty clueless about the phone icon on the right. I want that to occupy the centre and be of a decent button size for the card cell.
I've spent hours trying to figure this out. What am I doing wrong?
Frame has a default Padding of 20. That's why you have those margins inside the frame.
<Frame Padding="0" // Here , set padding to 0, so you can fill all Frame space
CornerRadius="10"
Margin="10, 5"
IsClippedToBounds="True"
BackgroundColor="White">
I have code that displays two buttons at the bottom of my screen:
<Grid VerticalOptions="FillAndExpand" Padding="10" IsVisible="{Binding TwoBtnsVisible}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" BorderColor="#999999" VerticalOptions="FillAndExpand" Style="{StaticResource pointButton2}" Text="Don't Know" Command="{Binding NButtonClickedCommand}" />
<Button Grid.Column="1" BorderColor="#999999" VerticalOptions="FillAndExpand" Style="{StaticResource pointButton2}" Text="Easy" Command="{Binding YButtonClickedCommand}" />
</Grid>
The width of the buttons fills the screen with a small amount to spare on either side and in between.
I would like to set the width of the buttons but it seems to not be possible. Is there some way I could do this so that each button is still spaced out nicely but has a width of just 75?
The grid size will be based upon its parent container (that you did not include), so assuming you do not want to alter it, you can use ColumnSpan. With 6 Proportional(*) columns, and a button width of two columns, that works out to:
100% width / 6 columns * 2 buttons of 2 column width = 66% of total width and thus 16.5% padding on the sides of the buttons
<Grid VerticalOptions="FillAndExpand" Padding="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Grid.ColumnSpan="2" BackgroundColor="Red" BorderColor="#999999" VerticalOptions="FillAndExpand" Text="Don't Know" />
<Button Grid.Column="3" Grid.ColumnSpan="2" BackgroundColor="Red" BorderColor="#999999" VerticalOptions="FillAndExpand" Text="Easy" />
</Grid>
Try adding this two properties to each button.
It *should display them as you describe.
WidthRequest="75"
HorizontalOptions="Center"