Struggling to get the correct layout as per picture
As you case see you canI seem to struggle with columnspan and rowspan
Below is what I have done
<Grid
ColumnSpacing="10"
RowSpacing="10"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.ColumnSpan="4" Text="Title" BackgroundColor="Beige" HorizontalOptions="FillAndExpand"/>
<Label Grid.Row="1" Grid.Column="3" Text="Label1" HorizontalOptions="Start"/>
<Label Grid.Row="1" Grid.Column="4" Text="Label2"/>
<Label Grid.Row="2" Grid.Column="1" Text="Label3" HorizontalOptions="Start"/>
<Label Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="4" Text="Label4" BackgroundColor="Gainsboro"/>
</Grid>
Any ideas,corrections
You have made mistake in last two labels. the column should be 0, like
Grid.Column="0"
Try this:
<Grid
ColumnSpacing="10"
RowSpacing="10"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.ColumnSpan="5" Text="Title" BackgroundColor="Gray" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
<Label Grid.Row="1" Grid.Column="3" Text="Label1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
<Label Grid.Row="1" Grid.Column="4" Text="Label2" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
<Label Grid.Row="2" Grid.Column="0" Text="Label3" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
<Label Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="4" Text="Label4" BackgroundColor="Silver" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" LineBreakMode="WordWrap"/>
</Grid>
Related
When the Label moves to another line, the Grid shifts.
There is a grid with two Columns and two Rows. The left rows are connected. They should have a BoxView with an image, the BoxView creates a border effect. The Image must be centered inside the cell and inside the BoxView, which is also centered. In the right column of the top row, there should be a StackLayout with a Label. When two lines of text are placed in the Label, the left column is shifted from the top. I'm wondering if it's even possible to edit the right part of the grid without affecting the left in any way?
Screenshot
There is no such problem in the video, following the example of which I make.
https://youtu.be/tMdHE4UROFg?t=2631
<ContentPage.Content>
<Grid rainbow:DebugRainbow.ShowColors="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="80"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Margin="10" VerticalOptions="Start">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<BoxView Color="Red" HeightRequest="218" WidthRequest="153" HorizontalOptions="Center" VerticalOptions="Center" Grid.RowSpan="2"/>
<Image Source="book_casino" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" HeightRequest="198" WidthRequest="133" HorizontalOptions="Center" VerticalOptions="Center" Aspect="AspectFit"/>
<StackLayout Grid.Column="1">
<Label Text="AAAAAAAAAAAAAAAAAAA" FontSize="18" FontAttributes="Bold"/>
</StackLayout>
</Grid>
<Image Source="book_casino" Grid.Row="2"/>
</Grid>
</ContentPage.Content>
Just as Steve implied, if you want to remove the shift when label move to another line, you should set the VerticalOptions of the BoxView to Start.
Code Sample:
<BoxView
x:Name="BookBorderBoxView"
Grid.RowSpan="2"
HeightRequest="218"
HorizontalOptions="Center"
VerticalOptions="Start"
WidthRequest="153"
Color="Red" />
<Image Source="XamarinLogo"
Grid.Row="0"
Grid.Column="0"
Grid.RowSpan="2"
HeightRequest="220"
WidthRequest="133"
HorizontalOptions="Center"
VerticalOptions="Start"
Aspect="AspectFit"/>
<StackLayout Grid.Column="1">
<Label Text="AAAAAAAAAAAAAAAAAA"
FontSize="18"
FontAttributes="Bold"/>
</StackLayout>
So I dug into the truth, it turns out my problem was the empty bottom row of the grid.
<ContentPage.Content>
<Grid rainbow:DebugRainbow.ShowColors="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="80"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Margin="10" VerticalOptions="Start">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<BoxView Color="Red" HeightRequest="218" WidthRequest="153" HorizontalOptions="Center" VerticalOptions="Center" Grid.RowSpan="2"/>
<Image Source="book_casino" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" HeightRequest="198" WidthRequest="133" HorizontalOptions="Center" VerticalOptions="Center" Aspect="AspectFit"/>
<StackLayout Grid.Column="1">
<Label Text="AAAAAAAAAAAAAAAAAAA" FontSize="18" FontAttributes="Bold"/>
</StackLayout>
<Grid>
<StackLayout Grid.Column="1" Grid.Row="1">
<Label Text="aaaaa" FontSize="18" FontAttributes="Bold"/>
</StackLayout>
</Grid>
</Grid>
<Image Source="book_casino" Grid.Row="2"/>
</Grid>
</ContentPage.Content>
I am using grid to implement the navigation bar. I tried using to grid row and adjusted the rowspan of the center image to 2 but somehow I cant replicate what is in the image. Any help is much appreciated. Thanks in advance! Attached is the code for my navigation bar
Grid VerticalOptions="EndAndExpand"
BackgroundColor="Red"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.10}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.90}">
<Grid.RowDefinitions>
<RowDefinition Height="0.1*"/>
<RowDefinition Height="44"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source="navbar_background.png" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="11" Aspect="Fill" HorizontalOptions="FillAndExpand"/>
<components:ImageComponent SetSource="icon_home_default.png" Grid.Row="1" Grid.Column="1" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand">
<components:ImageComponent.GestureRecognizers>
<TapGestureRecognizer Tapped="HomeClicked"/>
</components:ImageComponent.GestureRecognizers>
</components:ImageComponent>
<components:ImageComponent x:Name="BranchFinderBtnDefualt" SetSource="icon_branchfinder_default.png" Grid.Row="0" Grid.Column="5" Grid.RowSpan="2" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" IsVisible="True">
<components:ImageComponent.GestureRecognizers>
<TapGestureRecognizer Tapped="BranchFinderClicked"/>
</components:ImageComponent.GestureRecognizers>
</components:ImageComponent>
<components:ImageComponent x:Name="BranchFinderBtnCurrentPage" SetSource="icon_branchfinder_currentpage.png" Grid.Row="0" Grid.Column="5" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" IsVisible="False">
<components:ImageComponent.GestureRecognizers>
<TapGestureRecognizer Tapped="BranchFinderClicked"/>
</components:ImageComponent.GestureRecognizers>
</components:ImageComponent>
</Grid>
You can further fine tune it , but this should help
<Grid Padding="0" Margin="0" ColumnSpacing="0" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="90*"/>
<RowDefinition Height="25"/>
<RowDefinition Height="10*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="1.35*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="5" BackgroundColor="White" HorizontalOptions="Fill" VerticalOptions="Fill">
<Label Text="My Page" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
</StackLayout>
<BoxView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="5" HorizontalOptions="FillAndExpand" VerticalOptions="Start" HeightRequest="3"
Color="LightGray"/>
<Image Grid.Row="2" Grid.Column="0" VerticalOptions="CenterAndExpand" Source="home"/>
<Image Grid.Row="2" Grid.Column="1" VerticalOptions="CenterAndExpand" Source="card"/>
<Image Grid.Row="2" Grid.Column="3" VerticalOptions="CenterAndExpand" Source="bag"/>
<Image Grid.Row="2" Grid.Column="4" VerticalOptions="CenterAndExpand" Source="inbox"/>
<Label Grid.Row="2" Grid.Column="0" VerticalOptions="EndAndExpand" Text="Home" HorizontalOptions="CenterAndExpand" Margin="0,2"/>
<Label Grid.Row="2" Grid.Column="1" VerticalOptions="EndAndExpand" Text="Cards" HorizontalOptions="CenterAndExpand" Margin="0,2"/>
<Label Grid.Row="2" Grid.Column="2" VerticalOptions="EndAndExpand" Text="Scan to Pay" HorizontalOptions="CenterAndExpand" Margin="0,2"/>
<Label Grid.Row="2" Grid.Column="3" VerticalOptions="EndAndExpand" Text="Shop" HorizontalOptions="CenterAndExpand" Margin="0,2"/>
<Label Grid.Row="2" Grid.Column="4" VerticalOptions="EndAndExpand" Text="Inbox" HorizontalOptions="CenterAndExpand" Margin="0,2"/>
<Frame Grid.Row="1" Grid.Column="2" Grid.RowSpan="2" VerticalOptions="Start" WidthRequest="60" HeightRequest="60" Padding="0" Margin="0,-5,0,0"
HasShadow="False" HorizontalOptions="Center" CornerRadius="30" BackgroundColor="LightBlue" BorderColor="White">
<Image Source="barcode" Margin="12"/>
</Frame>
</Grid>
I have to admit absolutelayout is the thing that does not get into my head.
Can you help?
I need to put an image on top of a frame -grid etc.. on few screen so I must find a solution that works.
This is what I want to achieve
This is what I have done used boxview (purple) supposed to be my img1.
MyXaml
<AbsoluteLayout>
<StackLayout Margin="20">
<BoxView Color="Purple" WidthRequest="40" HeightRequest="40"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"></BoxView>
<Frame
Padding="0"
BorderColor="Green"
CornerRadius="10">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<BoxView Grid.Row="0" Grid.Column="0" Margin="5" Color="Red"/>
<BoxView Grid.Row="0" Grid.Column="4" Margin="5" Color="GreenYellow"/>
</Grid>
<Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" HeightRequest="50" BackgroundColor="Coral" Margin="20,0,20,0"
TextColor="White" Text="Label 3" />
<!--other stuff down here -->
</Grid>
</Frame>
</StackLayout>
</AbsoluteLayout>
My Result (as you can see I get a long rectangle when all i want is the boxview in the middle like above). Can you help?
This should get you started (I mod'ed a demo of mine, so adjust accordingly):
<AbsoluteLayout x:Name="ViewControls" AbsoluteLayout.LayoutBounds="1,1,1,.50" AbsoluteLayout.LayoutFlags="All" BackgroundColor="#66000000" Margin="10,10,10,10">
<Frame CornerRadius="10" Margin="20,20,20,20" BackgroundColor="Black" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="1,1,1,1">
<Grid Margin="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Text="Left" BackgroundColor="White" HorizontalTextAlignment="Center" Grid.Column="0" />
<Label Text="Right" BackgroundColor="White" HorizontalTextAlignment="Center" Grid.Column="2" />
<Label Text="Across Page" BackgroundColor="White" HorizontalTextAlignment="Center" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" />
</Grid>
</Frame>
<Image Source="yt.png"
BackgroundColor="Transparent"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds=".5,0,50,50" />
</AbsoluteLayout>
I'm learning the below Xamarin code, I would like to make each image fulfills its cell. I already tried VerticalOptions="FillAndExpand".
But it doesn't work. How to solve it?
<Grid x:Name="initialpagelayout" VerticalOptions="StartAndExpand" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image VerticalOptions="FillAndExpand" BackgroundColor="Red" Grid.Row="0" Grid.Column="0" x:Name="MyIcon01"></Image>
<Image BackgroundColor="Blue" Grid.Row="0" Grid.Column="1" x:Name="MyIcon02"></Image>
<Image BackgroundColor="Green" Grid.Row="0" Grid.Column="2" x:Name="MyIcon03"></Image>
<Image BackgroundColor="Yellow" Grid.Row="1" Grid.Column="0" x:Name="MyIcon04"></Image>
<Image BackgroundColor="Pink" Grid.Row="1" Grid.Column="1" x:Name="MyIcon05"></Image>
<Image BackgroundColor="Red" Grid.Row="1" Grid.Column="2" x:Name="MyIcon06"></Image>
<Image Grid.Row="2" Grid.Column="0" x:Name="MyIcon07"></Image>
<Image Grid.Row="2" Grid.Column="1" x:Name="MyIcon08"></Image>
<Image Grid.Row="2" Grid.Column="2" x:Name="MyIcon09"></Image>
<Image Grid.Row="3" Grid.Column="0" x:Name="MyIcon10"></Image>
<Image Grid.Row="3" Grid.Column="1" x:Name="MyIcon11"></Image>
<Image Grid.Row="3" Grid.Column="2" x:Name="MyIcon12"></Image>
</Grid>
UPDATE1
I added Aspect="Fill" into each <Image>, and I get the below:
It works well but I notice there is a blank space above the first row, but I don't have any placeholder there,
<?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="Guru.Pwa.Mobile.Initial">
<ContentPage.Content>
<Grid x:Name="initialpagelayout" VerticalOptions="StartAndExpand" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Aspect="Fill" Grid.Row="0" Grid.Column="0" x:Name="MyIcon01"></Image>
<Image Aspect="Fill" Grid.Row="0" Grid.Column="1" x:Name="MyIcon02"></Image>
<Image Aspect="Fill" Grid.Row="0" Grid.Column="2" x:Name="MyIcon03"></Image>
<Image Aspect="Fill" Grid.Row="1" Grid.Column="0" x:Name="MyIcon04"></Image>
<Image Aspect="Fill" Grid.Row="1" Grid.Column="1" x:Name="MyIcon05"></Image>
<Image Aspect="Fill" Grid.Row="1" Grid.Column="2" x:Name="MyIcon06"></Image>
<Image Aspect="Fill" Grid.Row="2" Grid.Column="0" x:Name="MyIcon07"></Image>
<Image Aspect="Fill" Grid.Row="2" Grid.Column="1" x:Name="MyIcon08"></Image>
<Image Aspect="Fill" Grid.Row="2" Grid.Column="2" x:Name="MyIcon09"></Image>
<Image Aspect="Fill" Grid.Row="3" Grid.Column="0" x:Name="MyIcon10"></Image>
<Image Aspect="Fill" Grid.Row="3" Grid.Column="1" x:Name="MyIcon11"></Image>
<Image Aspect="Fill" Grid.Row="3" Grid.Column="2" x:Name="MyIcon12"></Image>
</Grid>
</ContentPage.Content>
</ContentPage>
How to remove it?
How to display a three column layout usingHome.xaml , the below is still displaying as single column, I have added teh row definition and column definition with in the <Grid></Grid>, Please advise
<?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="soccerapp.Home" BackgroundColor="White" Title="Home">
<ContentPage.Content>
<Grid Padding="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Text="Player1" BackgroundColor="#f4d144"/>
<Label Grid.Row="1" Text="Player2" BackgroundColor="#ed4edd"/>
<Label Grid.Row="2" Text="Player3" BackgroundColor="#44ce9e"/>
<Label Grid.Row="3" Text="Player4" BackgroundColor="#44ce9e"/>
<Label x:Name="HomeLabel" Text="Home Page is here" TextColor="White"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" FontSize="Medium"></Label>
</Grid>
</ContentPage.Content>
</ContentPage>
Please find the below screen shot ( grid displaying in single column, this is not I want )
....I would like to display the Grid as per below screenshot:
first, you have only defined two columns, not three. Second, you are placing all of your labels in the first column
<Grid Padding="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Use Grid.Column to specify column -->
<Label Grid.Row="0" Grid.Column="0" Text="Player1" BackgroundColor="#f4d144"/>
<Label Grid.Row="0" Grid.Column="1" Text="Player2" BackgroundColor="#ed4edd"/>
<Label Grid.Row="0" Grid.Column="2" Text="Player3" BackgroundColor="#44ce9e"/>
</Grid>