WPF TextBlock overflow in Viewbox

Question

I want to have a TextBlock in the ViewboxPanel control with TextTrimming, but in order to do so, the TextBlock must have a width. But how come the width has nothing to do with the shown width when in the ViewboxPanel?

<Window x:Class="SizeTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:converters="clr-namespace:SizeTest.Utils.Converters;assembly=SizeTest.Utils"
        xmlns:controls="clr-namespace:SizeTest.Utils.Controls;assembly=SizeTest.Utils"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <ResourceDictionary>
            <converters:MarginConverter x:Key="MarginConverter"/>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <controls:ViewboxPanel HorizontalAlignment="Left">
            <controls:ViewboxPanel.Margin>
                <MultiBinding Converter="{StaticResource MarginConverter}" ConverterParameter="0;40;0;40">
                    <Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}" Path="ActualHeight" />
                    <Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}" Path="ActualWidth" />
                </MultiBinding>
            </controls:ViewboxPanel.Margin>
            <TextBlock Text="fgghgfhdfgfgsdfdsfdsfdsfsdf" Width="130" TextTrimming="CharacterEllipsis" />
        </controls:ViewboxPanel>

    </Grid>
</Window>

Control:

public class ViewboxPanel : Panel
        {
            private double scale;

            protected override Size MeasureOverride(Size availableSize)
            {
                double height = 0;
                Size unlimitedSize = new Size(double.PositiveInfinity, double.PositiveInfinity);
                foreach (UIElement child in Children)
                {
                    child.Measure(unlimitedSize);
                    height += child.DesiredSize.Height;
                }
                scale = availableSize.Height / height;

                return availableSize;
            }

            protected override Size ArrangeOverride(Size finalSize)
            {
                Transform scaleTransform = new ScaleTransform(scale, scale);
                double height = 0;
                foreach (UIElement child in Children)
                {
                    child.RenderTransform = scaleTransform;
                    child.Arrange(new Rect(new Point(0, scale * height), new Size(finalSize.Width / scale, child.DesiredSize.Height)));
                    height += child.DesiredSize.Height;
                }

                return finalSize;
            }
        }

The ViewboxPanel is controlled by margin and percentage. But why does the width of 130 of the TextBlock match the width of the ViewboxPanel which is 525 (by the window width)?

I want to be able to resize the window and the width of the textblock should follow so it shows/hides the text by trimming it. So the Width of the textblock should be bind to the width of the grid its in, like this:

Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}, Path=ActualWidth}"

But i can't see why 525 wouldn't be correct!?

What is the purpose of the ViewBox? Can you replace it with some panel, or just add the Textblock directly under the Grid? — ShayD
The purpose is to control the size of the text. In my final app, the viewbox is controlled through it's margins and set by percentage. — Lasse O
ViewBox is certainly not what you need here. Consider using some Panel or a Border instead. — ShayD
Actually i'm using this example now, as it solves another problem. This is based on a Panel, but have the same problem. stackoverflow.com/questions/4542835/… — Lasse O
I have updated the description width more realistic usage by my app. — Lasse O

Sheridan Sheridan · Accepted Answer · 2014-12-23T13:50:21

You seem to have misunderstood the purpose of the ViewBox control. From the linked page on MSDN:

Defines a content decorator that can stretch and scale a single child to fill the available space.

In order to get your desired effect of changing what point the character ellipsis starts, you need to change the Width of the TextBlock, not the ViewBox.

WPF TextBlock overflow in Viewbox

2 Answers