Растяните детей пропорционально внутри StackPanel

Question

Там есть StackPanel

<StackPanel x:Name="sp1" Orientation="Horizontal" BorderBrush="Black" BorderThickness="1" />

, который динамически заполняется прямоугольниками:

var values = new[] { 30, 50, 20 };
foreach (int val in values)
{
    sp1.Children.Add(new Rectangle
    {
        // Width = perecntage, not supported on Rectangle
        VerticalAlignment = VerticalAlignment.Stretch,
        Fill = new SolidColorBrush(colors.Pop()),
    });
}

Width должен быть пропорцией ширины родителя на основе val.

Я пытался установить его с помощью события SizeChanged, но это работает только для увеличения. Сжатие окна не возвращает ширину.

sp1.SizeChanged += (sender, args) => 
{
    int i = 0;
    foreach (var val in values)
    {
        var prop = (double)val / valuesSum;
        var r = (Rectangle)sp1.Children[i++];
        r.Width = (int)(prop * args.NewSize.Width);
    }
}

Единственная цель - иметь планку, которая пропорционально разделена и растянута. Есть идеи?

Answer 1

Этого можно достичь, вызвав child.Arrange(), что позволяет установить X.

Ребенок должен иметь Width неустановленным, в противном случае он имеет приоритет.

sp1.SizeChanged += (sender, e) => 
{
   var childRect = new Rect(0, 0, 0, e.NewSize.Height);

   for (int i = 0; i < values.Length; i++)
   {
       var childWidth = (double)values[i] / valuesSum * e.NewSize.Width;
       childRect.Width = childWidth;

       so1.Children[i].Arrange(childRect);

       childRect.X += childWidth;
   }
}

Я пробовал RelativePanel и StackPanel, и оба работали одинаково.

Это также можно сделать в классе, производном от Panel. Код такой же, но он вызывается из переопределенного ArrangeOverride().

Answer 2

Не совсем понятно, почему вы хотите использовать StackPanel для этого. StackPanel растет по мере того, как его содержимое увеличивается, отдельные элементы управления «укладываются», чтобы поместиться в пространство, доступное для StackPanel. Это не соответствует вашим требованиям для "планки, которая пропорционально разделена и растянута" .

Если вы используете что-то вроде Grid, вы можете определить столбцы и строки, которые будут пропорционально разнесены. Например, для сетки с двумя столбцами, ширина которых определяется как 2* и 3*, эти столбцы будут составлять две пятых ширины сетки и три пятых (пятые, потому что 2 + 3 = 5). Излишне говорить, что вы можете иметь столько столбцов, сколько захотите, и определять относительный размер по своему усмотрению, возможно, используя 30 *, 50 *, 20 * из информации в вопросе. Или, если убрать звездочки, значения становятся буквальными, а не относительными значениями.

Если вы просто хотите что-то равномерно распределить, попробуйте UniformGrid. Вы можете ограничить количество столбцов или строк.

Если у вас есть какие-то сложные потребности, которые ничем не покрыты, вы можете написать собственный контейнерный элемент управления.