StackPanel doesn't use all available space?

Hi!

I've a stackpanel, that contains some Buttons.

Buttons have width set to "Stretch".

The stackPanel take correctly the whole space it can use, but all button within are only using something like prefered size or minimum size.

How can the whole space available for buttons are correctly spread between buttons?
<StackPanel Name="uxButtonPanel" Orientation="Horizontal" Background="Aqua">
        <Button/>
        <Button/>
        <Button/>
        <Button/>
        <Button/>
    </StackPanel>

Open in new window

LVL 1
NargzulAsked:
Who is Participating?
 
adler77Connect With a Mentor Commented:
Awhile back I cribbed part of the WpfContrib AutoGrid code and modified it to work like this. Sorry for the lack of comments--at the time, I was pretty much in "get it done" mode, but it isn't too complictated.

Inside the ArrangeChildren() override you will see a couple of places where I create a ColumnDefinition or a RowDefinition--you could adjust the properties there, or expand the class to accept more DPs from XAML. Either way, it might take a few minutes of adjusting to get it where you need it, but it should work.
namespace Manager
{
    public class AutoGrid : Grid
    {
        private int currentItemsCount;

        public int Items
        {
            get { return (int)GetValue(ItemsProperty); }
            set { SetValue(ItemsProperty, value); }
        }

        public Orientation Orientation
        {
            get { return (Orientation)GetValue(OrientationProperty); }
            set { SetValue(OrientationProperty, value); }
        }

        public static readonly DependencyProperty ItemsProperty =
            DependencyProperty.Register("Items", typeof(int), typeof(AutoGrid),
            new PropertyMetadata(OnPropertyChanged));


        public static readonly DependencyProperty OrientationProperty =
            DependencyProperty.Register("Orientation", typeof(Orientation), typeof(AutoGrid),
            new PropertyMetadata(OnPropertyChanged));

        private static void OnPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            AutoGrid grid = d as AutoGrid;
            if (grid != null)
            {
                grid.currentItemsCount = 0;
                grid.InvalidateArrange();
            }
        }

        public AutoGrid()
        {
            this.LayoutUpdated += new EventHandler(AutoGrid_LayoutUpdated);
        }

        void AutoGrid_LayoutUpdated(object sender, EventArgs e)
        {
            ArrangeChildren();
        }

        private void ArrangeChildren()
        {
            if (currentItemsCount != this.Children.Count)
            {
                currentItemsCount = this.Children.Count;

                this.ColumnDefinitions.Clear();
                this.RowDefinitions.Clear();

                bool horizontal = (this.Orientation == Orientation.Horizontal);

                for (int i = 0; i < Items; i++)
                {
                    if (horizontal)
                    {
                        ColumnDefinition cd = new ColumnDefinition();
                        this.ColumnDefinitions.Add(cd);
                    }
                    else
                    {
                        RowDefinition rd = new RowDefinition();
                        this.RowDefinitions.Add(rd);
                    }
                }

                if (Items != 0)
                {
                    int cells = (int)Math.Ceiling(this.Children.Count / (double)Items);
                    for (int i = 0; i < cells; i++)
                    {
                        if (!horizontal)
                        {
                            ColumnDefinition cd = new ColumnDefinition();
                            this.ColumnDefinitions.Add(cd);
                        }
                        else
                        {
                            RowDefinition rd = new RowDefinition();
                            this.RowDefinitions.Add(rd);
                        }
                    }
                }

                int x = -1;
                for (int i = 0; i < this.Children.Count; i++)
                {
                    FrameworkElement item = this.Children[i] as FrameworkElement;
                    if (item == null)
                    {
                        continue;
                    }

                    int position = i % this.Items;
                    if (position == 0)
                    {
                        x++;
                    }

                    if (horizontal)
                    {
                        Grid.SetColumn(item, position);
                        Grid.SetRow(item, x);
                    }
                    else
                    {
                        Grid.SetColumn(item, x);
                        Grid.SetRow(item, position);
                    }
                }
            }
        }
    }
}


<local:AutoGrid SizeChanged="AutoGrid_SizeChanged" Orientation="Horizontal" />

Open in new window

0
 
Gururaj BadamCommented:

<Window x:Class="WpfApplication4.Window3"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window3" Height="300" Width="300">
    <Grid>
        <StackPanel>
            <Button MinHeight="25" Content="Help"/>
            <Button MinHeight="25" Content="Help"/>
            <Button MinHeight="25" Content="Help"/>
            <Button MinHeight="25" Content="Help"/>
        </StackPanel>
    </Grid>
</Window>

Open in new window

0
 
NargzulAuthor Commented:
but in your example, there is still 200px that aren't used, and I've some button that can have a "Collasped" visibility, and my window have to be resizeable, so definitely not usable in my case.
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
Gururaj BadamCommented:

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Button Grid.Row="0" Content="Help"/>
        <Button Grid.Row="1" Content="Help"/>
        <Button Grid.Row="2" Content="Help"/>
        <Button Grid.Row="3" Content="Help"/>
    </Grid>

Open in new window

0
 
NargzulAuthor Commented:
yeah but this mean I've to create dynamically row definition every times I load buttons in this container/set a button as "Collapsed", this is really not efficient :S
0
 
Gururaj BadamCommented:
Let's wait and watch if someone gives move efficient solution.
0
 
NargzulAuthor Commented:
Yeah... but this is already my current solution, so I need something better.
0
 
Gururaj BadamCommented:
You are using StackPanel and the last suggestion I've given is not to use StackPanel but use a Grid.
0
 
NargzulAuthor Commented:
Nope, I actually use a Grid, but I'm not actually satisfied with this solution, because I need to clear and reset the grid content too often.

So I was trying to do some things with the stack panel.
0
 
Gautham JanardhanCommented:
using a dock panel would solve your problem to an extent. but the catch is that the last button will occupy the remaining space.

<DockPanel LastChildFIll = "true">
<Button c:Name="b1"/>
<Button c:Name="b2"/>
<Button c:Name="b3"/>
<Button c:Name="b4"/>
<Button c:Name="b5"/>
</<DockPanel>

in the above example if button b2 is removed button b5 will occupy it's spacer.

0
 
NargzulAuthor Commented:
Hum,, yeah but I can't have this behavior
0
 
NargzulAuthor Commented:
Wow, Thank you!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.