Skip to content

Tile

Jump to bottom
meisam alifallahi edited this page Mar 30, 2022 · 1 revision

Simple Using

    <Tile Color="Background.Success" Title="Param 1" Prefix="$" Value="93" Suffix="%" />
    <Tile Color="Background.Warning" Title="Param 2" Prefix="$" Value="52" Suffix="%" />
    <Tile Color="Background.Danger"  Title="Param 3" Prefix="$" Value="37" Suffix="%" />
    <Tile Color="Background.Info"    Title="Param 4" Prefix="$" Value="60" Suffix="%"/>

1

Adjust Alignment

    <Tile Color="Background.Success" Alignment="TileAlignment.Start"   Title="Param 1" Prefix="$" Value="93" Suffix="%" />
    <Tile Color="Background.Warning" Alignment="TileAlignment.Center"  Title="Param 2" Prefix="$" Value="52" Suffix="%" />
    <Tile Color="Background.Danger"  Alignment="TileAlignment.Center"  Title="Param 3" Prefix="$" Value="37" Suffix="%" />
    <Tile Color="Background.Info"    Alignment="TileAlignment.End"     Title="Param 4" Prefix="$" Value="60" Suffix="%"/>

2

Customize Prefix & Suffix

        <Tile Color="Background.Warning" Alignment="TileAlignment.Center" Value="52" Title="Param 2">
          <SuffixContent>
            <Icon TextColor="TextColor.Danger" Name="IconName.ArrowUp"></Icon>
          </SuffixContent>
          <PrefixContent>
            <Icon TextColor="TextColor.White" Name="IconName.Cloud"></Icon>
          </PrefixContent>
       </Tile>
       <Tile Color="Background.Danger" Alignment="TileAlignment.Center" Value="37" Title="Param 3" Prefix="$" Suffix="%">
          <SuffixContent>
            <Span>😁</Span>
          </SuffixContent>
          <PrefixContent>
            <Span Style="font-size: x-large" TextColor="TextColor.White" >$</Span>
          </PrefixContent>
    </Tile>

3

Customize Entire Value

    <Tile Color="Background.Body" Alignment="TileAlignment.Center" Title="Param 1">
        <Figure Size="FigureSize.Is128x128">
            <FigureImage Source="images/ch2.png" AlternateText="empty-128x128" />
        </Figure>
    </Tile>
    <Tile Color="Background.Danger" Alignment="TileAlignment.Center" Title="Param 2">
        <Figure Size="FigureSize.Is128x128">
            <FigureImage Source="images/ch4.png" AlternateText="empty-128x128" />
        </Figure>
    </Tile>
    <Tile Color="Background.Success" Alignment="TileAlignment.Center" Title="Param 3">
        <Figure Size="FigureSize.Is128x128">
            <FigureImage Source="images/ch3.png" AlternateText="empty-128x128" />
        </Figure>
    </Tile>
    <Tile Color="Background.Warning" Alignment="TileAlignment.Center" Title="Param 4">
        <Figure Size="FigureSize.Is128x128">
            <FigureImage Source="images/ch1.png" AlternateText="empty-128x128" />
        </Figure>
    </Tile>

4

Clone this wiki locally