CODEWITHSUNDEEP
xamarin.forms
Nilesh Jha
Nilesh Jha

Reputation: 1636

Xamarin Forms Relative Layout trailing spaces

<ContentPage.Content>
    <StackLayout VerticalOptions="Start" HorizontalOptions="Fill">

  <RelativeLayout HeightRequest="100" BackgroundColor="Blue">

    <Image  x:Name="dishImageView" Aspect="AspectFit" BackgroundColor="Maroon" RelativeLayout.YConstraint="10" RelativeLayout.XConstraint="10" RelativeLayout.WidthConstraint="80" RelativeLayout.HeightConstraint="80" Source="pizza1.png" />
    <Label Text="Dominoz Pizza" 
           x:Name="pizzaTitle"
           RelativeLayout.YConstraint="10"
           RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
                                                              ElementName= dishImageView,
                                                                Constant=20,
        Property=Width,
        Factor=1}"/>


         <Label BackgroundColor="Lime" HeightRequest="60" Margin="0,0,20,0" MaxLines="2" LineBreakMode="WordWrap" Text="Dominoz Pixxa is great pizza.. come and eat pizza" 
           x:Name="pizzaDescription"
           RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
                                                              ElementName=pizzaTitle,
                                                               Constant=10,
           Property= Height, Factor=1}"
           RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
                                                              ElementName= dishImageView,
                                                                Constant=20,
        Property=Width,
        Factor=1}" 
               />


</RelativeLayout>  
</StackLayout>
</ContentPage.Content>

Basically I am from iOS background. There we use to have leading and trailing spaces. I am not able to see any trailing space option in Xamarin forms.... Can You Please help me how to set this... Here is the sample image what I am trying to implement.

Desired Output

And here is What I am able to get with above source code. Current Output

Upvotes: 1

Views: 240

Answers (2)

Nilesh Jha
Nilesh Jha

Reputation: 1636

And Here I achieved it Finally using Grid Concept.

<?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="UdemyFirst.PizzaPage">
    <StackLayout>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="100"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>  

            <Grid.RowDefinitions>
                <RowDefinition Height="100"/>  
            </Grid.RowDefinitions>

            <Image 
                BackgroundColor="Blue" 
                Grid.Row="0"
                Margin="10"
                Grid.Column="0"/>

            <StackLayout 
                BackgroundColor="Fuchsia"
                Grid.Row="0"
                Grid.Column="1">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>  

                    <Grid.RowDefinitions>
                        <RowDefinition Height="25*"/>  
                        <RowDefinition Height="50*"/> 
                        <RowDefinition Height="25*"/> 
                    </Grid.RowDefinitions>

                    <Label 
                        Text="Pizza"
                        BackgroundColor="Black"
                        Grid.Row="0"
                        Grid.Column="0"
                        TextColor="White"/>

                    <Label 
                        Text="Pizza is very bad. You should not eat Pizza. Pizza is very bad."
                        BackgroundColor="Red"
                        LineBreakMode="WordWrap"
                        MaxLines="2"
                        Grid.Row="1"
                        Grid.Column="0"
                        TextColor="White"/>

                    <Label 
                        Text="10$"
                        BackgroundColor="Green"
                        XAlign="End"
                        Grid.Row="2"
                        Grid.Column="0"
                        TextColor="White"/>
                </Grid>
            </StackLayout>
        </Grid>

    </StackLayout> 
</ContentPage>

Upvotes: 1

Tom
Tom

Reputation: 1749

There are a few blogs around advising to not use RelativeLayout, and use AbsoluteLayout and/or StackLayout instead, for performance reasons. I personally am not a fan of RelativeLayout and will try to use alternatives wherever possible. RelativeLayout is also not fun to play with, and the code can get messy quickly.

The layout you are trying to achieve can indeed be done using RelativeLayout, but I think it'll be much easier to use a series of StackLayouts. For example:

<StackLayout 
    HeightRequest="100" 
    BackgroundColor="Blue"
    Orientation="Horizontal">

    <!-- Image -->
    <Image  
        x:Name="dishImageView" 
        Aspect="AspectFit" 
        BackgroundColor="Maroon" 
        Source="pizza1.png" />

    <!-- Image/Item Description -->
    <StackLayout
        HorizontalOptions="FillAndExpand"
        Orientation="Vertical">
        <Label 
            Text="Dominoz Pizza" 
            x:Name="pizzaTitle"/>

        <Label 
            BackgroundColor="Lime" 
            HeightRequest="60" 
            Margin="0,0,20,0" 
            MaxLines="2" 
            LineBreakMode="WordWrap" 
            Text="Dominoz Pixxa is great pizza.. come and eat pizza" 
            x:Name="pizzaDescription"/>

        <!-- Add the price label here -->

    </StackLayout>

</StackLayout>

Upvotes: 1

Related Questions