Show Ellipsis(...) Button When Text Exceeds Range WPF

Question

I have one TextBlock having width say 100. When the text length is a large one I want to show the characters that is accomodated in that textblock and a (...) button besides the text to specify user that more text is also there. Upon click on that (...) button, the full text will be shown in a separate pop up window.

So i want how the dynamic (...) button will be shown whenever the text length exceed the size of the textblock. Please answer

Answer 1

This isn't exactly what you want, but it's a similar idea and just uses the baked-in stuff:

<TextBlock MaxWidth="200"
           Text="{Binding YourLongText}"
           TextTrimming="WordEllipsis"
           ToolTip="{Binding YourLongText}" />

So you have a TextBlock with a maximum width, and when the text can't fit it displays an ellipsis ("..."). Hovering over the TextBlock with your mouse will show the full text in a ToolTip.

Answer 2

Just experience the same requirement for adding ellipsis on button so adding the solution here

<Style x:Key="editButton" TargetType="{x:Type Button}">
            <Setter Property="Background" Value="Transparent" />                          
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Left" VerticalAlignment="Center" >
                                <ContentPresenter.Resources>
                                    <Style TargetType="TextBlock">
                                        <Setter Property="TextTrimming" Value="CharacterEllipsis"></Setter>
                                    </Style>
                                </ContentPresenter.Resources>
                            </ContentPresenter>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Transparent"/>                      
                </Trigger>
            </Style.Triggers>
        </Style>

Notice the resources in content presenter.