Grid Column Definition Alignment and Width - xaml

I'm trying to create a simple grid with 3 columns and a 6 rows.
I have defined the heights and width of the rows and columns
However, the entire grid always starts from the middle of the screen.
The entire left hand side of the screen is empty.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="60"/>
<RowDefinition Height="60"/>
<RowDefinition Height="60"/>
<RowDefinition Height="60"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="60"/>
</Grid.ColumnDefinitions>
<Label Text="Height: " FontSize="Medium" Grid.Row="1" Grid.Column="1" BackgroundColor="Blue"/>
<Entry x:Name="heightEntry" FontSize="Medium" Grid.Row="1" Grid.Column="2" BackgroundColor="Blue"/>
<Label Text=" cm" FontSize="Medium" Grid.Row="1" Grid.Column="3" BackgroundColor="Blue"/>
<Label Text="Width: " FontSize="Medium" Grid.Row="2" Grid.Column="1" BackgroundColor="Blue"/>
<Entry x:Name="widthEntry" FontSize="Medium" Grid.Row="2" Grid.Column="2" BackgroundColor="Blue"/>
<Label Text=" cm" FontSize="Medium" Grid.Row="2" Grid.Column="3" BackgroundColor="Blue"/>
<Label Text="Depth: " FontSize="Medium" Grid.Row="3" Grid.Column="1" BackgroundColor="Blue"/>
<Entry x:Name="depthEntry" FontSize="Medium" Grid.Row="3" Grid.Column="2" BackgroundColor="Blue"/>
<Label Text=" cm" FontSize="Medium" Grid.Row="3" Grid.Column="3" BackgroundColor="Blue"/>
<Label Text="Weight (Full): " FontSize="Medium" Grid.Row="4" Grid.Column="1" BackgroundColor="Blue"/>
<Entry x:Name="weightEntry" FontSize="Medium" Grid.Row="4" Grid.Column="2" BackgroundColor="Blue"/>
<Label Text=" g" FontSize="Medium" Grid.Row="4" Grid.Column="3" BackgroundColor="Blue"/>
<Label Text="CaseQty: " FontSize="Medium" Grid.Row="5" Grid.Column="1" BackgroundColor="Blue"/>
<Entry x:Name="qtyEntry" FontSize="Medium" Grid.Row="5" Grid.Column="2" BackgroundColor="Blue"/>
<Label Text="Box Count: " FontSize="Medium" Grid.Row="6" Grid.Column="1" BackgroundColor="Blue"/>
<Entry x:Name="boxEntry" FontSize="Medium" Grid.Row="6" Grid.Column="2" BackgroundColor="Blue"/>
</Grid>
I have tried changing horizontal options of individual elements, the grid itself and the stack layout that its embedded in.
Nothing changes.
I have also tried changing the widths themselves (column definition)
and the WidthRequests of the labels and entries.
Nothing changes.
I can't figure out what I'm doing wrong.
All I want is to have control over the width of each column
And to left-align each row.
How is this achieved?

For some reason, I have assumed 1-indexing for the grids and columns.
It's zero-indexed, which I should have expected.
The grid is left aligned. It's just that the above code doesn't put anything into the left column.

Related

xamarin forms - listview - picker - wont align with rows in listview

I have a listview inside a stacklayout...everything appears find on screen... apart from the picker which is about a cm out from the rest of the row...i have tried changing the height of the rows but to no avail...does anyone know why the picker... '0' isnt on the same horizontal alignment as the rest of the rows such as brandName, size and Price.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0">
<ListView x:Name="WineLV" IsVisible="True" VerticalOptions="FillAndExpand" HasUnevenRows="True" ItemsSource="{Binding WineL}" HeightRequest="50">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout BackgroundColor="Transparent" HorizontalOptions="StartAndExpand" Padding="5">
<Frame OutlineColor="Black" Padding="10" BackgroundColor="Transparent">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="16*"/>
<ColumnDefinition Width="35*"/>
<ColumnDefinition Width="15*"/>
<ColumnDefinition Width="15*"/>
<ColumnDefinition Width="19*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Text="{Binding Id}" VerticalOptions="End" IsVisible="False"/>
<controls:CircleImage Grid.Column="0" Grid.Row="0" HeightRequest="60" HorizontalOptions="CenterAndExpand" VerticalOptions="Center" Aspect="AspectFill" WidthRequest="66" Grid.RowSpan="2" Source="{Binding Img}"/>
<Label Grid.Column="1" Grid.Row="0" Text="{Binding BrandName}" VerticalOptions="Start" FontSize="Medium"/>
<Label Grid.Column="1" Grid.Row="1" Text="{Binding Grapes}" VerticalOptions="Start" FontSize="Medium"/>
<Label Grid.Column="2" Grid.Row="0" Text="{Binding Sizes}" VerticalOptions="Start" FontSize="Medium"/>
<Picker Grid.Column="3" Grid.Row="0" Title=" 0" x:Name="pPicker" HorizontalOptions="EndAndExpand" ItemsSource="{Binding ListQ}" ItemDisplayBinding="{Binding Value}" SelectedIndexChanged="QuantityC" SelectedItem ="{Binding Selected}"/>
<Label Grid.Column="4" Grid.Row="0" VerticalOptions="Start" HorizontalOptions="EndAndExpand" Text="{Binding Price, StringFormat='£{0:0.00}'}" FontSize="Medium"/>
</Grid>
</Frame>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
all the others have VerticalOptions="Start" - try changing them to Center, and possibly setting VerticalTextAlignment also

In a Grid with value of Auto I cannot see the contents of the Label

In the DataTemplate of a CollectionView I have a Grid, and inside it a Row to which I insert the Height value in Auto. I associate a Label with that Row, but it is not displayed, while if I insert an absolute value in the Row then the text is visible. How could I solve?
<CollectionView
RelativeLayout.YConstraint="{ConstraintExpression
Type=Constant,
Constant=140}"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,
Property=Width,
Factor=1}"
Margin="10,0">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical" ItemSpacing="9"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<yummy:PancakeView CornerRadius="5">
<RelativeLayout>
<Grid BackgroundColor="LightGray" RowSpacing="0.2">
<Grid.RowDefinitions>
<RowDefinition Height="1"/>
<RowDefinition Height="16"/>
<RowDefinition Height="16"/>
<RowDefinition Height="25"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="65"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<BoxView Grid.ColumnSpan="2" Grid.Row="0" BackgroundColor="{Binding ColoreUmore}"/>
<Image Grid.Row="1" Grid.RowSpan="3" Grid.Column="0" Margin="8" Source="{Binding Umore}" VerticalOptions="Start"/>
<Label Grid.Row="1" Grid.Column="1" Text="{Binding GiornoTrascritto}" FontSize="14" TextColor="Black" Opacity="0.7" />
<Label Grid.Row="2" Grid.Column="1" Text="{Binding Orario}" FontSize="14" TextColor="Black" Opacity="0.7" />
<Label Grid.Row="3" Grid.Column="1" Text="{Binding DescrizioneUmore}" FontSize="16" TextColor="{Binding ColoreUmore}" HorizontalTextAlignment="Start"/>
<FlexLayout
Grid.Row="4"
Margin="0,5,10,0"
Grid.Column="1"
BindableLayout.ItemsSource="{Binding IconDiaries}"
Wrap="Wrap"
JustifyContent="Start"
Direction="Row"
AlignItems="Start"
AlignContent="Start">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Grid Padding="0,2,3,0">
<Grid.RowDefinitions>
<RowDefinition Height="17"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="18"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<BoxView BackgroundColor="Black" Opacity="0.4" Grid.ColumnSpan="2" Grid.Row="0" CornerRadius="5" />
<Image Grid.Row="0" Grid.Column="0" Source="{Binding isSource}" Margin="3"/>
<Label Grid.Row="0" Grid.Column="1" Text="{Binding id}" TextColor="{Binding ColoreUmore}" FontSize="12" VerticalTextAlignment="Center" Margin="0,0,3,0"/>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
<BoxView Grid.Row="5" Grid.Column="1" CornerRadius="7" BackgroundColor="Black" Opacity="0.2" Margin="0,0,4,4"/>
THIS-----> <Label Grid.Row="5" Grid.Column="1" TextColor="White" FontSize="16" Text="{Binding Nota}" Margin="5,0,9,0" />
<Image Source="rightArrowB" Grid.Row="1" Grid.Column="1" HorizontalOptions="End" Margin="0,0,10,0" Rotation="90" Opacity="0.4"/>
<Button Grid.Row="1" Grid.Column="1" WidthRequest="70" HeightRequest="21" BackgroundColor="Transparent" Clicked="BtOperazioni"/>
</Grid>
<StackLayout
RelativeLayout.YConstraint="{ConstraintExpression
Type=Constant,
Constant=8}"
RelativeLayout.XConstraint="{ConstraintExpression
Type=Constant,
Constant=200}"
HeightRequest="72"
WidthRequest="90"
IsVisible="{Binding Edit}">
<Button Text="Modifica" BackgroundColor="Blue" Opacity="0.9" CornerRadius="5" TextColor="White" HeightRequest="37" />
<Button Text="Elimina" BackgroundColor="Blue" Opacity="0.9" CornerRadius="5" TextColor="White" Clicked="EliminaDiario" HeightRequest="37" />
</StackLayout>
</RelativeLayout>
</yummy:PancakeView>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>

get image to display on same row as text in a GRID

why does the below code have the picture and the labels on different rows...I want them all on the same row in different columns...so keeping the labels where they are in horizontal order ...and moving the image down to the same level
Desired:
Vodka
700ml
Image 13.99
current:
<Grid RowSpacing="25">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<CarouselView ItemsSource="{Binding OffersList}" PeekAreaInsets="20">
<CarouselView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal" ItemSpacing="10"/>
</CarouselView.ItemsLayout>
<CarouselView.ItemTemplate>
<DataTemplate>
<Frame CornerRadius="30" Margin="20" BackgroundColor="Black" HeightRequest="500">
<StackLayout>
<Image Grid.Column="1" Grid.Row="1" Source="{Binding Img}" WidthRequest="100" HeightRequest="100" Aspect="AspectFit" HorizontalOptions="Start"/>
<Label Grid.Column="2" Grid.Row="1" Text="{Binding Name}" WidthRequest="100" BackgroundColor="Red" FontSize="Title" HorizontalOptions="End"/>
<Label Grid.Column="2" Grid.Row="1" Text="{Binding Des}" WidthRequest="100" BackgroundColor="Blue" FontSize="Title" HorizontalOptions="End" />
<Label Grid.Column="2" Grid.Row="1" Text="{Binding FullPrice, StringFormat='£{0:0.00}'}" WidthRequest="100" BackgroundColor="Pink" FontSize="Title" HorizontalOptions="End"/>
</StackLayout>
</Frame>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
you are not actually using a Grid, you are using a StackLayout
<Grid>
<Grid.ColumnDefintions>
<ColumnDefintion Width="25*" />
<ColumnDefintion Width="25*" />
<ColumnDefintion Width="25*" />
<ColumnDefintion Width="25*" />
</Grid.ColumnDefintions>
<Image Grid.Column="0" Grid.Row="0" Source="{Binding Img}" WidthRequest="100" HeightRequest="100" Aspect="AspectFit" HorizontalOptions="Start"/>
<Label Grid.Column="1" Grid.Row="0" Text="{Binding Name}" WidthRequest="100" BackgroundColor="Red" FontSize="Title" HorizontalOptions="End"/>
<Label Grid.Column="2" Grid.Row="0" Text="{Binding Des}" WidthRequest="100" BackgroundColor="Blue" FontSize="Title" HorizontalOptions="End" />
<Label Grid.Column="3" Grid.Row="0" Text="{Binding FullPrice, StringFormat='£{0:0.00}'}" WidthRequest="100" BackgroundColor="Pink" FontSize="Title" HorizontalOptions="End"/>
</Grid>
If you want to achieve the layout you want above,you should move the Grid into your <CarouselView.ItemTemplate>,like:
<CarouselView.ItemTemplate>
<DataTemplate>
<Frame CornerRadius="30" Margin="20" BackgroundColor="Black" HeightRequest="500">
<StackLayout>
<Grid RowSpacing="25">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" Source="{Binding Img}" WidthRequest="100" Aspect="AspectFit" HorizontalOptions="Start" VerticalOptions="End"/>
<Label Grid.Column="1" Grid.Row="0" Text="{Binding Name}" WidthRequest="100" BackgroundColor="Red" FontSize="Title" HorizontalOptions="End" VerticalOptions="End"/>
<Label Grid.Column="1" Grid.Row="1" Text="{Binding Des}" WidthRequest="100" BackgroundColor="Blue" FontSize="Title" HorizontalOptions="End" VerticalOptions="End"/>
<Label Grid.Column="1" Grid.Row="2" Text="{Binding FullPrice, StringFormat='£{0:0.00}'}" WidthRequest="100" BackgroundColor="Pink" FontSize="Title" HorizontalOptions="End" VerticalOptions="End"/>
</Grid>
</StackLayout>
</Frame>
</DataTemplate>
</CarouselView.ItemTemplate>

Xamarin Editor Padding

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.

Set Label text to non-transparent

I have a grid with labels, each "Tile" has a transparent background color, however the text also appears to be transparent. Is there a way to remove the transparency from the label text?
My code:
<?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="LoyaltyWorx.GridMenu"
BackgroundImage="grid.jpg"
Title="Main Menu"
>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="2*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Label Text="Cards" TextColor="White" FontAttributes="Bold" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Row="0" Grid.Column="0" BackgroundColor="#1481BA" Opacity="0.5" x:Name="CardTile"/>
<Label Text="Transactions" TextColor="Black" FontAttributes="Bold" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Row="0" Grid.Column="1" BackgroundColor="#ede890" Opacity="0.5" x:Name="TransactionTile"/>
<Label Text="Promotions" TextColor="White" FontSize="30" FontAttributes="Bold" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Row="1" Grid.Column="0" BackgroundColor="#1481BA" Grid.ColumnSpan="2" Opacity="0.7" x:Name="PromoTile"/>
<Label Text="Settings" TextColor="Black" FontAttributes="Bold" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Row="2" Grid.Column="0" BackgroundColor="#ede890" Opacity="0.5" x:Name="SettingsTile" />
<Label Text="My Profile" TextColor="White" FontAttributes="Bold" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Row="2" Grid.Column="1" BackgroundColor="#1481BA" Opacity="0.5" x:Name="ProfileTile"/>
</Grid>
</ContentPage>
ScreenShot:
You need to add your label in StackLayout look like this :
<StackLayout Grid.Row="0" Grid.Column="0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" BackgroundColor="#1481BA" Opacity="0.5" >
<Label Text="Cards" TextColor="White" FontAttributes="Bold" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="Transparent" x:Name="CardTile"/>
</StackLayout>
You can also use Frame in place of StackLayout
On the labels, set the BackgroundColor property to 0.5 alpha (128 = 0x80) and keep Opacity at 1.0.
<Label ... BackgroundColor="#801481BA" Opacity="1.0" />