Getting a grid of buttons without the spacing in between.

What do I need to do to avoid the default spacing between two buttons? I have tried setting padding to 0, BorderWidth etc. I am using Grid like this:

  in ctor: 

        InitializeComponent();
        var grid = new Grid
        {

            RowSpacing = 0,
            ColumnSpacing = 1,
            HorizontalOptions = LayoutOptions.CenterAndExpand,
            Padding = 0,
            RowDefinitions =
            {
                new RowDefinition { Height = new GridLength(100, GridUnitType.Auto) },
                   .... 9 more

            },
            ColumnDefinitions =
            {
                new ColumnDefinition{ Width = new GridLength(100, GridUnitType.Auto) },
                .... 9 more                }

        };


        const int numCols = 10;
        const int numRows = 10;
        for (int i = 0; i < numCols; i++)
            for (int k = 0; k < numRows; k++)
            {

                var gridButton = new Button
                {
                    Text = (i).ToString() + "," + (k).ToString(),

                    BorderWidth = 0,
                    BorderRadius = 0,
                    HorizontalOptions = LayoutOptions.FillAndExpand,
                    // Bounds = new Rectangle(50*i,50*k, 50, 50)

                };
                gridButton.Clicked += delegate
                {

                    gridButton.Text = string.Format("{0}", count++);
                };
                grid.Children.Add( gridButton, i, k); // Left, Third element
            }

        this.Content = grid;
    }

Posts

  • StephaneDelcroixStephaneDelcroix USInsider, Beta ✭✭✭✭

    On WP, the template for the button has a few px of margin. You can't change this through forms, unless you write your custom button renderer

  • BalasubramanianVaidyalingamBalasubramanianVaidyalingam USMember, University
    edited July 2014

    Thanks Stephane. I just saw that on my Nexus 7, the margin drops quite a bit, will look up custom rendering next to see if this solves the issue.

  • JasonMaddenJasonMadden USMember ✭✭

    @BalasubramanianVaidyalingam‌ did this fix your issue? I'm having a similar one.

  • RonnyBattyRonnyBatty GBMember
    edited January 2015

    With Xamarin.Forms 1.3 you can customize controls using styles:

    developer.xamarin.com/guides/cross-platform/xamarin-forms/working-with/styles/

    Setting the BorderWidth property to zero on the Button style might achieve what you're looking for.

  • BalasubramanianVaidyalingamBalasubramanianVaidyalingam USMember, University

    @Jason - sorry I didn't see your request - if its still relevant, I used instances of Frame derived classes instead.

    @Ronny, Thanks for pointing out, but I still see the spacing issue. What am I missing?

    With a Grid named ButtonLayout in the XAML,

    and code behind:

       var buttonStyle = new Style(typeof (Button))
            {
                Setters =
                {
                    new Setter {Property = Button.BackgroundColorProperty, Value = Color.Yellow},
                    new Setter {Property = Button.BorderWidthProperty, Value = 0},
                }
            };
    
          RowDefinitionCollection defRowDefinitionCollection = new RowDefinitionCollection();
            ColumnDefinitionCollection defColumnDefinitionCollection = new ColumnDefinitionCollection();
            int SquareSideLength = 10;
            for (int i = 0; i < SquareSideLength; i++)
            {
                RowDefinition r = new RowDefinition() { Height = new GridLength(25, GridUnitType.Auto) };
                ColumnDefinition c = new ColumnDefinition() { Width = new GridLength(25, GridUnitType.Auto) };
                defRowDefinitionCollection.Add(r);
                defColumnDefinitionCollection.Add(c);
            }
            ButtonLayout.RowDefinitions = defRowDefinitionCollection;
            ButtonLayout.ColumnDefinitions = defColumnDefinitionCollection;
    
            for (int i = 0; i < SquareSideLength; i++)
                for (int j = 0; j < SquareSideLength; j++)
            {
                var mybutton = new Button
                {
                    Text = "X",
                    TextColor = Color.Black,
                    Style = buttonStyle
                };
                ButtonLayout.Children.Add(mybutton,i,j);
            }
    

    I even tried modding Petzold's demo app and changing the label alone:

           grid.Children.Add(new Button()
            {
                Text = "Autosized cell",
                TextColor = Color.White,
                BackgroundColor = Color.Blue,
                Style = new Style(typeof(Button))
                {
                    Setters =
                                    {
                                        new Setter {Property = Button.BackgroundColorProperty, Value = Color.Yellow},
                                        new Setter {Property = Button.BorderWidthProperty, Value = 0},
                                        new Setter {Property = Button.BorderRadiusProperty, Value = 0},
                                    }
                }
            }, 0, 1);
    

    The demo app was here: https://github.com/xamarin/xamarin-forms-samples/blob/master/FormsGallery/FormsGallery/FormsGallery/GridDemoPage.cs

  • SapienDeveloperSapienDeveloper USMember ✭✭
    edited January 2015

    Have you tried setting the ColumnSpacing property of the Grid to 0 and set your button width to the width of the grid element?

  • BalasubramanianVaidyalingamBalasubramanianVaidyalingam USMember, University

    @SapienDeveloper‌ , I tried that but it doesn't seem to matter to Windows Phone.Have attached a screen shot It sets it alright in Android. I would have expected it to work the other way around.

  • RutuRutu INMember
    edited August 2015

    Hey, @BalasubramanianVaidyalingam, I solved this issue by writing style--
    NOTE :- For WinPhone I wrote -6.


    <OnPlatform.iOS>5</OnPlatform.iOS>
    <OnPlatform.Android>7</OnPlatform.Android>
    <OnPlatform.WinPhone>-6</OnPlatform.WinPhone>



    And wherever u use Grid just write --


    .......
    ......

  • RutuRutu INMember

    I have attached a file for reference.

  • DKurkinDKurkin GBMember ✭✭

    Could it be Grid Padding? :

    Padding = new Thickness(0,0,0,0)

  • shanuabcshanuabc INMember
    edited August 2015

    Thanks @Rutu ....really good answer, it worked for me, nice finding. :smiley:

  • JohnHardmanJohnHardman GBUniversity mod

    Has anybody written a custom renderer to get rid of the annoying margin around buttons on WinPhone (and it seems Windows too)? If so, is this something you could share please?

    As a heads-up, it appears that on Windows, changing the background color of a button doesn't always change the margin color to match. Yet another reason for getting rid of the margin...

  • JohnHardmanJohnHardman GBUniversity mod

    Answered my own question. Custom renderer has done the trick on Window, getting rid of unnecessary margins on buttons.

Sign In or Register to comment.