Question

我有一个UWP应用程序，我希望修剪TextBlock的文本，如果它超出第三行并在第3行的末尾显示“show more”链接（tappable）。

我知道要限制我可以使用MaxLines属性的行数，但它只是忽略其余行，就好像它们不存在一样。但我想让用户知道还有更多的文字，他可以点击节目更多链接导航到全文。

我怎样才能实现它？

Answer 1

阅读描述创建可扩展文本块的所有步骤的good topic

另外，请查看github

上的源代码

以下是XAML代码：

 <Grid x:Name="LayoutRoot" Tapped="LayoutRoot_OnTap">
     <Grid.RowDefinitions>
          <RowDefinition Height = "Auto" />
          <RowDefinition Height="Auto" />
      </Grid.RowDefinitions>

      <TextBlock Grid.Row="0" 
                  x:Name= "CommentTextBlock"
                  HorizontalAlignment= "Left"
                  TextWrapping= "Wrap"
                  Height= "Auto"
                  Width= "280" />

      < StackPanel Grid.Row= "1"
                  Orientation= "Horizontal"
                  HorizontalAlignment= "Right"
                  x:Name= "ExpandHint"
                  Visibility= "Collapsed"
                  Margin= "0,5,0,0" >
          < TextBlock  Text= "View More" />
           < TextBlock Margin= "10,0,10,0"
        Text= "+" />
      </ StackPanel >
</ Grid >

这是C＃部分

public sealed partial class ExpandableTextBlock : UserControl
{
   public ExpandableTextBlock()
    {
        this.InitializeComponent();
    }

    public static readonly DependencyProperty TextProperty = DependencyProperty.Register(
        "Text", typeof(string), typeof(ExpandableTextBlock), new PropertyMetadata(default(string), OnTextChanged));

    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }

    private static void OnTextChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var ctl = (ExpandableTextBlock)d;
        ctl.CommentTextBlock.SetValue(TextBlock.TextProperty, (string)e.NewValue);
        ctl.CommentTextBlock.SetValue(TextBlock.HeightProperty, Double.NaN);

        ctl.CommentTextBlock.Measure(new Size(ctl.CommentTextBlock.Width, double.MaxValue));

        double desiredheight = ctl.CommentTextBlock.DesiredSize.Height;
        ctl.CommentTextBlock.SetValue(TextBlock.HeightProperty, (double)63);

        if (desiredheight > (double)ctl.CommentTextBlock.GetValue(TextBlock.HeightProperty))
        {
            ctl.ExpandHint.SetValue(StackPanel.VisibilityProperty, Visibility.Visible);
            ctl.MaxHeight = desiredheight;
        }
        else
        {
            ctl.ExpandHint.SetValue(StackPanel.VisibilityProperty, Visibility.Collapsed);
        }

        //Setting length of comments
        var boundsWidth = Window.Current.Bounds.Width;
        ctl.CommentTextBlock.SetValue(TextBlock.WidthProperty, boundsWidth);
    }

    public static readonly DependencyProperty CollapsedHeightProperty = DependencyProperty.Register(
        "CollapsedHeight", typeof(double), typeof(ExpandableTextBlock), new PropertyMetadata(default(double), OnCollapsedHeightChanged));


    public double CollapsedHeight
    {
        get { return (double)GetValue(CollapsedHeightProperty); }
        set { SetValue(CollapsedHeightProperty, value); }
    }

    private static void OnCollapsedHeightChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var ctl = (ExpandableTextBlock)d;
        ctl.CollapsedHeight = (double)e.NewValue;
    }


    public static readonly DependencyProperty TextStyleProperty = DependencyProperty.Register(
       "TextStyle", typeof(Style), typeof(ExpandableTextBlock), new PropertyMetadata(default(Style), OnTextStyleChanged));

    public Style TextStyle
    {
        get { return (Style)GetValue(TextStyleProperty); }
        set { SetValue(TextStyleProperty, value); }
    }

    private static void OnTextStyleChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var ctl = (ExpandableTextBlock)d;
        ctl.CommentTextBlock.SetValue(StyleProperty, (Style)e.NewValue);
    }

    private void LayoutRoot_OnTap(object sender, TappedRoutedEventArgs tappedRoutedEventArgs)
    {
       if ((Visibility)this.ExpandHint.GetValue(StackPanel.VisibilityProperty) == Visibility.Visible)
        {
            //transition
            this.CommentTextBlock.SetValue(TextBlock.HeightProperty, Double.NaN);

            this.ExpandHint.SetValue(StackPanel.VisibilityProperty, Visibility.Collapsed);
        }
    }
}

UWP：根据行数修剪TextBlock的文本

1 个答案: