【问题标题】:How to make WPF wrappanel child items to stretch?如何使 WPF wrappanel 子项拉伸?
【发布时间】:2011-11-04 04:48:02
【问题描述】:

我想创建一个ItemsControl,其中子项的放置方式与WrapPanel 类似,但子项应该占用尽可能多的空间。这样当窗口大小变大或变小时,子项应该按照一定的宽高比进行拉伸。当子项从ItemsControlItemsSource 添加或删除时,WrapPanel 应在项之间适当地放置换行符以保持子项的宽高比。
以下是我到目前为止所拥有的。是否可以在 Xaml 中执行此操作?或者我应该为此创建一个自定义控件?提前致谢!

<Window>
<Grid>
    <ItemsControl ItemsSource="{Binding DataCollection}">
       <ItemsControl.ItemsPanel>
          <ItemsPanelTemplate>
             <WrapPanel Orientation="Vertical"/>
          </ItemsPanelTemplate>
       </ItemsControl.ItemsPanel>
       <ItemsControl.ItemTemplate>
          <DataTemplate>
             <Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Stretch">
                <StackPanel Orientation="Horizontal" >
                   <TextBlock TextWrapping="Wrap" Text="{Binding Name}" />
                   <TextBlock TextWrapping="Wrap" Text="{Binding Value}"/>
                   <TextBlock TextWrapping="Wrap" Text="{Binding Time,  StringFormat='hh:mm:ss' }"/>
                </StackPanel>
             </Border>          
         </DataTemplate>
       </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>
</Window>

【问题讨论】:

  • 无限垂直方向 UniformGrid 是否为您服务...social.msdn.microsoft.com/Forums/en-US/wpf/thread/…
  • 我觉得和我需要的有点不一样,不过谢谢!
  • 包装和堆叠面板有意占用尽可能少的空间。据我所知,您无法覆盖该行为,因此您必须使用不同类型的分组控件。

标签: wpf xaml custom-controls itemscontrol wrappanel


【解决方案1】:

使用UniformGrid 而不是WrapPanel。只需使用 Columns 属性设置您想要的列数,它就会为您提供所需的结果。

【讨论】:

  • 稍微扩展@Thomas Levesque 的回答:通过设置 Columns=1 明确地使 WrapPanel 将每个子项设置为单独的行。像这样:
【解决方案2】:

作为另一种解决方案(有时宽度可能不同,因此UniformGrid 不起作用),这里修改了WrapPanel,它将拉伸元素以适应线条(同时保持比例相同):

public class StretchyWrapPanel : Panel {
    public static readonly DependencyProperty ItemWidthProperty = DependencyProperty.Register(nameof(ItemWidth),
            typeof(double), typeof(StretchyWrapPanel), new FrameworkPropertyMetadata(double.NaN, FrameworkPropertyMetadataOptions.AffectsMeasure));

    [TypeConverter(typeof(LengthConverter))]
    public double ItemWidth {
        get { return (double)GetValue(ItemWidthProperty); }
        set { SetValue(ItemWidthProperty, value); }
    }

    public static readonly DependencyProperty ItemHeightProperty = DependencyProperty.Register(nameof(ItemHeight),
            typeof(double), typeof(StretchyWrapPanel), new FrameworkPropertyMetadata(double.NaN, FrameworkPropertyMetadataOptions.AffectsMeasure));

    [TypeConverter(typeof(LengthConverter))]
    public double ItemHeight {
        get { return (double)GetValue(ItemHeightProperty); }
        set { SetValue(ItemHeightProperty, value); }
    }

    public static readonly DependencyProperty OrientationProperty = StackPanel.OrientationProperty.AddOwner(typeof(StretchyWrapPanel),
            new FrameworkPropertyMetadata(Orientation.Horizontal, FrameworkPropertyMetadataOptions.AffectsMeasure, OnOrientationChanged));

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

    private static void OnOrientationChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) {
        ((StretchyWrapPanel)d)._orientation = (Orientation)e.NewValue;
    }

    private Orientation _orientation = Orientation.Horizontal;

    public static readonly DependencyProperty StretchProportionallyProperty = DependencyProperty.Register(nameof(StretchProportionally), typeof(bool),
            typeof(StretchyWrapPanel), new PropertyMetadata(true, OnStretchProportionallyChanged));

    public bool StretchProportionally {
        get { return _stretchProportionally; }
        set { SetValue(StretchProportionallyProperty, value); }
    }

    private static void OnStretchProportionallyChanged(DependencyObject o, DependencyPropertyChangedEventArgs e) {
        ((StretchyWrapPanel)o)._stretchProportionally = (bool)e.NewValue;
    }

    private bool _stretchProportionally = true;

    private struct UVSize {
        internal UVSize(Orientation orientation, double width, double height) {
            U = V = 0d;
            _orientation = orientation;
            Width = width;
            Height = height;
        }

        internal UVSize(Orientation orientation) {
            U = V = 0d;
            _orientation = orientation;
        }

        internal double U;
        internal double V;
        private readonly Orientation _orientation;

        internal double Width {
            get { return _orientation == Orientation.Horizontal ? U : V; }
            set {
                if (_orientation == Orientation.Horizontal) {
                    U = value;
                } else {
                    V = value;
                }
            }
        }

        internal double Height {
            get { return _orientation == Orientation.Horizontal ? V : U; }
            set {
                if (_orientation == Orientation.Horizontal) {
                    V = value;
                } else {
                    U = value;
                }
            }
        }
    }

    protected override Size MeasureOverride(Size constraint) {
        var curLineSize = new UVSize(Orientation);
        var panelSize = new UVSize(Orientation);
        var uvConstraint = new UVSize(Orientation, constraint.Width, constraint.Height);
        var itemWidth = ItemWidth;
        var itemHeight = ItemHeight;
        var itemWidthSet = !double.IsNaN(itemWidth);
        var itemHeightSet = !double.IsNaN(itemHeight);

        var childConstraint = new Size(
                itemWidthSet ? itemWidth : constraint.Width,
                itemHeightSet ? itemHeight : constraint.Height);

        var children = InternalChildren;

        for (int i = 0, count = children.Count; i < count; i++) {
            var child = children[i];
            if (child == null) continue;

            // Flow passes its own constrint to children
            child.Measure(childConstraint);

            // This is the size of the child in UV space
            var sz = new UVSize(Orientation,
                    itemWidthSet ? itemWidth : child.DesiredSize.Width,
                    itemHeightSet ? itemHeight : child.DesiredSize.Height);

            if (curLineSize.U + sz.U > uvConstraint.U) {
                // Need to switch to another line
                panelSize.U = Math.Max(curLineSize.U, panelSize.U);
                panelSize.V += curLineSize.V;
                curLineSize = sz;

                if (sz.U > uvConstraint.U) {
                    // The element is wider then the constrint - give it a separate line             
                    panelSize.U = Math.Max(sz.U, panelSize.U);
                    panelSize.V += sz.V;
                    curLineSize = new UVSize(Orientation);
                }
            } else {
                // Continue to accumulate a line
                curLineSize.U += sz.U;
                curLineSize.V = Math.Max(sz.V, curLineSize.V);
            }
        }

        // The last line size, if any should be added
        panelSize.U = Math.Max(curLineSize.U, panelSize.U);
        panelSize.V += curLineSize.V;

        // Go from UV space to W/H space
        return new Size(panelSize.Width, panelSize.Height);
    }

    protected override Size ArrangeOverride(Size finalSize) {
        var firstInLine = 0;
        var itemWidth = ItemWidth;
        var itemHeight = ItemHeight;
        double accumulatedV = 0;
        var itemU = Orientation == Orientation.Horizontal ? itemWidth : itemHeight;
        var curLineSize = new UVSize(Orientation);
        var uvFinalSize = new UVSize(Orientation, finalSize.Width, finalSize.Height);
        var itemWidthSet = !double.IsNaN(itemWidth);
        var itemHeightSet = !double.IsNaN(itemHeight);
        var useItemU = Orientation == Orientation.Horizontal ? itemWidthSet : itemHeightSet;

        var children = InternalChildren;

        for (int i = 0, count = children.Count; i < count; i++) {
            var child = children[i];
            if (child == null) continue;

            var sz = new UVSize(Orientation, itemWidthSet ? itemWidth : child.DesiredSize.Width, itemHeightSet ? itemHeight : child.DesiredSize.Height);
            if (curLineSize.U + sz.U > uvFinalSize.U) {
                // Need to switch to another line
                if (!useItemU && StretchProportionally) {
                    ArrangeLineProportionally(accumulatedV, curLineSize.V, firstInLine, i, uvFinalSize.Width);
                } else {
                    ArrangeLine(accumulatedV, curLineSize.V, firstInLine, i, true, useItemU ? itemU : uvFinalSize.Width / Math.Max(1, i - firstInLine - 1));
                }

                accumulatedV += curLineSize.V;
                curLineSize = sz;

                if (sz.U > uvFinalSize.U) {
                    // The element is wider then the constraint - give it a separate line     
                    // Switch to next line which only contain one element
                    if (!useItemU && StretchProportionally) {
                        ArrangeLineProportionally(accumulatedV, sz.V, i, ++i, uvFinalSize.Width);
                    } else {
                        ArrangeLine(accumulatedV, sz.V, i, ++i, true, useItemU ? itemU : uvFinalSize.Width);
                    }

                    accumulatedV += sz.V;
                    curLineSize = new UVSize(Orientation);
                }
                firstInLine = i;
            } else {
                // Continue to accumulate a line
                curLineSize.U += sz.U;
                curLineSize.V = Math.Max(sz.V, curLineSize.V);
            }
        }

        // Arrange the last line, if any
        if (firstInLine < children.Count) {
            if (!useItemU && StretchProportionally) {
                ArrangeLineProportionally(accumulatedV, curLineSize.V, firstInLine, children.Count, uvFinalSize.Width);
            } else {
                ArrangeLine(accumulatedV, curLineSize.V, firstInLine, children.Count, true,
                        useItemU ? itemU : uvFinalSize.Width / Math.Max(1, children.Count - firstInLine - 1));
            }
        }

        return finalSize;
    }

    private void ArrangeLineProportionally(double v, double lineV, int start, int end, double limitU) {
        var u = 0d;
        var horizontal = Orientation == Orientation.Horizontal;
        var children = InternalChildren;

        var total = 0d;
        for (var i = start; i < end; i++) {
            total += horizontal ? children[i].DesiredSize.Width : children[i].DesiredSize.Height;
        }

        var uMultipler = limitU / total;
        for (var i = start; i < end; i++) {
            var child = children[i];
            if (child != null) {
                var childSize = new UVSize(Orientation, child.DesiredSize.Width, child.DesiredSize.Height);
                var layoutSlotU = childSize.U * uMultipler;
                child.Arrange(new Rect(horizontal ? u : v, horizontal ? v : u,
                        horizontal ? layoutSlotU : lineV, horizontal ? lineV : layoutSlotU));
                u += layoutSlotU;
            }
        }
    }

    private void ArrangeLine(double v, double lineV, int start, int end, bool useItemU, double itemU) {
        var u = 0d;
        var horizontal = Orientation == Orientation.Horizontal;
        var children = InternalChildren;
        for (var i = start; i < end; i++) {
            var child = children[i];
            if (child != null) {
                var childSize = new UVSize(Orientation, child.DesiredSize.Width, child.DesiredSize.Height);
                var layoutSlotU = useItemU ? itemU : childSize.U;
                child.Arrange(new Rect(horizontal ? u : v, horizontal ? v : u,
                        horizontal ? layoutSlotU : lineV, horizontal ? lineV : layoutSlotU));
                u += layoutSlotU;
            }
        }
    }
}

在行动:

【讨论】:

  • 您好,Bird 先生,有人提供了指向此处的链接,但我认为您的解决方案如果修改后可能是候选解决方案之一。由于您的评论“拉伸元素”,我将深入研究并测试您的代码。我的情况是所有高度都相同,文本长度不同。您附加的图像似乎匹配得很好。你认为你的代码是我的案例的直接解决方案吗?客气了,你能帮忙给点建议吗?太感谢了 ! stackoverflow.com/questions/47843080/…
  • @KayLee 抱歉,如果“拉伸元素”有误导性,我不是指缩放,如果这就是你的意思。相反,它只是按比例或固定增加每个元素的宽度。相反,如果您想在元素之间均匀地重新排列每行末尾的那些空格,我可以调整代码并将其复制为对您问题的回应。
  • 哦,非常感谢您的建议。你能明白我需要什么吗?因为我的面板空间有限,空间小,我必须利用空白空间尽可能多地显示东西。像你的形象,所有的孩子都是不同长度的按钮,根据包含的文字,比如你的法国,未来,巧克力,亲吻等等在。我必须提供提供链接的赏金,但如果您回答我的问题,我会通过您的个人资料将您的答案作为非官方赏金投票,因为这对我来说是真正的解决方案。谢谢!
  • 为了帮助您理解我想要的,如果我有一个空格(4 个文本长度)并且我有一个带有文本“星”的元素,我希望面板重新排列“星” ' 将元素放入空白空间(4个文本长度)以最大化有限空间的容量。如果文本的长度小于 4,如 3、2,则可以,但 4 长度的元素具有更高的效率优先级。很简单的想法..因为我的专业只是生物化学和非营利项目的互联网自学,我自己定制真的很难。我非常感谢您的时间和贡献。
  • @KayLee 哦,我明白你的意思了……这是一个有趣的任务,我会想办法解决它。
【解决方案3】:

要实现所需的行为,您可以尝试使用WrapPanelWidthMaxWidth 属性,例如通过这种方式

        <ListView
            Name="RootControl"
            ItemsSource="{Binding [icons]}"
            ItemTemplate="{StaticResource IconTemplate}">
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel
                        Width="{Binding ElementName=RootControl, Path=ActualWidth}"/>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
        </ListView>

有效

【讨论】:

  • 即使 WrapPanel 本身以这种方式被拉伸,它的内容也不是,这就是我认为问题所要问的
【解决方案4】:

您是否尝试过 itemscontrol 中的 Horizo​​ntalContentAlignment="Stretch" 属性。

【讨论】:

  • 我可以看到 Horizo​​ntalContentAlignment="Stretch" 会起作用。
猜你喜欢
  • 2012-10-19
  • 2021-07-09
  • 1970-01-01
  • 1970-01-01
  • 2012-12-11
  • 2010-10-24
  • 1970-01-01
  • 2011-01-24
  • 1970-01-01
相关资源
最近更新 更多