TextBlock
3行目を超えた場合にテキストをトリミングして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]
コメントを追加