文本超出范围时显示省略号(...)按钮 WPF

Question

我有一个宽度为 100 的 TextBlock。当文本长度很大时，我想显示该文本块中容纳的字符，并在文本旁边显示一个 (...) 按钮，以指定用户还有更多文本。单击该 (...) 按钮后，全文将显示在单独的弹出窗口中。

所以我希望每当文本长度超过文本块的大小时如何显示动态（...）按钮。请回答

Answer 1

这并不完全是你想要的，但它是一个类似的想法，只是使用了烘焙的东西：

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

因此，您有一个具有最大宽度的 TextBlock，当文本无法容纳时，它会显示省略号（“...”）。将鼠标悬停在 TextBlock 上将在工具提示中显示全文。

Answer 2

只需体验在按钮上添加省略号的相同要求，因此在此处添加解决方案

<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>

注意内容演示器中的资源。

Answer 3

我相信你想要的是设置 TextTrimming 属性。将其设置为 WordElilipsis 或 CharacterEllipsis 应该可以提供你所需要的。

Answer 4

我对这个问题的解决方案可能有点矫枉过正，但允许进行一些配置和控制。 我创建了一个行为，允许我设置每个绑定的字符限制。

 internal class EllipsisStringBehavior
{
    public static readonly DependencyProperty CharacterLimitDependencyProperty = DependencyProperty.RegisterAttached("CharacterLimit", typeof(int), typeof(EllipsisStringBehavior), new PropertyMetadata(255, null, OnCoerceCharacterLimit));
    public static readonly DependencyProperty InputTextDependencyProperty = DependencyProperty.RegisterAttached("InputText", typeof(string), typeof(EllipsisStringBehavior), new PropertyMetadata(string.Empty, OnInputTextChanged));

    // Input Text
    public static string GetInputText(DependencyObject dependencyObject)
    {
        return Convert.ToString(dependencyObject.GetValue(InputTextDependencyProperty));
    }
    public static void SetInputText(DependencyObject dependencyObject, string inputText)
    {
        dependencyObject.SetValue(InputTextDependencyProperty, inputText);
    }

    // Character Limit
    public static int GetCharacterLimit(DependencyObject dependencyObject)
    {
        return Convert.ToInt32(dependencyObject.GetValue(CharacterLimitDependencyProperty));
    }
    public static void SetCharacterLimit(DependencyObject dependencyObject, object characterLimit)
    {
        dependencyObject.SetValue(CharacterLimitDependencyProperty, characterLimit);
    }

    private static void OnInputTextChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        TextBlock textblock = (TextBlock)d;

        string input = e.NewValue == null ? string.Empty : e.NewValue.ToString();
        int limit = GetCharacterLimit(d);

        string result = input;

        if (input.Length > limit && input.Length != 0)
        {
            result = $"{input.Substring(0, limit)}...";
        }

        textblock.Text = result;
    }

    private static object OnCoerceCharacterLimit(DependencyObject d, object baseValue)
    {
        return baseValue;
    }
}

然后我只需将 using 添加到我的用户控件中...

<UserControl 
 xmlns:behavior="clr-namespace:My_APP.Helper.Behavior"
 d:DesignHeight="300" d:DesignWidth="300">

...并将该行为应用于我希望使用它的 TextBlock 控件。

<TextBlock Margin="0,8,0,8"
 behavior:EllipsisStringBehavior.CharacterLimit="10" 
 behavior:EllipsisStringBehavior.InputText="{Binding Path=DataContext.FeedItemTwo.Body, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
 Style="{StaticResource MaterialDesignSubheadingTextBlock}"  
 FontSize="14"/>

希望这有帮助。