Card - Text Trimming / Custom Title Content

Fundamentals for Avalonia Forum

Posted 2 days ago by Dirk Zellerfeld
Avatar

Would be nice if we could trim text on card for the title and disable word wrap. Alternatively add a way so we can use a textblock as title content.

Comments (1)

Answer - Posted 4 hours ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Before getting into detail, I want to emphasize that Card has a Header and HeaderTemplate that are used to define the header of the control.  By default, there is no Header.  There is, however, a default HeaderTemplate that uses the Title and Description string properties as part of its template, but this default HeaderTemplate is only used if the Header property is undefined.

That means if you define your own Header, the default HeaderTemplate (with Title and Description) is not applied and your explicit Header is displayed directly.  At this point you could also define an explicit HeaderTemplate to be used with your Header.  So if you really want to customize the header content, just set the Header property to whatever you want.  That includes using a TextBlock as the title content and/or setting the desired settings for trimming and word wrap.  The following help topic shows using a TextBlock in a custom header:

https://www.actiprosoftware.com/docs/controls/avalonia/fundamentals/controls/card#header

If you just want to change trimming and word wrap, you can do so using the TitleTheme and DescriptionTheme properties.  The default HeaderTemplate applies each of these themes to the TextBlock controls that display the Title and Description properties, respectively.  The following shows how to customize the TitleTheme to use text trimming and no word wrap (setting TextWrapping to NoWrap is technically not necessary since it is the default, but shown for illustrative purposes):

<actipro:Card Title="Card Title that can get long and should get trimmed"
  Description="The description is integrated into the header.">

  <actipro:Card.TitleTheme>
    <ControlTheme TargetType="TextBlock">
      <Setter Property="FontFamily" Value="{actipro:ThemeResource HeadingFontFamily}" />
      <Setter Property="FontSize" Value="{actipro:ThemeResource HeadingFontSizeSmall}" />
      <Setter Property="FontWeight" Value="{actipro:ThemeResource HeadingFontWeightSmall}" />
      <Setter Property="TextTrimming" Value="CharacterEllipsis" />
      <Setter Property="TextWrapping" Value="NoWrap" />
    </ControlTheme>
   </actipro:Card.TitleTheme>
	
    <!-- Card Content -->
	
</actipro:Card>


Actipro Software Support

Add Comment

Please log in to a validated account to post comments.