Skip to content

LiveTile

Tim Heuer edited this page Nov 9, 2012 · 3 revisions

LiveTile

What it is

LiveTile is meant to provide you with some UI that emulates what you see in UI and behavior on the Windows Start screen, but within your app. This is not a replacement or use for the actual Tile notifications for your app. The UI provided in the tiles are up to the app developer.

Usage

Declarative:

<callisto:LiveTile x:Name="liveTile2"
                       ItemsSource="{Binding}"
                       Grid.ColumnSpan="2"
                       Grid.Row="1"
                       BorderBrush="White" BorderThickness="1"
                       Margin="5" Background="#FF333333"
                       Direction="Left">
        <callisto:LiveTile.ItemTemplate>
            <DataTemplate>
                <Grid Margin="5">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    
                    <TextBlock Text="{Binding Name}" 
                                Foreground="White" FontSize="24"
                                FontFamily="Segoe UI Light" />
                    
                    <TextBlock Foreground="White" Text="{Binding Description}"
                                TextWrapping="Wrap"
                                TextTrimming="WordEllipsis" 
                                FontSize="14"
                                Grid.Row="1" />

                    <HyperlinkButton Content="read more..."
                                   Grid.Row="2" 
                                   HorizontalAlignment="Right"
                                   Tag="{Binding ReadMoreUri}"
                                   Foreground="LightGray"
                                   Click="OnReadMoreLink_Click" />
                </Grid>
            </DataTemplate>
        </callisto:LiveTile.ItemTemplate>
</callisto:LiveTile>

Example UI

LiveTile from Callisto

Known Issues

  • #65: LiveTiles showing double images on start