Равномерно пространственные элементы в StackPanel

Question

Смотрите этот контейнер, где у меня есть два элемента. Я хочу, чтобы они были равномерно распределены, , как если бы я использовал justify-content: space-between (или space-around) в HTML flexbox .

            <StackPanel Margin="10" Orientation="Horizontal">
                <ComboBox DockPanel.Dock="Left" SelectedIndex="0" Padding="6">
                    <ComboBoxItem Content="Info"/>
                </ComboBox>
                <Ellipse DockPanel.Dock="Right" Width="20" Height="20" Fill="Red"/>
            </StackPanel>

Для этого конкретного случая, где Я хочу, чтобы они были на любом краю контейнера, я справился с обходом, используя DockPanel.

            <DockPanel Margin="10" LastChildFill="False">
                <ComboBox DockPanel.Dock="Left" SelectedIndex="0" Padding="6">
                    <ComboBoxItem Content="Info"/>
                </ComboBox>
                <Ellipse DockPanel.Dock="Right" Width="20" Height="20" Fill="Red"/>
            </DockPanel>

Однако, это определенно обходной путь; если бы у меня было какое-то динамическое число элементов c, которое я хотел бы равномерно распределить, это не сработало бы. это может растянуться, чтобы разделить ширину своего контейнера. Но есть ли более простой способ установить одинаковый интервал?

Использование Margin или Padding для отдельных элементов недопустимо. Неприемлемо !!!!!

Answer 1

Вы можете сделать следующее:

• использовать ItemsControl
• с пользовательским ItemsPanel, который будет UniformGrid
• по индивидуальному заказу IValueConverter:

XAML:

<UserControl x:Class="ConsoleApp1.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:ConsoleApp1"
             mc:Ignorable="d" 
             d:DesignHeight="400" d:DesignWidth="400">
    <UserControl.Resources>
        <local:ItemsControlToRowsConverter x:Key="ItemsControlToRowsConverter" />
    </UserControl.Resources>
    <Grid>
        <Border BorderBrush="Black" BorderThickness="1">
            <ItemsControl x:Name="ItemsControl">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <UniformGrid Rows="{Binding ElementName=ItemsControl, Converter={StaticResource ItemsControlToRowsConverter}}" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <Border Width="50" Height="50" Background="Red" Margin="2"/>
                <Border Width="50" Height="50" Background="Green" Margin="2"/>
                <Border Width="50" Height="50" Background="Blue" Margin="2"/>
                <Border Width="50" Height="50" Background="Yellow" Margin="2"/>
            </ItemsControl>
        </Border>
    </Grid>
</UserControl>

Конвертер:

using System;
using System.Globalization;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;

namespace ConsoleApp1
{
    public class ItemsControlToRowsConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (!(value is ItemsControl itemsControl))
                return DependencyProperty.UnsetValue;

            return itemsControl.Items.Count;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotSupportedException();
        }
    }
}

Сложите вещи и настройте конвертер на свой вкус.