CODEWITHSUNDEEP
androidiosxamlxamarinxamarin.forms
Dario M.
Dario M.

Reputation: 425

xamarin forms stretch button all over the grid column

I would like to have to buttons side by side without a space.

I tryed it with a grid, but I couldn't find out how to do it.

This is my code:

                <StackLayout  HorizontalOptions="FillAndExpand" VerticalOptions="End" Spacing="0" >

                <Label Text="Hello " FontSize="Medium"/>
                <Label FontSize="Small">This sould be a text?</Label>
                <BoxView HeightRequest="1" BackgroundColor="#6fcd11" HorizontalOptions="FillAndExpand" />
                <Grid Padding="0" ColumnSpacing="0" RowSpacing="0" BackgroundColor="Aqua" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"></RowDefinition>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions >
                        <ColumnDefinition Width="*"></ColumnDefinition>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                    </Grid.ColumnDefinitions>

                    <Button Grid.Row="0" Grid.Column="0" Text="Ja"></Button>
                    <Button Grid.Row="0" Grid.Column="1" Text="Nein"></Button>

                </Grid>

            </StackLayout>

Thanks for any help.

UPDATE:

The result is like this but, but I would like to fill it up that the blue background is not visible. I would like remove the space between this two buttons.

enter image description here

Upvotes: 1

Views: 3842

Answers (4)

Dario M.
Dario M.

Reputation: 425

The padding an margin of the grid should be set to 0, then it works great...

Upvotes: 1

Hitesh Patil
Hitesh Patil

Reputation: 380

You can also solve it by making margin parameter minus,

Try this,

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:local="clr-namespace:VideoApp"
         x:Class="VideoApp.CallHistoryPage">
<StackLayout VerticalOptions="End" Spacing="0" Padding="0">

    <Label Text="Hello " FontSize="Medium"/>
    <Label FontSize="Small">This sould be a text?</Label>
    <BoxView HeightRequest="1" BackgroundColor="#6fcd11" 
 HorizontalOptions="FillAndExpand" />
    <Grid Padding="0" ColumnSpacing="0" RowSpacing="0" 
BackgroundColor="Aqua">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions >
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <Button Grid.Row="0" Grid.Column="0" Margin="-5,-7,-5,-6" Text="Ja">
</Button>
        <Button Grid.Row="0" Grid.Column="1" Margin="-5,-7,-5,-6" 
Text="Nein"></Button>

      </Grid>

   </StackLayout>
</ContentPage>

Output:

Landscape Mode:

enter image description here

Upvotes: 1

Csharpest
Csharpest

Reputation: 1268

This might be due to the actual underlying button that you are rendering. There are 2 Buttons in Android right now, that you can inherit from, in your CustomRenderer:

public class YourButton_Droid : Xamarin.Forms.Platform.Android.AppCompat.ButtonRenderer 

public class YourButton_Droid : Xamarin.Forms.Platform.Android.ButtonRenderer

I guess right now, your app is rendering the AppCompat.ButtonRenderer. It has a built in shadow, which creates the margin in your case. Using the Android.ButtonRenderer will make you lose your Material Design (touch response, shadow etc.) on your button, but the margin might as well be gone.

If you dig deep into the android button world, you might use the AppCompat one as well, removing the margin through your custom renderer code.

Good Luck!

Upvotes: 0

Radhey.g
Radhey.g

Reputation: 37

By Coding you can do something like this.

new StackLayout
    {
        Spacing = 0,
        Orientation = StackOrientation.Horizontal,
        Children = 
        {
            new Button
            {
                Text = "Ja",
            },
            new Button
            {
                Text = "Nein",

            },

        }
    }

Upvotes: 1

Related Questions