I have 4 buttons in the bottom part of the screen as menus and I had used grid to show 4 buttons with same width and height and will occupy the whole screen. I have these codes but the result is not they way i wanted. It is not occupying the whole screen. Please help me how can I achieve it. Thanks.
<AbsoluteLayout BackgroundColor="#BC3022" MinimumHeightRequest="20" Padding="0,10,10,10" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<BoxView Grid.Row="0" Grid.Column="0"/>
<StackLayout Grid.Row="0" Grid.Column="0" Padding="10,2,10,2">
<Image Source="home.png" WidthRequest="40" HeightRequest="25"/>
<Label Text="" TextColor="White" FontSize="15" HorizontalOptions="Center">Home</Label>
</StackLayout>
<BoxView Grid.Row="0" Grid.Column="1"/>
<StackLayout Grid.Row="0" Grid.Column="1" Padding="10,2,10,2">
<Image Source="jobs.png" WidthRequest="40" HeightRequest="25">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="OnJobsGestureTap" NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
<Label Text="" TextColor="White" FontSize="15" HorizontalOptions="Center">Jobs</Label>
</StackLayout>
<BoxView Grid.Row="0" Grid.Column="2"/>
<StackLayout Grid.Row="0" Grid.Column="2" Padding="10,2,10,2">
<Image Source="sync.png" WidthRequest="40" HeightRequest="25"/>
<Label Text="" TextColor="White" FontSize="15" HorizontalOptions="Center">Sync</Label>
</StackLayout>
<BoxView Grid.Row="0" Grid.Column="3"/>
<StackLayout Grid.Row="0" Grid.Column="3" Padding="10,2,10,2">
<Image Source="logout.png" WidthRequest="40" HeightRequest="25">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="OnLogoutGestureTap" NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
<Label Text="" TextColor="White" FontSize="15" HorizontalOptions="Center">Signout</Label>
</StackLayout>
</Grid>
</AbsoluteLayout>
This is how it looks:
Try to replace your code with below code:
<StackLayout BackgroundColor="#BC3022" MinimumHeightRequest="20" Padding="10,10,10,10" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25*" />
<ColumnDefinition Width="25*" />
<ColumnDefinition Width="25*" />
<ColumnDefinition Width="25*" />
</Grid.ColumnDefinitions>
<BoxView Grid.Row="0" Grid.Column="0"/>
<StackLayout Grid.Row="0" Grid.Column="0" Padding="10,2,10,2">
<Image Source="home.png" WidthRequest="40" HeightRequest="25"/>
<Label Text="" TextColor="White" FontSize="15" HorizontalOptions="Center">Home</Label>
</StackLayout>
<BoxView Grid.Row="0" Grid.Column="1"/>
<StackLayout Grid.Row="0" Grid.Column="1" Padding="10,2,10,2">
<Image Source="jobs.png" WidthRequest="40" HeightRequest="25">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="OnJobsGestureTap" NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
<Label Text="" TextColor="White" FontSize="15" HorizontalOptions="Center">Jobs</Label>
</StackLayout>
<BoxView Grid.Row="0" Grid.Column="2"/>
<StackLayout Grid.Row="0" Grid.Column="2" Padding="10,2,10,2">
<Image Source="sync.png" WidthRequest="40" HeightRequest="25"/>
<Label Text="" TextColor="White" FontSize="15" HorizontalOptions="Center">Sync</Label>
</StackLayout>
<BoxView Grid.Row="0" Grid.Column="3"/>
<StackLayout Grid.Row="0" Grid.Column="3" Padding="10,2,10,2">
<Image Source="logout.png" WidthRequest="40" HeightRequest="25">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="OnLogoutGestureTap" NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
<Label Text="" TextColor="White" FontSize="15" HorizontalOptions="Center">Signout</Label>
</StackLayout>
</Grid>
</StackLayout>
Related
Someone please help me out here!!
This image is inside a stacklayout, which is inside a scrollview. Thats basically it.
Watch this:
<Image BackgroundColor="Green" x:Name="img_mainPic"/>
Great, my picture is shown in its original size I guess, but left and right there a big green bars - empty space.
Lets add:
VerticalOptions="FillAndExpand"
We get:
Wtf is it doing?? Why are the green bars now at the bottom??
Ok, lets try to add:
Aspect="AspectFill"
Great, thats just so much better. Excatly what I wanted.
Ok but now for realsis:
How hard can it be to scale my image without giving it a fixed height? (because then it would work, but other pictures in others formats wont anymore...)
FULLCODE:
<?xml version="1.0" encoding="UTF-8" ?>
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
BackgroundColor="White"
xmlns:helpers="clr-namespace:Khaled.Helpers"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:abstractions="clr-namespace:Plugin.CrossPlatformTintedImage.Abstractions;assembly=Plugin.CrossPlatformTintedImage.Abstractions"
x:Class="Khaled.Views.Page_FullAd">
<NavigationPage.TitleView>
<Grid>
</Grid>
</NavigationPage.TitleView>
<ContentPage.Content>
<RefreshView IsRefreshing="False" x:Name="refreshview_view" Refreshing="RefreshView_Refreshing">
<ScrollView>
<StackLayout Spacing="0">
<Image Aspect="AspectFill" VerticalOptions="FillAndExpand" x:Name="img_mainPic"/>
<BoxView HeightRequest="1" BackgroundColor="{StaticResource LightGray}"/>
<Grid HeightRequest="50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Frame x:Name="frame_telephone" Padding="10" HasShadow="False">
<Image Source="btn_telephone" VerticalOptions="Center" HorizontalOptions="Center"/>
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="Tapped_Quicks"/>
</Frame.GestureRecognizers>
</Frame>
<Frame x:Name="frame_gps" Grid.Column="1" Padding="10" HasShadow="False">
<Image Source="btn_gps" VerticalOptions="Center" HorizontalOptions="Center"/>
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="Tapped_Quicks"/>
</Frame.GestureRecognizers>
</Frame>
<Frame x:Name="frame_mail" Margin="2" Grid.Column="2" Padding="10" HasShadow="False">
<Image Source="btn_mail" VerticalOptions="Center" HorizontalOptions="Center"/>
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="Tapped_Quicks"/>
</Frame.GestureRecognizers>
</Frame>
<Frame x:Name="frame_share" Grid.Column="3" Padding="10" HasShadow="False">
<Image Source="btn_share" VerticalOptions="Center" HorizontalOptions="Center"/>
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="Tapped_Quicks"/>
</Frame.GestureRecognizers>
</Frame>
<Frame CornerRadius="0" x:Name="frame_heart" Grid.Column="4" Padding="10" HasShadow="False">
<abstractions:TintedImage TintColor="Transparent"
VerticalOptions="Center"
HorizontalOptions="Center"
Source="img_fav"
x:Name="img_heart"/>
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="Tapped_Quicks"/>
</Frame.GestureRecognizers>
</Frame>
</Grid>
<BoxView HeightRequest="1" BackgroundColor="{StaticResource LightGray}"/>
<Grid ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Frame CornerRadius="0" Padding="5,10,5,5" x:Name="tab1" HasShadow="False" BackgroundColor="White">
<Label FontSize="13"
FontAttributes="Bold"
VerticalOptions="Center"
TextColor="{StaticResource TextBlack}"
HorizontalOptions="Center"
Text="{helpers:Translate DESCRIPTION}"/>
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="Tapped_tabs"/>
</Frame.GestureRecognizers>
</Frame>
<Frame CornerRadius="0" Padding="5" x:Name="tab2" HasShadow="False" BackgroundColor="{StaticResource TabGray}" Grid.Column="1">
<Label FontSize="13"
FontAttributes="Bold"
TextColor="{StaticResource TextBlack}"
VerticalOptions="Center"
HorizontalOptions="Center"
Text="{helpers:Translate ACTIONS}"/>
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="Tapped_tabs"/>
</Frame.GestureRecognizers>
</Frame>
<Frame CornerRadius="0" Padding="5" x:Name="tab3" HasShadow="False" BackgroundColor="{StaticResource TabGray}" Grid.Column="2" >
<Label FontSize="13"
FontAttributes="Bold"
TextColor="{StaticResource TextBlack}"
VerticalOptions="Center"
HorizontalOptions="Center"
Text="{helpers:Translate BOOKSLOT}"/>
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="Tapped_tabs"/>
</Frame.GestureRecognizers>
</Frame>
</Grid>
<!--changeable layouts-->
<StackLayout Margin="0,10,0,0" BackgroundColor="White" Padding="15" x:Name="layout1">
<Label TextColor="{StaticResource TextBlack}" x:Name="label_description"/>
<Grid Margin="0,30,0,0" RowSpacing="15" BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label x:Name="label_adresse"
VerticalOptions="Center"
FontSize="14"
Grid.Row="0" Grid.Column="1">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="Tapped_Quicks"/>
</Label.GestureRecognizers>
</Label>
<Label x:Name="label_hours"
VerticalOptions="Center"
FontSize="14"
Grid.Row="1" Grid.Column="1"/>
<Label x:Name="label_telephone"
VerticalOptions="Center"
FontSize="14"
Grid.Row="2" Grid.Column="1">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="Tapped_Quicks"/>
</Label.GestureRecognizers>
</Label>
<Label x:Name="label_email"
VerticalOptions="Center"
FontSize="14"
Grid.Row="3" Grid.Column="1">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="Tapped_Quicks"/>
</Label.GestureRecognizers>
</Label>
<Label x:Name="label_web"
VerticalOptions="Center"
FontSize="14"
Grid.Row="4" Grid.Column="1">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="Tapped_Quicks"/>
</Label.GestureRecognizers>
</Label>
<Image Source="btn_gps"
Grid.Row="0" Grid.Column="0"/>
<Image Source="btn_clock"
Grid.Row="1" Grid.Column="0"/>
<Image Source="btn_telephone"
Grid.Row="2" Grid.Column="0"/>
<Image Source="btn_mail"
Margin="3"
Grid.Row="3" Grid.Column="0"/>
<Image Source="btn_web"
Grid.Row="4" Grid.Column="0"/>
</Grid>
</StackLayout>
</StackLayout>
</ScrollView>
</RefreshView>
</ContentPage.Content>
</ContentPage>
To scale up the image to its container, you can use a frame and binding its height to the image height and then set Aspect="AspectFill".
Below is the XAMl code for your reference:
<ScrollView>
<StackLayout Spacing="0">
<Grid HorizontalOptions="Center" Margin="0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Frame Padding="0" Margin="0" HeightRequest="{Binding Source={x:Reference image}, Path=Height}" HasShadow="False" Grid.Row="0" Grid.Column="0" VerticalOptions="Start" >
<Image x:Name="image" Source="uk.png" Aspect="AspectFill" HeightRequest="70" />
</Frame>
</Grid>
</StackLayout>
</ScrollView>
Update:
You may need to set the HeightRequest="70" of the image.
I am developing one android application using xamarin android. I am designing one page using xaml. in my screen i have 5 images. it is basically a login screen. but here entry(textbox) is not focused and also button press is not working. if i remove some images and stacklayouts then it is working fine.
below is my xaml
<StackLayout>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="745"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackLayout Orientation="Horizontal" HorizontalOptions="Center" Spacing="10" Grid.Column="0" >
<Grid Grid.Column="0" ColumnSpacing="80" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="100"/>
<RowDefinition Height="250"/>
</Grid.RowDefinitions>
<Image Source="image1.png" Margin="0" Grid.Row="0" Grid.Column="0" HorizontalOptions="StartAndExpand" HeightRequest="100" WidthRequest="200" />
<Image Source="image3.png" Margin="0" Grid.Row="0" Grid.Column="1" HorizontalOptions="StartAndExpand" HeightRequest="100" WidthRequest="200" />
<Label x:Name="lblTitle" FontSize="22" TextColor="Blue" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
FontAttributes="Bold" VerticalOptions="Center"
HorizontalTextAlignment="Center" Text="Title goes here"/>
<Image Source="image3.png" Grid.Row="2" Grid.Column="0" HorizontalOptions="StartAndExpand" HeightRequest="500" WidthRequest="500" />
<StackLayout Grid.Row="2" Grid.Column="1" InputTransparent="False" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="40"/>
<RowDefinition Height="30"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Label FontSize="15" TextColor="Blue" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2"
FontAttributes="Bold" VerticalOptions="Center"
HorizontalTextAlignment="Start" Text="User Name"/>
<Frame BorderColor="DodgerBlue" CornerRadius="0" Padding="0" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2">
<Entry x:Name="txtUsername" FontFamily="{StaticResource UbuntuRegularFontFamily}" Placeholder="Enter Username" HorizontalOptions="FillAndExpand" Text="" FontSize="15"/>
</Frame>
<Label FontSize="15" TextColor="Blue" Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2"
FontAttributes="Bold" VerticalOptions="Center"
HorizontalTextAlignment="Start" Text="Password"/>
<Frame BorderColor="DodgerBlue" CornerRadius="0" Padding="0" Grid.Column="0" Grid.Row="3" Grid.ColumnSpan="2">
<Entry x:Name="txtPassword" FontFamily="{StaticResource UbuntuRegularFontFamily}" Placeholder="Enter Password" IsPassword="True" HorizontalOptions="FillAndExpand" Text="" FontSize="15"/>
</Frame>
<Button x:Name="btnlogin" Grid.Row="4" Grid.Column="0" Text="LOGIN" WidthRequest="100" HeightRequest="40" ></Button>
<Button x:Name="btnCancel" Grid.Row="4" Grid.Column="1" Text="CANCEL" WidthRequest="100" HeightRequest="40" ></Button>
</Grid>
</StackLayout>
</Grid>
</StackLayout>
<StackLayout Grid.Row="3" InputTransparent="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image Source="image4.png" Margin="0" Grid.Row="1" Grid.Column="0" HorizontalOptions="StartAndExpand" HeightRequest="400" WidthRequest="250" />
<Label FontSize="25" TextColor="Black" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"
FontAttributes="Bold" VerticalOptions="Center"
HorizontalTextAlignment="Center" Text="year "/>
<Label FontSize="25" TextColor="Black" Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="2"
FontAttributes="Bold" VerticalOptions="Center"
HorizontalTextAlignment="Center" Text="company name goes here"/>
</Grid>
</StackLayout>
<StackLayout Grid.RowSpan="1" Grid.Column="1" InputTransparent="True">
<Image Source="image5.png" Margin="0"
/>
</StackLayout>
</Grid >
</StackLayout>
but here entry(textbox) is not focused and also button press is not working. if i remove some images and stacklayouts then it is working fine.
I test you code, and find you put the following code in wrong place.
<StackLayout Grid.Row="3">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Image
Grid.Row="1"
Grid.Column="0"
Margin="0"
HeightRequest="400"
HorizontalOptions="StartAndExpand"
Source="check.png"
WidthRequest="250" />
<Label
Grid.Row="1"
Grid.Column="1"
FontAttributes="Bold"
FontSize="25"
HorizontalTextAlignment="Center"
Text="year "
TextColor="Black"
VerticalOptions="Center" />
<Label
Grid.Row="1"
Grid.Column="2"
FontAttributes="Bold"
FontSize="25"
HorizontalTextAlignment="Center"
Text="company name goes here"
TextColor="Black"
VerticalOptions="Center" />
</Grid>
</StackLayout>
You just define 3 RowDefinitions, but you use Grid.Row="3" above code.
<StackLayout
Grid.Column="0"
HorizontalOptions="Center"
Orientation="Horizontal"
Spacing="10">
<Grid
Grid.Column="0"
ColumnSpacing="80"
RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="100" />
<RowDefinition Height="250" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
please take a look the following code, I use my image source.
<StackLayout>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout
Grid.Column="0"
HorizontalOptions="Center"
Orientation="Horizontal"
Spacing="10">
<Grid
Grid.Column="0"
ColumnSpacing="80"
RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="100" />
<RowDefinition Height="250" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<Image
Grid.Row="0"
Grid.Column="0"
Margin="0"
HeightRequest="100"
HorizontalOptions="StartAndExpand"
Source="c1.png"
WidthRequest="200" />
<Image
Grid.Row="0"
Grid.Column="1"
Margin="0"
HeightRequest="100"
HorizontalOptions="StartAndExpand"
Source="c10.png"
WidthRequest="200" />
<Label
x:Name="lblTitle"
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2"
FontAttributes="Bold"
FontSize="22"
HorizontalTextAlignment="Center"
Text="Title goes here"
TextColor="Blue"
VerticalOptions="Center" />
<Image
Grid.Row="2"
Grid.Column="0"
HeightRequest="500"
HorizontalOptions="StartAndExpand"
Source="c11.png"
WidthRequest="500" />
<StackLayout
Grid.Row="2"
Grid.Column="1"
InputTransparent="False">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="40" />
<RowDefinition Height="30" />
<RowDefinition Height="40" />
<RowDefinition Height="40" />
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Label
Grid.Row="0"
Grid.Column="0"
Grid.ColumnSpan="2"
FontAttributes="Bold"
FontSize="15"
HorizontalTextAlignment="Start"
Text="User Name"
TextColor="Blue"
VerticalOptions="Center" />
<Frame
Grid.Row="1"
Grid.Column="0"
Grid.ColumnSpan="2"
Padding="0"
BorderColor="DodgerBlue"
CornerRadius="0">
<Entry
x:Name="txtUsername"
FontSize="15"
HorizontalOptions="FillAndExpand"
Placeholder="Enter Username"
Text="" />
</Frame>
<Label
Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="2"
FontAttributes="Bold"
FontSize="15"
HorizontalTextAlignment="Start"
Text="Password"
TextColor="Blue"
VerticalOptions="Center" />
<Frame
Grid.Row="3"
Grid.Column="0"
Grid.ColumnSpan="2"
Padding="0"
BorderColor="DodgerBlue"
CornerRadius="0">
<Entry
x:Name="txtPassword"
FontSize="15"
HorizontalOptions="FillAndExpand"
IsPassword="True"
Placeholder="Enter Password"
Text="" />
</Frame>
<Button
x:Name="btnlogin"
Grid.Row="4"
Grid.Column="0"
HeightRequest="40"
Text="LOGIN"
WidthRequest="100" />
<Button
x:Name="btnCancel"
Grid.Row="4"
Grid.Column="1"
HeightRequest="40"
Text="CANCEL"
WidthRequest="100" />
</Grid>
</StackLayout>
<StackLayout Grid.Row="3" InputTransparent="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image
Grid.Row="1"
Grid.Column="0"
Margin="0"
HeightRequest="400"
HorizontalOptions="StartAndExpand"
Source="check.png"
WidthRequest="250" />
<Label
Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="2"
FontAttributes="Bold"
FontSize="25"
HorizontalTextAlignment="Center"
Text="year "
TextColor="Black"
VerticalOptions="Center" />
<Label
Grid.Row="1"
Grid.Column="2"
Grid.ColumnSpan="2"
FontAttributes="Bold"
FontSize="25"
HorizontalTextAlignment="Center"
Text="company name goes here"
TextColor="Black"
VerticalOptions="Center" />
</Grid>
</StackLayout>
</Grid>
</StackLayout>
<StackLayout
Grid.RowSpan="1"
Grid.Column="1"
InputTransparent="True">
<Image Margin="0" Source="image5.png" />
</StackLayout>
</Grid>
</StackLayout>
Im' working on XAML view and I want to create simple view with left side bar and the content with Grid and inside grid I have some buttons, that I want to achieve is to fill all form
Code:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:App.ViewModels"
mc:Ignorable="d"
x:Class="App.Views.UserSelectionPage">
<ContentPage.Content>
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Vertical">
<StackLayout Orientation="Vertical" BackgroundColor="#093145" HorizontalOptions="Start" VerticalOptions="FillAndExpand" >
<Label Text="AppName"
Grid.Row="0"
Grid.Column="1"
HorizontalOptions="Center"
VerticalOptions="Center"
FontSize="Header"
TextColor="White"
Margin="15,0,10,15" />
</StackLayout>
<StackLayout Orientation="Vertical" VerticalOptions="End" BackgroundColor="#093145">
<Image Source="Assets/LargeTitle.scale-100.png"
Grid.Row="0"
Grid.Column="0"
HorizontalOptions="Center"
WidthRequest="90"
HeightRequest="90"
Margin="15,0,10,15"
VerticalOptions="Center"/>
</StackLayout>
</StackLayout>
<Grid BackgroundColor="AliceBlue">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--<BoxView Color="#505CA9" Grid.Row="0" Grid.ColumnSpan="3" />-->
<Button Text="Use username instead"
Command="{Binding ToggleNewUserCommand}"
Grid.Row="0"
Grid.Column="2"
VerticalOptions="Center"
HorizontalOptions="End"
BackgroundColor="Transparent"
FontSize="Title"
TextColor="White"
Margin="15,0,10,15"/>
<Button x:Name="userOne"
d:Text="GQ"
Text="{Binding UserSelectionList[0].Abbreviation}"
Command="{Binding ButtonSelectedCommand}"
CommandParameter="{x:Reference userOne}"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
BorderWidth="1"
FontSize="92"
CornerRadius="160"
HeightRequest="320"
WidthRequest="320"
Margin="0,40,0,40"
Grid.Row="1"
Grid.Column="0"
BackgroundColor="{Binding UserSelectionList[0].BackgroundColor}"
d:BackgroundColor="#093145"/>
<Button x:Name="userTwo"
d:Text="LR"
Text="{Binding UserSelectionList[1].Abbreviation}"
Command="{Binding ButtonSelectedCommand}"
CommandParameter="{x:Reference userTwo}"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
BorderWidth="1"
FontSize="92"
CornerRadius="160"
HeightRequest="320"
WidthRequest="320"
Margin="0,40,0,40"
Grid.Row="1"
Grid.Column="1"
BackgroundColor="{Binding UserSelectionList[1].BackgroundColor}"
d:BackgroundColor="#107896" />
<Button x:Name="userThree"
d:Text="AR"
Text="{Binding UserSelectionList[2].Abbreviation}"
Command="{Binding ButtonSelectedCommand}"
CommandParameter="{x:Reference userThree}"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
BorderWidth="1"
FontSize="92"
CornerRadius="160"
HeightRequest="320"
WidthRequest="320"
Margin="0,40,0,40"
Grid.Row="1"
Grid.Column="2"
BackgroundColor="{Binding UserSelectionList[2].BackgroundColor}"
d:BackgroundColor="#829356" />
<Button x:Name="userFour"
d:Text="RR"
Text="{Binding UserSelectionList[3].Abbreviation}"
Command="{Binding ButtonSelectedCommand}"
CommandParameter="{x:Reference userFour}"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
BorderWidth="1"
FontSize="92"
CornerRadius="160"
HeightRequest="320"
WidthRequest="320"
Grid.Row="2"
Grid.Column="0"
BackgroundColor="{Binding UserSelectionList[3].BackgroundColor}"
d:BackgroundColor="#EBC944" />
<Button x:Name="userFive"
d:Text="GQ"
Text="{Binding UserSelectionList[4].Abbreviation}"
Command="{Binding ButtonSelectedCommand}"
CommandParameter="{x:Reference userFive}"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
BorderWidth="1"
FontSize="92"
CornerRadius="160"
HeightRequest="320"
WidthRequest="320"
Grid.Row="2"
Grid.Column="1"
BackgroundColor="{Binding UserSelectionList[4].BackgroundColor}"
d:BackgroundColor="#F26D21" />
<Button x:Name="userSix"
d:Text="GQ"
Text="{Binding UserSelectionList[5].Abbreviation}"
CommandParameter="{x:Reference userSix}"
Command="{Binding ButtonSelectedCommand}"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
BorderWidth="1"
FontSize="92"
CornerRadius="160"
HeightRequest="320"
WidthRequest="320"
Grid.Row="2"
Grid.Column="2"
BackgroundColor="{Binding UserSelectionList[5].BackgroundColor}"
d:BackgroundColor="#C02F1D" />
</Grid>
</StackLayout>
</ContentPage.Content>
Problem is for some reason it has free space inclusive if I use FillAndExpand on main StackLayout
I read about that but people just say that I missing FillAndExpand, I think problem is because I use Orientation="Horizontal" into first StackLayout, but that is the way I found to merge side bar with gridview. How can I achieve this? Regards
Add HorizontalOptions to the Grid itself:
<Grid HorizontalOptions="FillAndExpand" BackgroundColor="AliceBlue">
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>
I have following ContentPage in Xamarin Forms. It has a grid. I have applied ColumnSpacing="0" RowSpacing="0" Padding="0" for grid. And I have applied Margin="0" for BoxView and Button. Still there is space between BoxView and Button.
What is the best way to avoid this unwanted spacing?
XAML
<Grid x:Name="controlGrid" ColumnSpacing="0" RowSpacing="0" Padding="0">
<Grid.RowDefinitions>
<RowDefinition Height="4*" />
<RowDefinition Height="4*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!--Row 1-->
<views:SKCanvasView PaintSurface="OnSecondPainting" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" >
</views:SKCanvasView>
<!--Row 2-->
<Grid x:Name="secondGrid" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" ColumnSpacing="0" RowSpacing="0" Padding="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<BoxView Grid.Row="0" Grid.Column="0" BackgroundColor="Red" HeightRequest="1" VerticalOptions="End" HorizontalOptions="FillAndExpand" Margin="0" />
<BoxView Grid.Row="0" Grid.Column="0" BackgroundColor="Green" HeightRequest="1" VerticalOptions="Start" HorizontalOptions="FillAndExpand" Margin="0"/>
<BoxView Grid.Row="0" Grid.Column="0" BackgroundColor="Blue" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End" Margin="0"/>
<BoxView Grid.Row="0" Grid.Column="0" BackgroundColor="Orange" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="Start" Margin="0"/>
<BoxView Grid.Row="0" Grid.Column="1" BackgroundColor="Crimson" HeightRequest="1" VerticalOptions="End" HorizontalOptions="FillAndExpand" Margin="0" />
<BoxView Grid.Row="0" Grid.Column="1" BackgroundColor="Cyan" HeightRequest="1" VerticalOptions="Start" HorizontalOptions="FillAndExpand" Margin="0"/>
<BoxView Grid.Row="0" Grid.Column="1" BackgroundColor="Blue" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End" Margin="0"/>
<BoxView Grid.Row="0" Grid.Column="1" BackgroundColor="Orange" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="Start" Margin="0"/>
<Button x:Name="ClickMe1" Text="ClickMe 1" Grid.Row="0" Grid.Column="0" Margin="0" />
<Button x:Name="ClickMe2" Text="ClickMe 2" Grid.Row="0" Grid.Column="1" Margin="0" />
</Grid>
</Grid>
Screenshot
Button has a default padding.So there will be space always when you try to align buttons together. Either you have to give -ve margin or else instead of button you have to use stacklayout/boxview with gesture for tap commands.
Check this:
<Grid x:Name="controlGrid" ColumnSpacing="0" RowSpacing="0" Padding="0">
<Grid.RowDefinitions>
<RowDefinition Height="4*" />
<RowDefinition Height="4*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!--Row 2-->
<Grid x:Name="secondGrid" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" ColumnSpacing="0" RowSpacing="0" Padding="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<BoxView Grid.Row="0" Grid.Column="0" BackgroundColor="Red" HeightRequest="1" VerticalOptions="End" HorizontalOptions="FillAndExpand" Margin="0" />
<BoxView Grid.Row="0" Grid.Column="0" BackgroundColor="Green" HeightRequest="1" VerticalOptions="Start" HorizontalOptions="FillAndExpand" Margin="0"/>
<BoxView Grid.Row="0" Grid.Column="0" BackgroundColor="Blue" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End" Margin="0"/>
<BoxView Grid.Row="0" Grid.Column="0" BackgroundColor="Orange" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="Start" Margin="0"/>
<BoxView Grid.Row="0" Grid.Column="1" BackgroundColor="Crimson" HeightRequest="1" VerticalOptions="End" HorizontalOptions="FillAndExpand" Margin="0" />
<BoxView Grid.Row="0" Grid.Column="1" BackgroundColor="Cyan" HeightRequest="1" VerticalOptions="Start" HorizontalOptions="FillAndExpand" Margin="0"/>
<BoxView Grid.Row="0" Grid.Column="1" BackgroundColor="Blue" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End" Margin="0"/>
<BoxView Grid.Row="0" Grid.Column="1" BackgroundColor="Orange" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="Start" Margin="0"/>
<StackLayout Grid.Row="0" Grid.Column="0" HorizontalOptions="FillAndExpand" Margin="1" VerticalOptions="FillAndExpand" BackgroundColor="Gray">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Button1Command}"/>
</StackLayout.GestureRecognizers>
<Label Text="Click Me1" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="1" HorizontalOptions="FillAndExpand" Margin="1" VerticalOptions="FillAndExpand" BackgroundColor="Gray">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Button1Command}"/>
</StackLayout.GestureRecognizers>
<Label Text="Click Me2" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/>
</StackLayout>
</Grid>
</Grid>