Silverlight: Button template with texttrimming cut off

Question

I'm replacing the default Button template's ContentPresenter with a TextBlock, so the text can be trimmed when it's too long.

Works fine in WPF. In Silverlight the text gets pushed to one edge and cut off on the left, even when there's space on the right:

alt text

Template is nothing special, just replaced the ContentPresenter with the TextBlock:

            <Border x:Name="bdrBackground" 
            BorderBrush="{TemplateBinding BorderBrush}" 
            BorderThickness="{TemplateBinding BorderThickness}" 
            Background="{TemplateBinding Background}" />

        <Rectangle x:Name="rectMouseOverVisualElement"
            Opacity="0">
            <Rectangle.Fill>
                <SolidColorBrush x:Name="rectMouseOverColor" 
                    Color="{StaticResource MouseOverItemBgColor}"/>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle x:Name="rectPressedVisualElement" 
            Opacity="0" 
            Style="{TemplateBinding Tag}"/>

        <TextBlock x:Name="textblock" 
            Text="{TemplateBinding Content}" 
            TextTrimming="WordEllipsis"
            TextWrapping="NoWrap"
            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
            Margin="{TemplateBinding Padding}" 
            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>


        <Rectangle x:Name="rectDisabledVisualElement" 
            Opacity="0" 
            Style="{StaticResource RectangleDisabledStyle}"/>

        <Rectangle x:Name="rectFocusVisualElement" 
            Opacity="0" 
            Style="{StaticResource RectangleFocusStyle}"/>              

    </Grid>
</ControlTemplate>

How do I fix this?

More info: With the latest comment about HorizontalAlignment, it's clear that SL's implementation of TextTrimming differs from WPF's. In SL, TextTrimming only really works if the text is aligned left. SL isn't smart enough to align the text the way WPF does. For instance:

WPF button:

alt text

SL button with the textblock horizontalalignment = left:

alt text

SL button with textblock horizontalalignment = center:

alt text

Please provide the xaml of your template to help us help you :) — danbord, Dec 23 '10 at 01:29

score 3 · Accepted Answer · answered Dec 27 '10 at 18:04

3

There's an even simpler solution. I set the TextBlock's TextAlignment=Center. Works exactly like in WPF. Thanks for the help!

answered Dec 27 '10 at 18:04

dex3703

2,077
4
28
45

AnthonyWJones · Answer 2 · 2010-12-23T16:51:46.670

2

The problem will be that your HorizontalContentAlignment is set to "Center". Really WordEllipsis only makes sense when the HorizontalAlignment of the TextBlock is set to "Left".

Edit

Getting the desired behaviour try this:-

<Border HorizontalAlignment="Center"
    VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
    <TextBlock x:Name="textblock"
        Text="{TemplateBinding Content}"
        TextTrimming="WordEllipsis"
        TextWrapping="NoWrap"
        Margin="{TemplateBinding Padding}" />
</Border>

edited Dec 23 '10 at 16:51

answered Dec 23 '10 at 14:57

AnthonyWJones

187,081
35
232
306

This works, but this would make all button text flush left. How can I get the effect I have in WPF where the text is centered and trims if it's too long? – dex3703 Dec 23 '10 at 16:08

Silverlight: Button template with texttrimming cut off

2 Answers2