Elastic WrapPanel and TextTrimming
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 InternalCh开发者_开发问答ildren)
{
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.
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
}
精彩评论