Wrap text on secondary tile

345 views Asked by At

I want to show large text (about 20 characters) on secondary tile, but on mobile screen and desktop Start menu text looks different (mobile text displayed without clipping). Is there any way to make text wrapping in tile on mobile screen?

This is how text looks on desktop:
Text on Desktop tile

This is how text looks on mobile device:
Text on Mobile device tile

Code sample:

var secondaryTile = new SecondaryTile(Id.ToString(), 
"Large large large large large text","secondary_tile_id=" + Id,
uri150X150Logo, TileSize.Square150x150)
{
    VisualElements =
    {
        Square310x310Logo = uri310X310Logo,
        Square44x44Logo = uri44X44Logo,
        Square71x71Logo = uri71X71Logo,
        Wide310x150Logo = uri310X150Logo,
        Square150x150Logo = uri150X150Logo,
        ForegroundText = ForegroundText.Dark,
        ShowNameOnSquare150x150Logo = true,
        ShowNameOnSquare310x310Logo = true,
        ShowNameOnWide310x150Logo = true,
        BackgroundColor = Colors.White   
    },               
    RoamingEnabled = false,                
};        
await secondaryTile.RequestCreateAsync();
1

There are 1 answers

3
RoguePlanetoid On

You can wrap text, there's a link describing all the features of Adaptive Tiles at Adaptive Tile Templates – Schema and Documentation however link only answers aren't allowed so here's some details for text:

<text
  lang? = string
  hint-style? = textStyle
  hint-wrap? = boolean
  hint-maxLines? = integer
  hint-minLines? = integer
  hint-align? = "left" | "center" | "right" >
  <!-- text goes here -->
</text>

There's a hint-wrap property so can make sure the text wraps, there's some examples there but also recommend the Notifications Visualiser from the Store to help create them.