UWP:行数に基づいてTextBlockのテキストをトリミングする

タヴィエ

TextBlock3行目を超えた場合にテキストをトリミングして3行目の最後に「もっと見る」リンク(タップ可能)を表示したいUWPアプリケーションがあります

MaxLinesプロパティを使用できる行数を制限することは知っていますが、残りの行は存在しないかのように無視されます。ただし、テキストがもう少しあることをユーザーに知らせたいので、[もっと表示]リンクをタップして全文に移動できます。

どうすればそれを達成できますか?

アンドリー・クルプカ

拡張可能なテキストブロックを作成するためのすべてのステップを説明する良いトピック読んでください

また、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);
        }
    }
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Unixのテキストに基づいてレコードをフィルタリングする

分類Dev

rxjsのタイミングに基づいてイベントのストリームを処理する

分類Dev

perlの行番号に基づいて行をトリミングするには

分類Dev

文字列の長さに基づいて文字列をトリミングする

分類Dev

Excelでの位置に基づいてテキストの複数のリストをランク付けする

分類Dev

テキストブロック内の単一の値に基づいてテキストブロックをフィルタリングする

分類Dev

WordPressのカテゴリに基づいてテキストを表示する

分類Dev

Adaptive TextBlock:幅に基づいてテキストを変更します。できればXAMLのみのソリューション

分類Dev

他のリストに基づいて1つのリストをストリーミングおよびフィルタリングする

分類Dev

行のテキストに基づいてテーブル内のリンクをクリックする方法

分類Dev

時刻に基づいて動的テキストをレンダリングする-Angular7

分類Dev

テキストボックスの値に基づいてリストボックスの値をフィルタリングする方法

分類Dev

テキストに基づいてボタンをクリックする

分類Dev

名前リストに基づいてパンダ列のテキストを変更する

分類Dev

リッチテキストウィジェットからの入力に基づいてHTLで電話リンクをレンダリングする

分類Dev

背景に基づいてテキストの色を表示する

分類Dev

Python-複数のキーに基づいて辞書のリストをフィルタリングする

分類Dev

JsonArrayのキーの値に基づいてリストをフィルタリングする方法

分類Dev

RethinkDBのリスト値の外部キーに基づいて結合をフィルタリングする

分類Dev

テキスト入力に基づいてdivをフィルタリングする

分類Dev

RactiveJS:テキスト入力値に基づいてDIV要素をフィルタリングする

分類Dev

jQuery:テキスト値に基づいて<a>リンクをグループ化する

分類Dev

PyQtを使用して角度に基づいて画像をトリミングする

分類Dev

BeautifulSoupとの特定のリンクに基づいてテキストをスクレイプする方法は?

分類Dev

キーの戻りリストに基づいてHashMapをフィルタリングする

分類Dev

キーに基づいてPythonで辞書のリストをフィルタリングする

分類Dev

白い線に基づいて画像をトリミングする方法

分類Dev

Googleスプレッドシートクエリ>文字列内のテキストに基づいて行をフィルタリングする

分類Dev

ifステートメントに基づいてグリッドビューの画像を設定する

Related 関連記事

  1. 1

    Unixのテキストに基づいてレコードをフィルタリングする

  2. 2

    rxjsのタイミングに基づいてイベントのストリームを処理する

  3. 3

    perlの行番号に基づいて行をトリミングするには

  4. 4

    文字列の長さに基づいて文字列をトリミングする

  5. 5

    Excelでの位置に基づいてテキストの複数のリストをランク付けする

  6. 6

    テキストブロック内の単一の値に基づいてテキストブロックをフィルタリングする

  7. 7

    WordPressのカテゴリに基づいてテキストを表示する

  8. 8

    Adaptive TextBlock:幅に基づいてテキストを変更します。できればXAMLのみのソリューション

  9. 9

    他のリストに基づいて1つのリストをストリーミングおよびフィルタリングする

  10. 10

    行のテキストに基づいてテーブル内のリンクをクリックする方法

  11. 11

    時刻に基づいて動的テキストをレンダリングする-Angular7

  12. 12

    テキストボックスの値に基づいてリストボックスの値をフィルタリングする方法

  13. 13

    テキストに基づいてボタンをクリックする

  14. 14

    名前リストに基づいてパンダ列のテキストを変更する

  15. 15

    リッチテキストウィジェットからの入力に基づいてHTLで電話リンクをレンダリングする

  16. 16

    背景に基づいてテキストの色を表示する

  17. 17

    Python-複数のキーに基づいて辞書のリストをフィルタリングする

  18. 18

    JsonArrayのキーの値に基づいてリストをフィルタリングする方法

  19. 19

    RethinkDBのリスト値の外部キーに基づいて結合をフィルタリングする

  20. 20

    テキスト入力に基づいてdivをフィルタリングする

  21. 21

    RactiveJS:テキスト入力値に基づいてDIV要素をフィルタリングする

  22. 22

    jQuery:テキスト値に基づいて<a>リンクをグループ化する

  23. 23

    PyQtを使用して角度に基づいて画像をトリミングする

  24. 24

    BeautifulSoupとの特定のリンクに基づいてテキストをスクレイプする方法は?

  25. 25

    キーの戻りリストに基づいてHashMapをフィルタリングする

  26. 26

    キーに基づいてPythonで辞書のリストをフィルタリングする

  27. 27

    白い線に基づいて画像をトリミングする方法

  28. 28

    Googleスプレッドシートクエリ>文字列内のテキストに基づいて行をフィルタリングする

  29. 29

    ifステートメントに基づいてグリッドビューの画像を設定する

ホットタグ

アーカイブ