locked
How to size buttons to the width of the screen?

    Question

  • Hi!

    I'm working on an app that displays up to 6 buttons horisontally in a StackPanel depending on the selected product. Is there a way to auto size the buttons to fill the width of the screen? If I got 3 buttons each button should almost take 1 third of the screen width each. If 6 buttons, each should use up to 6th of the width.

    In the Code below I tried to get the Width of the StackPanel (shortcut), but it gives no value back. Could someone help me?

                        Button btn = new Button();
                        btn.Name = "color" + i;
                        btn.Content = colorlist[i];
                        btn.Padding = new Thickness(0);
                        double iStackPanelWidth = shortcut.Width;
                        btn.MinWidth = iStackPanelWidth/colorlist.Length;
                        btn.Width = iStackPanelWidth / colorlist.Length;
                        btn.Margin = new Thickness(4);
                        btn.Tag = i;    // use this as the index on the flipview
                        btn.Click += btn_Clicked;
                        shortcut.Children.Add(btn);
    
    Thanks, Sigurd F

    Thursday, September 4, 2014 9:36 PM

Answers

  • The StackPanel probably isn't the right control for what you want, but you could get away with it by calculating the button sizes based on the ActualWidth of your Window.

    There isn't a container which will take an arbitrary number of items and stretch them evenly to fill the control. To force stretching the buttons evenly I'd probably create a Grid and add a column for each button and then place the buttons to stretch in the columns. You could either do this as a one-off purely in code or create a container control which will automatically create a Grid with enough columns for its contents. That would let you bind the contents rather than adding them explicitly as well.

    The following assumes I have a Grid named "StretchButtonGrid" to host my evenly spaced buttons:

            void ClearGrid(Grid grid)
            {
                grid.ColumnDefinitions.Clear();
                grid.Children.Clear();
            }
    
            void AddToGrid(Grid grid,Control child)
            {
                child.HorizontalAlignment = HorizontalAlignment.Stretch;
                child.SetValue(Grid.ColumnProperty, grid.ColumnDefinitions.Count);
                grid.ColumnDefinitions.Add(new ColumnDefinition() );
    
                grid.Children.Add(child);
            }
    
            private void Button_Click(object sender, RoutedEventArgs e)
            {
                Button b = new Button();
                b.Content = new TextBlock() { Text = "Button " + buttonCount++ };
                AddToGrid(StretchButtonGrid, b);
            }
    

    --Rob

    • Marked as answer by Sigurd F Tuesday, September 9, 2014 9:20 PM
    Friday, September 5, 2014 6:08 AM
    Owner

All replies

  • Why don't you try doing this using XAML. Where you could simply allocate the exact same space for the buttons using the RowDefinitions and the ColumnDefinitions.

    Something like this:

    <Grid.ColumnDefinitions>
        <ColumnDefinitions Width="30" />
        <ColumnDefinitions Width="30*" />
        <ColumnDefinitions Width="*"/>
    </Grid.ColumnDefinitions>

    Then allocate these spaces to your buttons like Grid.Column="0", likewise you can do it for the RowDefinitions too.

    Have a look at this:

    Windows Phone Layout Using Grid

    http://msdn.microsoft.com/en-us/library/windows/apps/jj207042(v=vs.105).aspx


    Happy Coding!

    Friday, September 5, 2014 3:33 AM
  • Hi Sigurd,

    Have you tried with ActualWidth property ? ActualWidth is a calculated value, the calculations are a result of a layout pass, where the object is sized in layout according to the logic of its successive layout parents. For more info see Quickstart: Defining layouts.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    Friday, September 5, 2014 5:20 AM
    Moderator
  • As the number of buttons changes dynamically I don't think this will work. This is a page that display Product information. And on one product there can be 2 buttons and on the NeXT there can be 6 buttons.

    Regards, Sigurd F

    Friday, September 5, 2014 5:50 AM
  • The StackPanel probably isn't the right control for what you want, but you could get away with it by calculating the button sizes based on the ActualWidth of your Window.

    There isn't a container which will take an arbitrary number of items and stretch them evenly to fill the control. To force stretching the buttons evenly I'd probably create a Grid and add a column for each button and then place the buttons to stretch in the columns. You could either do this as a one-off purely in code or create a container control which will automatically create a Grid with enough columns for its contents. That would let you bind the contents rather than adding them explicitly as well.

    The following assumes I have a Grid named "StretchButtonGrid" to host my evenly spaced buttons:

            void ClearGrid(Grid grid)
            {
                grid.ColumnDefinitions.Clear();
                grid.Children.Clear();
            }
    
            void AddToGrid(Grid grid,Control child)
            {
                child.HorizontalAlignment = HorizontalAlignment.Stretch;
                child.SetValue(Grid.ColumnProperty, grid.ColumnDefinitions.Count);
                grid.ColumnDefinitions.Add(new ColumnDefinition() );
    
                grid.Children.Add(child);
            }
    
            private void Button_Click(object sender, RoutedEventArgs e)
            {
                Button b = new Button();
                b.Content = new TextBlock() { Text = "Button " + buttonCount++ };
                AddToGrid(StretchButtonGrid, b);
            }
    

    --Rob

    • Marked as answer by Sigurd F Tuesday, September 9, 2014 9:20 PM
    Friday, September 5, 2014 6:08 AM
    Owner
  • Hi!

    Looks like the ActualWidth value is yet not set in the OnNavigated to Method. It returns only 0.0. I guess I will have to attack this problem from an other angel.

    Regards, Sigurd F

    Sunday, September 7, 2014 4:56 PM