Question

我正在尝试将项目水平放置在ItemControl中，同时使它们填充父控件。

这是我的XAMl：

             <ItemsControl ItemsSource="{Binding AnnualWeatherViewModels}" Visibility="{Binding IsAnnualWeatherViewModels, Converter={StaticResource VisibilityConverter}}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal"></StackPanel>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <V:AerosolSimpleWeatherCharacteristicsView DataContext="{Binding}"></V:AerosolSimpleWeatherCharacteristicsView>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>

我为ItemsControl.ItemsPanel尝试的两种变体是：

<StackPanel Orientation="Horizontal"></StackPanel>

和

<DockPanel LastChildFill="False"></DockPanel>

然而，没有达到预期的结果，StackPanel压缩所有项目，DockPanel将填充父控件的空间，其中大部分空间专用于最后一项或不填充父级空间取决于LastChildFill的值。

那么如何水平布置ItemsControl的项目并让它们填充父控件的空间呢？

我最终在答案中创建了这个自定义控件：

public partial class StretchingPanel : Grid
    {
        public static readonly DependencyProperty OrientationProperty =
            DependencyProperty.Register("Orientation", typeof(Orientation), typeof(StretchingPanel), new UIPropertyMetadata(System.Windows.Controls.Orientation.Horizontal));

        public static readonly DependencyProperty FillFirstItemProperty =
            DependencyProperty.Register("FillFirstItem", typeof(bool), typeof(StretchingPanel), new UIPropertyMetadata(true));

        public static readonly DependencyProperty FillFirstItemFactorProperty =
            DependencyProperty.Register("FillFirstItemFactor", typeof(double), typeof(StretchingPanel), new UIPropertyMetadata(1.8));

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

        public bool FillFirstItem
        {
            get
            {
                return (bool)GetValue(FillFirstItemProperty);
            }
            set
            {
                SetValue(FillFirstItemProperty, value);
            }
        }

        public double FillFirstItemFactor
        {
            get
            {
                return (double)GetValue(FillFirstItemFactorProperty);
            }
            set
            {
                SetValue(FillFirstItemFactorProperty, value);
            }
        }

        protected override void OnVisualChildrenChanged(DependencyObject visualAdded, DependencyObject visualRemoved)
        {
            if (Orientation == System.Windows.Controls.Orientation.Horizontal)
            {
                ColumnDefinitions.Clear();
                for (int i = 0; i < Children.Count; ++i)
                {
                    var column = new ColumnDefinition();
                    if (i == 0 && FillFirstItem)
                        column.Width = new GridLength(FillFirstItemFactor, GridUnitType.Star);
                    ColumnDefinitions.Add(column);
                    Grid.SetColumn(Children[i], i);
                }
            }
            else
            {
                RowDefinitions.Clear();
                for (int i = 0; i < Children.Count; ++i)
                {
                    var row = new RowDefinition();
                    if (i == 0 && FillFirstItem)
                        row.Height = new GridLength(FillFirstItemFactor, GridUnitType.Star);
                    RowDefinitions.Add(row);
                    Grid.SetRow(Children[i], i);
                }
            }
            base.OnVisualChildrenChanged(visualAdded, visualRemoved);
        }

        public StretchingPanel()
        {
            InitializeComponent();
        }
    }

Answer 1

UniformGrid完成这项工作。

        <ItemsPanelTemplate>
            <UniformGrid Rows="1"/>
        </ItemsPanelTemplate>

Answer 2

所以你想按比例拉伸项目。如果它可以通过标准面板实现，那么它可以使用Grid（可以有比例列），这需要在ItemSource更改后设置ColumnDefinitions。

使用自定义面板非常简单：

class ProportionallyStretchingPanel : Panel
{
    protected override Size MeasureOverride(Size availableSize)
    {
        foreach (UIElement child in InternalChildren)
            child.Measure(availableSize);
        return availableSize;
    }

    protected override Size ArrangeOverride(Size availableSize)
    {
        double widthSum = 0.0;
        foreach (UIElement child in InternalChildren)
        {
            widthSum += child.DesiredSize.Width;
        }
        double x = 0.0;
        foreach (UIElement child in InternalChildren)
        {
            double proportionalWidth = child.DesiredSize.Width / widthSum * availableSize.Width;
            child.Arrange(
                new Rect(
                    new Point(x, 0.0),
                    new Point(x + proportionalWidth, availableSize.Height)));
            x += proportionalWidth;
        }
        return availableSize;
    }
}

<ItemsPanelTemplate>
    <local:ProportionallyStretchingPanel"/>
</ItemsPanelTemplate>

WPF ItemsControl水平方向和填充父级？

2 个答案: