Elastic WrapPanel and TextTrimming

Question

I am attempting to create an Elastic WrapPanel. Which means that each columns stretch itself to fit the panel's width until a new column fits inside the panel.

The columns width is based on a ItemMinWidth.

I was able to create the panel, but my problem is that if i put a TextBlock and set TextTrimming to CharacterEllipsis. In my panel it won't work. The 3 dots won't appear. It looks like the width of the column works, but the content seems to receive infinity as a width.

Here's my panel:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Windows;
using System.Windows.Controls;

namespace WrapPanelTest
{
    public class ElasticWrapPanel : Panel
    {
        #region Constructor

        public ElasticWrapPanel()
        {
        }

        #endregion

        #region Properties

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

        public static readonly DependencyProperty ItemMinWidthProperty = DependencyProperty.Register("ItemMinWidth", typeof(double), typeof(ElasticWrapPanel));

        [TypeConverter(typeof(LengthConverter))]
        public double ColumnWidth
        {
            get
            {
                return (double)GetValue(ColumnWidthProperty);
            }
            private set
            {
                SetValue(ColumnWidthProperty, value);
            }
        }

        public static readonly DependencyProperty ColumnWidthProperty = DependencyProperty.Register("ColumnWidth", typeof(double), typeof(ElasticWrapPanel));

        #endregion

        #region Protected methods

        protected override Size MeasureOverride(Size availableSize)
        {
            _uiElementsRect.Clear();
            _columnCount = CalculateColumnCount(availableSize);

            if (_columnCount > 0)
            {
                ColumnWidth = (int)Math.Floor(availableSize.Width / _columnCount);
                double rowHeight = 0;
                double lastRowHeight = 0;
                int currentColumn = 0;
                int currentRow = 0;

                foreach (UIElement children in InternalChildren)
                {
                    children.Measure(availableSize);

                    rowHeight = Math.Max(rowHeight, children.DesiredSize.Height);

                    Rect childrenRect = new Rect(0, 0, 0, 0);
                    childrenRect.X = currentColumn * ColumnWidth;
                    childrenRect.Y = lastRowHeight;
                    childrenRect.Width = ColumnWidth;
                    childrenRect.Height = children.DesiredSize.Height;

                    _uiElementsRect.Add(children, childrenRect);

                    currentColumn++;

                    if (currentColumn == _columnCount)
                    {
                        lastRowHeight += rowHeight;
                        currentRow++;
                        rowHeight = 0;
                        currentColumn = 0;
                    }
                }
            }

            if (_uiElementsRect.Any())
            {
                double maxBottom = _uiElementsRect.Max(ui => ui.Value.Bottom);

                return new Size(availableSize.Width, maxBottom);
            }
            else
                return base.MeasureOverride(availableSize);
        }

        protected override Size ArrangeOverride(Size finalSize)
        {
            if (_columnCount > 0)
                foreach (KeyValuePair<UIElement, Rect> keyValuePair in _uiElementsRect)
                    keyValuePair.Key.Arrange(keyValuePair.Value);

            return base.ArrangeOverride(finalSize);
        }

        #endregion

        #region Private methods

        private int CalculateColumnCount(Size availableSize)
        {
            if (ItemMinWidth == 0 || Double.IsNaN(ItemMinWidth) || Double.IsInfinity(availableSize.Width))
                return 0;
            else
                return (int)Math.Floor(availableSize.Width / ItemMinWidth);
        }

        #endregion

        #region Private members

        int _columnCount = 0;

        IDictionary<UIElement, Rect> _uiElementsRect = new Dictionary<UIElement, Rect>();

        #endregion
    }
}

And here's an exemple, compared to a WrapPanel in which TextTrimming works:

<Window x:Class="WrapPanelTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WrapPanelTest"
        Title="MainWindow" 
        Height="480" 
        Width="640">

    <Window.Resources>

        <Style x:Key="TextBlockStyle" TargetType="{x:Type TextBlock}">
            <Setter Property="Text" Value="Lorem ipsum dolor sit amet, consectetur adipiscing elit."/>
            <Setter Property="TextTrimming" Value="CharacterEllipsis"/>
            <Setter Property="Margin" Value="1"/>
            <Setter Property="Background" Value="Silver"/>
        </Style>

    </Window.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <WrapPanel ItemWidth="200">
            <TextBlock Style="{StaticResource TextBlockStyle}"/>
            <TextBlock Style="{StaticResource TextBlockStyle}"/>
            <TextBlock Style="{StaticResource TextBlockStyle}"/>
            <TextBlock Style="{StaticResource TextBlockStyle}"/>
            <TextBlock Style="{StaticResource TextBlockStyle}"/>
            <TextBlock Style="{StaticResource TextBlockStyle}"/>
            <TextBlock Style="{StaticResource TextBlockStyle}"/>
            <TextBlock Style="{StaticResource TextBlockStyle}"/>
            <TextBlock Style="{StaticResource TextBlockStyle}"/>
        </WrapPanel>

        <local:ElasticWrapPanel ItemMinWidth="200" Grid.Row="1">
            <TextBlock Style="{StaticResource TextBlockStyle}"/>
            <TextBlock Style="{StaticResource TextBlockStyle}"/>
            <TextBlock Style="{StaticResource TextBlockStyle}"/>
            <TextBlock Style="{StaticResource TextBlockStyle}"/>
            <TextBlock Style="{StaticResource TextBlockStyle}"/>
            <TextBlock Style="{StaticResource TextBlockStyle}"/>
            <TextBlock Style="{StaticResource TextBlockStyle}"/>
            <TextBlock Style="{StaticResource TextBlockStyle}"/>
            <TextBlock Style="{StaticResource TextBlockStyle}"/>
        </local:ElasticWrapPanel>

    </Grid>
</Window>

You should see that in the WrapPanel the 3 dots appear at the end of each elements, but not in my panel.

Answer 1

Your TextBlocks don't have a size set, so are allowed to stretch as wide as they would like.

As an alternative, consider limiting their size in your MeasureOverride method

foreach (UIElement children in InternalChildren)
{
    children.Measure(availableSize);

    ((FrameworkElement)children).MaxWidth = ColumnWidth;

    // Other code
}