How to setup Row/Column Definitions in Xamarin.Forms Xaml? - grid

I managed to setup rows and columns from the code but couldn't move this settings to xaml:
grid.RowDefinitions = new RowDefinitionCollection {
new RowDefinition { Height = new GridLength(1, GridUnitType.Star) }
};
grid.ColumnDefinitions = new ColumnDefinitionCollection {
new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) }
};
The following doesn't work:
<Grid x:Name="grid" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
...
</Grid>
From the documentation I managed to fetch only c# implementation

I also get the same behaviour (does not fill and expand) for a grid with a single cell (1 row / column, although I am not sure why we would ever need a grid with a single cell full size of screen), but it seems to work fine for a 2 x 2, 3 x 3 cell grid (have not tried others yet).
The Height="" and Width="" attributes are required in Xamarin Forms although I "think" they are not needed in WPF as the default assumes this is the case.
<ContentPage.Content>
<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" Text="1"></Button>
<Button Grid.Row="1" Grid.Column="1" Text="2"></Button>
</Grid>
</ContentPage.Content>

Here is a sample
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="Top Left" Grid.Row="0" Grid.Column="0" />
<Label Text="Top Right" Grid.Row="0" Grid.Column="1" />
<Label Text="Bottom Left" Grid.Row="1" Grid.Column="0" />
<Label Text="Bottom Right" Grid.Row="1" Grid.Column="1" />
</Grid>

Related

Adjust size of label to the wrapped text

trying to format 2 labels.
Labels should represent title and value.
They should have position on bottom right corner.
On tablet everything looks fine, but on phone when "value" need to be wrapped. The space where it could not fit the wrapped text on the first line still stay.
So on the end, the text formatting look strange. with empty space where text cannot fit.
In this case I can imagine that size of second label is adjust to the size of longest text on line...
<StackLayout Orientation="Horizontal" HorizontalOptions="End" VerticalOptions="End">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label
Grid.Column="0"
BackgroundColor="Bisque"
FontSize="Medium"
Text="Version of Co.:"
HorizontalOptions="EndAndExpand"/>
<Label
Grid.Column="1"
BackgroundColor="BlanchedAlmond"
HorizontalOptions="End"
HorizontalTextAlignment="Start"
FontSize="Medium"
Text="This is vereverevery longversiontitle."/>
</Grid>
</StackLayout>
When I will set up horizontalTextAlignment on the second label to "Start" result will look like this and I will have again strange empty space.
With short text which dont need to be wrap, whole layout looks fine as I want:
Update:
Expected behavior:
Just Add one more column to your grid,
and change the position of label to 1, 2 respectively.
<StackLayout Orientation="Horizontal" HorizontalOptions="End" VerticalOptions="End">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label
Grid.Column="1"
BackgroundColor="Bisque"
FontSize="Medium"
Text="Version of Co.:"
HorizontalOptions="EndAndExpand"/>
<Label
Grid.Column="2"
BackgroundColor="BlanchedAlmond"
HorizontalOptions="End"
HorizontalTextAlignment="Start"
FontSize="Medium"
Text="This is vereverevery longversiontitle."/>
</Grid>
</StackLayout>
Set the outer StackLayout's Orientation as Vertical.
Add the extra column to the Grid, and set the exact width value on it .
Set the Label's HorizontalTextAlignment as End.
Sample code
<StackLayout Orientation="Vertical" HorizontalOptions="End" VerticalOptions="End">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label
Grid.Column="1"
BackgroundColor="Bisque"
FontSize="Medium"
Text="Version of Co.:"
HorizontalOptions="EndAndExpand"
HorizontalTextAlignment="End"/>
<Label
Grid.Column="2"
BackgroundColor="BlanchedAlmond"
HorizontalOptions="End"
HorizontalTextAlignment="End"
FontSize="Medium"
Text="This is vereverevery longversiontitle."/>
</Grid>
</StackLayout>

Frame not taking the full height Xamarin forms

I have Xamarin page which has a grid with two rows and a column. In the first row/column I have a label and the second row/column I have a frame where it does not take the full height of the row. Could you help, please?
<controls:GradientColorStack
StartColor="#0cacee"
EndColor="#0574d8"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
GradientOreintation="Vertical">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="330" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Grid.Column="0"
Grid.Row="0"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Text="" />
<controls:CustomFrame
Grid.Row="1"
CornerRadius="30,30,0,0"
BackgroundColor="White"
HasShadow="True"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Margin="12,20,12,0" />
</Grid>
</controls:GradientColorStack>
There is default spacing in Row and Column .
Grid has properties to control spacing between rows and columns. The following properties are available for customizing the Grid:
ColumnSpacing – the amount of space between columns. The default value of this property is 6.
RowSpacing – the amount of space between rows. The default value of this property is 6.
Here you can set RowSpacing= "0" to get full height of the row.
<Grid BackgroundColor="Accent" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="330"/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label BackgroundColor="Wheat" Grid.Column="0"
Grid.Row="0"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Text="1111111111" />
<Frame
Grid.Row="1"
BackgroundColor="White"
HasShadow="True"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Margin="12,0,12,0" />
</Grid>
By the way Margin="12,20,12,0" also can affect the top space, if not necessary ,can set this : Margin="12,0,12,0"
Works fine with frames ?
<Frame
BackgroundColor="Red"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="370" />
</Grid.RowDefinitions>
<Label Grid.Column="0"
BackgroundColor="GREEN"
Grid.Row="0"
HorizontalOptions="FillAndExpand"
VerticalOptions="Start"
Text="LOL" />
<Frame
Grid.Row="1"
Grid.Column="0"
BackgroundColor="White"
HasShadow="True"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Margin="12,20,12,0">
<StackLayout>
<Label Text="Text" />
</StackLayout>
</Frame>
</Grid>
</Frame>

Xamarin Forms: Not able to create a corner radius for a two column layout

I'm trying to create a grid layout with a height of 8px with cornered radius horizontally as below snapshot.
: https://ibb.co/s1dkpnw
<Grid Margin="0,0,0,24" HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*">
</ColumnDefinition>
<ColumnDefinition Width="4*">
</ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="8">
</RowDefinition>
</Grid.RowDefinitions>
<Frame CornerRadius="8" Grid.Row="0" HorizontalOptions="FillAndExpand" HeightRequest="8">
<Label Grid.Row="0" Grid.Column="0" HeightRequest="8" HorizontalOptions="FillAndExpand" BackgroundColor="Lime"></Label>
<Label Grid.Row="0" Grid.Column="1" HeightRequest="8" HorizontalOptions="FillAndExpand" BackgroundColor="Blue"></Label>
</Frame>
</Grid>
I'm able to get the UI as in the below snapshot.
: https://ibb.co/7nLTgdL
I'm not able to get the UI displyed within the frame visible, although i'm getting a cornered radius for a two columned layout. It just shows a empty frame.
Please let me know how to design the XAML UI to get the UI as in the design snapshot.
Got the UI aligned by pushing the Grid within the frame control as below,
<Frame CornerRadius="8" Grid.Row="0" HorizontalOptions="FillAndExpand" HeightRequest="8">
<Grid HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6*">
</ColumnDefinition>
<ColumnDefinition Width="4*">
</ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="8">
</RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" HeightRequest="8" HorizontalOptions="FillAndExpand" BackgroundColor="Lime"></Label>
<Label Grid.Row="0" Grid.Column="1" HeightRequest="8" HorizontalOptions="FillAndExpand" BackgroundColor="Blue"></Label>
</Grid>
</Frame>
AbsoluteLayout can help you:
<AbsoluteLayout HorizontalOptions="Center">
<Frame
AbsoluteLayout.LayoutBounds="0,0,150,8"
AbsoluteLayout.LayoutFlags="None"
BackgroundColor="#0086C9"
CornerRadius="7" />
<Frame
AbsoluteLayout.LayoutBounds="120,0,150,8"
AbsoluteLayout.LayoutFlags="None"
BackgroundColor="#D8D8D8"
CornerRadius="7" />
<Frame
AbsoluteLayout.LayoutBounds="120,0,30,8"
AbsoluteLayout.LayoutFlags="None"
BackgroundColor="#0086C9"
CornerRadius="1" />
</AbsoluteLayout>
Output: https://i.ibb.co/jh6QmBL/ss.png

Windows Phone 8 - ASP.Net Master Page Equivalent

I'm new to Windows Phone 8 Development. I have developed ASP.NET websites before.
My pages (In WP8 Application) share the same headers and footers.
So what is the best method to implement a Master Page like in windows phone 8 ?
I've came across a few solutions that use Frame tag ; but they were not applicable.
Any help is highly appreciated.
PS: I'm using MVVM Light Toolkit
I came across this solution but it is a work around:
1- defining <ControlTemplatex:Key="Decorator" TargetType="ContentControl"> in App.xaml
2- in each page i want that template i just add <ContentControl Template="{StaticResource Decorator}">
Here is a little detailed sample:
App.xaml
<ControlTemplate x:Key="Decorator" TargetType="ContentControl">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="5*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid x:Name="HeaderPanel" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="4*" />
</Grid.ColumnDefinitions>
<Button x:Name="BackBtn" Grid.Column="0" />
<TextBlock Grid.Column="1" Text="{Binding Title}" />
</Grid>
<ContentPresenter Grid.Row="1" />
<Grid x:Name="BottomPanel" Grid.Row="2" Height="50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" />
<Button Grid.Column="1" />
<Button Grid.Column="2" />
<Button Grid.Column="3" />
</Grid>
</Grid>
</ControlTemplate>
Now in any xaml page i want to embed that content template i just add the following:
<ContentControl Template="{StaticResource Decorator}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="5*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Grid Title" />
<Grid x:Name="ContentGrid" Grid.Row="1">
</Grid>
</ContentControl>
Resource: http://www.codeproject.com/Articles/82464/How-to-Embed-Arbitrary-Content-in-a-WPF-Control

Windows Store App Button Click Event Not Firing with Grid Template

I created a project using the default Grid Template with VS2012, and added a button to the upper right hand corner and it is NOT clickable, and if I remove the GridView then it's clickable. Strange to me, could someone point out why this is the case
<Grid Style="{StaticResource LayoutRootStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
<TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}"/>
<Button
x:Name="SettingsButton"
Grid.Column="2"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Margin="0,0,120,0"
AutomationProperties.Name="Settings"
Content="Settings"
Click="SettingsButton_Click"
/>
</Grid>
<GridView .... />
</Grid>
Your GridView is being drawn on top of your button grid. Move the button grid declaration below the GridView.
<Grid Style="{StaticResource LayoutRootStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Move the GridView Here -->
<GridView .... />
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
<TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Grid.Column="1" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}"/>
<Button
x:Name="SettingsButton"
Grid.Column="2"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Margin="0,0,120,0"
AutomationProperties.Name="Settings"
Content="Settings"
Click="SettingsButton_Click"
/>
</Grid>
</Grid>

Resources