I'm trying to make the grid cells exactly 50% of the width, which works fine. However, I want the buttons to be 50% within the cell and not expand to the size of the cell.
Xaml below, how to I modify the Button to be 50% width of the cell it is in.
<Grid Padding="10,10,10,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" Text="Back" Command="" BackgroundColor="Red" TextColor="White" ></Button>
<Button Grid.Row="0" Grid.Column="1" Text="Done" Command="" BackgroundColor="Green" TextColor="White"></Button>
</Grid>
how to I modify the Button to be 50% width of the cell it is in.
You can put the Button into the StackLayout so that the width of the Button is half the width of the GridCell.
Solution code:
<Grid Padding="10,10,10,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*"></ColumnDefinition>
<ColumnDefinition Width="50*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" HorizontalOptions="Center">
<Button Text="Back" Command="{Binding .}" BackgroundColor="Red" TextColor="White" ></Button>
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="1" HorizontalOptions="Center">
<Button Text="Done" Command="{Binding .}" BackgroundColor="Green" TextColor="White"></Button>
</StackLayout>
</Grid>
Related
I have a situation where I need to "overlay" a grouped set of information, presented by way of a Card (inplemented as a ContentView) on top of a portion of the page header, which is defined in a Grid inside of a FlexLayout. The output should resemble something like the following where the header is the portion in red:
The code for the header is as follows:
<!-- Header -->
<FlexLayout
HeightRequest="108"
AlignItems="Center"
Direction="Column"
BackgroundColor="#D92732">
<Grid VerticalOptions="Center" Margin="0, 30, 0, 0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"></ColumnDefinition>
<ColumnDefinition Width="40*"></ColumnDefinition>
<ColumnDefinition Width="80*"></ColumnDefinition>
<ColumnDefinition Width="300*"></ColumnDefinition>
<ColumnDefinition Width="80*"></ColumnDefinition>
<ColumnDefinition Width="40*"></ColumnDefinition>
<ColumnDefinition Width="20"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ImageButton Source="Bell.png" Grid.Column="1" BackgroundColor="Transparent"
WidthRequest="37"
HeightRequest="40"
Aspect="AspectFit">
</ImageButton>
<Label
Grid.Column="3"
Text="Payments"
TextColor="#F9F8FA"
FontSize="20"
HeightRequest="40"
HorizontalOptions="Center"
VerticalOptions="Center" VerticalTextAlignment="End">
</Label>
<ImageButton Source="Bell.png" Grid.Column="5" BackgroundColor="Transparent"
WidthRequest="37"
HeightRequest="40"
Aspect="AspectFit">
</ImageButton>
</Grid>
</FlexLayout>
The method I used to solve the problem of having a visual element overlay a portion of another visual element, in this case a Grid overlay a portion of another Grid, is to set the position of the overlay Grid to a specific row and column of the first Grid and then set the Bottom value of the overlay Grid's Margin to a negative number that represents the desired height of the overlay Grid, as seen in the following code and screenshot. Note that I enclosed the overlaid Grid in a Frame which is where I set the negative Bottom Margin value.
<Frame Grid.Row="2" Grid.ColumnSpan="3" Grid.Column="0"
Margin="16,30,16,-310" WidthRequest="343" HeightRequest="300">
<StackLayout HeightRequest="350">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="44*" />
<RowDefinition Height="38*" />
<RowDefinition Height="40*" />
<RowDefinition Height="20*" />
<RowDefinition Height="96*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0"
FontFamily="{StaticResource HNMedium}"
FontSize="{StaticResource Font20}"
HorizontalOptions="Start"
Text="Verify Account"
TextColor="{StaticResource NGIC_DarkGray}"
VerticalOptions="Start" />
<Label Grid.Row="1"
Text="Enter the verification code sent to ******8998"
FontSize="{StaticResource Font16}"
TextColor="{StaticResource NGIC_DarkGrayishBlue}"
FontFamily="{StaticResource HNRegular}"/>
<Entry Grid.Row="2" TextColor="Black" />
<Label Grid.Row="3"
Text="Send a new code"
TextColor="{StaticResource NGIC_Red}"
FontSize="{StaticResource Font14}"
FontFamily="{StaticResource HNMedium}"/>
<StackLayout Grid.Row="4" >
<Button Text="Next"
TextColor="{StaticResource White}"
BackgroundColor="{StaticResource NGIC_Red}"
CornerRadius="15"
WidthRequest="300"
HeightRequest="40"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
FontFamily="{StaticResource HNBold}"
FontSize="{StaticResource Font14}"/>
<Button Text="Cancel"
TextColor="{StaticResource NGIC_Red}"
BackgroundColor="{StaticResource White}"
CornerRadius="15"
WidthRequest="300"
HeightRequest="40"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
FontFamily="{StaticResource HNRegular}"
FontSize="{StaticResource Font14}"
BorderColor="{StaticResource NGIC_Red}"
BorderWidth="1"/>
</StackLayout>
</Grid>
</StackLayout>
</Frame>
In my xaml I'm trying to put padding between my background and my labels/editor and datepicker, but I can't get it right. I've attempted putting the grid inside a grid and put padding or margin on that one. I've tried putting the labels/editors inside a grid/stacklayout, I've even tried negative padding and margin on them.
This is how it looks like without the padding
https://gyazo.com/3809306e3b5a27a5f10058bbc17c295a
But whenever I try to add padding or margin anywhere the editors gets too small and gets clipped on the inside like this:
https://gyazo.com/46f25b9c44e1717bf1fa124eb2b10068
This is how I want it to look like, but I can't get rid of that damn clipping on the editors, why does the editors get clipped but not the label?
I've tried setting margin 0 and padding 0 on the editors specifically, didn't help either.
<!-- Bottom Command Bar -->
<Grid Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="8" BackgroundColor="LightGray" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Padding="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="1.5*"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" BackgroundColor="White" Text="{Binding QuoteNumber}" TextColor="Black" VerticalOptions="Fill" HorizontalOptions="Fill" />
<Editor Grid.Row="0" Grid.Column="1" BackgroundColor="White" Placeholder="PO Number" TextColor="Black" Text="{Binding PoNumber}" VerticalOptions="Fill" HorizontalOptions="Fill" />
<Editor Grid.Row="0" Grid.Column="2" BackgroundColor="White" Placeholder="Drop Date" TextColor="Black" Text="{Binding DropDate}" VerticalOptions="Fill" HorizontalOptions="Fill" />
<DatePicker Grid.Row="0" Grid.Column="2" MinimumDate="{Binding MinimumDate}" MaximumDate="{Binding MaximumDate}" Date="{Binding DropDate}" BackgroundColor="{StaticResource ThemeBkColor}" TextColor="White"/>
<Editor Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" BackgroundColor="White" Placeholder="Comment" TextColor="Black" Text="{Binding Comment}" VerticalOptions="Fill" HorizontalOptions="Fill"/>
<Label Grid.Row="0" Grid.Column="3" VerticalOptions="Center" HorizontalOptions="Center" FontSize="32" Text="{Binding TotalOrderValue, StringFormat='{0:C2}'}"/>
<Button Grid.Row="1" Grid.Column="3" Margin="10,0,10,2" VerticalOptions="Fill" HorizontalOptions="Fill" Text="SUBMIT PART ORDER" Command="{Binding SubmitJourneyCommand}" BackgroundColor="{StaticResource ThemeBkColor}" TextColor="White" />
</Grid>
Within your Change the value from * to AUTO
From there you can use 'padding' or 'margin' on either the main Grid control or the individual Row elements and controls within them.
Trying to make a button that will overlay on top of a grid in xaml
<Frame Grid.Row="0" CornerRadius="15" Padding="15">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Text="**************3454" HorizontalOptions="Start" TextColor="Black" VerticalOptions="Center"/>
<Label Grid.Column="1" Text="Verify" HorizontalOptions="End" TextColor="#A1A0E1" VerticalOptions="Center"/>
</Grid>
</Frame>
<Button Grid.Row="0" HorizontalOptions="Fill" VerticalOptions="Fill" BackgroundColor="Red" Command="{Binding VerifyCommand}"/>
However, it ends up looking like this:
underlayed button
Any thoughts on how to make the button go on top?
Place everything inside the Grid and use a Grid.ColumnSpan of 2 on your Frame and Button and of course set your Button's background to Transparent:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Frame Grid.ColumnSpan="2" CornerRadius="15" Padding="15" BorderColor="White"/>
<Label Grid.Column="0" Text="**************3454" HorizontalOptions="Start" TextColor="Black" VerticalOptions="Center"/>
<Label Grid.Column="1" Text="Verify" HorizontalOptions="End" TextColor="#A1A0E1" VerticalOptions="Center"/>
<Button Grid.ColumnSpan="2" HorizontalOptions="Fill" VerticalOptions="Fill" BackgroundColor="Transparent" Command="{Binding VerifyCommand}"/>
</Grid>
I want to create two buttons in the bottom of the screen using Xamarin.Forms and XAML like the image below:
I've tried to use a GridView but it's getting padding and space from two buttons.
This is how I've tried so far:
<Grid RowSpacing="0"
ColumnSpacing="0"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="50*"/>
</Grid.ColumnDefinitions>
<Button Grid.Row="1" Grid.Column="0"
Text="SignUp"
FontSize="Large"/>
<Button Grid.Row="1" Grid.Column="1"
Text="LogIn"
FontSize="Large"/>
</Grid>
Try setting the Padding and Margin properties on the Gridview and Padding on the Buttons to 0. IE,
<GridView Padding="0" Margin="0" ... >
...
<Button Margin="0" ... />
I believe that buttons will not provide the desired design, once it has an inner padding, rounded corners and a mandatory uppercase on text (On Android, at least) that you can't change.
Maybe using expanded labels and gesture Recognizers give you a better fit.
Try this:
<Grid ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<Label Grid.Column="0" Grid.Row="0"
Text="Signup"
TextColor="White"
FontSize="22"
BackgroundColor="Red"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding SignupCommand}"/>
</Label.GestureRecognizers>
</Label>
<Label Grid.Column="1" Grid.Row="0"
Text="Login"
TextColor="White"
FontSize="22"
BackgroundColor="Green"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding LoginCommand}"/>
</Label.GestureRecognizers>
</Label>
</Grid>
I am working on images in grid layout and i have problem with empty space below and above images. I would like these rows with dates to be exactly below icons without any empty space and to make icons with size just like they are on picture. When i use aspect fit, it makes icons streched vertically. I tried to set fixed size of row but it made a crap view when I rotaded phone.
<Grid
RowSpacing="0"
VerticalOptions="Center"
>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Source="kafelek_1.png"
Grid.Column="0" Grid.Row="0"
></Image>
<Image Source="kafelek_2.png"
Grid.Column="1" Grid.Row="0"
></Image>
<Image Source="kafelek_3.png"
Grid.Column="2" Grid.Row="0"
></Image>
<StackLayout BackgroundColor="#0078B7"
Grid.Column="0" Grid.Row="1"
Orientation="Horizontal"
HeightRequest="20"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Image Source="trojkat.png">
</Image>
<Label Text="Temp"
x:Name="DecisionDateLabel"></Label>
</StackLayout>
<StackLayout BackgroundColor="#0078B7"
Grid.Column="1" Grid.Row="1"
Orientation="Horizontal"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Image Source="trojkat.png"></Image>
<Label Text="Temp"
x:Name="KnowledgeDateLabel"></Label>
</StackLayout>
<StackLayout BackgroundColor="#0078B7"
Grid.Column="2" Grid.Row="1"
Orientation="Horizontal"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Image Source="trojkat.png"></Image>
<Label Text="Temp"
x:Name="PollsDateLabel"></Label>
</StackLayout>
</Grid>
Generally, this is what i would like to obtain:
This bug is created in bugzilla https://bugzilla.xamarin.com/show_bug.cgi?id=55294
You can actually try to implement workaround How can I make an image auto-resize so the width is 100% and the height adjusted accordingly?