Silverlight Metro Info Tile

A quick prototype for displaying information in a clear and consistent manner in the Metro style.

 

These tiles could be used to present constituents of a package, perhaps with the addition of a metric in the top right hand corner to visualise risk or projected yields.

It doesn’t currently support passing in a tree, dynamic sizing or an info section either statically positioned on the page or a popup / tooltip of some kind.

Here’s the code for the basic prototype:

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace MetroInfoTiles
{
    public class DisplayTile : Control
    {
        public static readonly DependencyProperty TitleTextProperty =
            DependencyProperty.Register("TitleText", typeof (string), typeof (DisplayTile), new PropertyMetadata(default(string)));

        public string TitleText
        {
            get { return (string) GetValue(TitleTextProperty); }
            set { SetValue(TitleTextProperty, value); }
        }

        public static readonly DependencyProperty DescriptionTextProperty =
            DependencyProperty.Register("DescriptionText", typeof (string), typeof (DisplayTile), new PropertyMetadata(default(string)));

        public string DescriptionText
        {
            get { return (string) GetValue(DescriptionTextProperty); }
            set { SetValue(DescriptionTextProperty, value); }
        }

        public static readonly DependencyProperty SideBarColourProperty =
            DependencyProperty.Register("SideBarColour", typeof (SolidColorBrush), typeof (DisplayTile), new PropertyMetadata(default(SolidColorBrush)));

        public SolidColorBrush SideBarColour
        {
            get { return (SolidColorBrush) GetValue(SideBarColourProperty); }
            set { SetValue(SideBarColourProperty, value); }
        }
    }
}

 

<Application x:Class="MetroInfoTiles.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:MetroInfoTiles"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d">
    <Application.Resources>
        <Style TargetType="local:DisplayTile">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="local:DisplayTile">
                        <Grid>
                            <Border x:Name="OuterBorder"
                                    Width="350"
                                    Height="120"
                                    Background="#FFF2F2F2"
                                    BorderBrush="#FFB5B5B5"
                                    BorderThickness="1,1,1,1"
                                    CornerRadius="5">
                                <Grid>
                                    <Border x:Name="SideBarBorder"
                                            Width="5"
                                            Margin="-1,-1,0,-1"
                                            HorizontalAlignment="Left"
                                            Background="{TemplateBinding SideBarColour}"
                                            CornerRadius="5,0,0,5" />
                                    <TextBlock x:Name="TitleTextBlock"
                                               Height="35.4700012207031"
                                               Margin="20,5,20,0"
                                               VerticalAlignment="Top"
                                               FontFamily="/MetroInfoTiles;component/Fonts/Fonts.zip#Segoe UI Light"
                                               FontSize="20"
                                               Foreground="#FF686868"
                                               Text="{TemplateBinding TitleText}" />
                                    <TextBlock x:Name="DescriptionTextBlock"
                                               Height="35"
                                               Margin="20,0,20,10"
                                               VerticalAlignment="Bottom"
                                               FontFamily="/MetroInfoTiles;component/Fonts/Fonts.zip#Segoe UI"
                                               FontSize="12"
                                               Foreground="#FF686868"
                                               Text="{TemplateBinding DescriptionText}"
                                               TextWrapping="Wrap" />
                                </Grid>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <SolidColorBrush x:Key="LevelOneBrush" Color="#FFFAA634" />
        <SolidColorBrush x:Key="LevelZeroBrush" Color="#FF5DA9DD" />
        <SolidColorBrush x:Key="ConnectionBrush" Color="#FF8B8B8B"/>
    </Application.Resources>
</Application>

<UserControl x:Class="MetroInfoTiles.MainPage"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
             xmlns:l="clr-namespace:MetroInfoTiles"
             Width="850"
             Height="350"
             xml:space="preserve">
    <Canvas>
        <l:DisplayTile x:Name="LevelZeroDisplayTile"
                       Canvas.Left="250"
                       Canvas.Top="50"
                       DescriptionText="High level description for package, dashboard symbols for movements or value indicators for yields, rates etc."
                       SideBarColour="{StaticResource LevelZeroBrush}"
                       TitleText="FX Swap: 1,000 EURO" />
        <l:DisplayTile x:Name="LevelOneDisplayTileSpot"
                       Canvas.Left="50"
                       Canvas.Top="200"
                       DescriptionText="Date: 31 May 2012 09:02:31  USD = 0.806884&#10;Posted trade, settlement timeframe 2 days."
                       SideBarColour="{StaticResource LevelOneBrush}"
                       TitleText="FX Spot" />
        <l:DisplayTile x:Name="LevelOneDisplayTileForward"
                       Canvas.Left="450"
                       Canvas.Top="200"
                       DescriptionText="Date: 15 June 2012 09:02:31  Estimated USD = 0.78219&#10;Posted trade, current price as of 31 May 2012 09:05:31"
                       SideBarColour="{StaticResource LevelOneBrush}"
                       TitleText="FX Forward" />
        <l:VConnection Height="30" Canvas.Left="200" Canvas.Top="170" Width="451"/>
    </Canvas>
</UserControl>

 

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
    mc:Ignorable="d"
    x:Class="MetroInfoTiles.VConnection"
    d:DesignWidth="451" d:DesignHeight="30">

    <Grid x:Name="LayoutRoot">
        <ed:LineArrow
            Height="15"
            ArrowSize="0"
            BendAmount="0"
            EndArrow="NoArrow"
            Fill="#FFF4F4F5"
            Stroke="{StaticResource ConnectionBrush}"
            Margin="225,0"
            VerticalAlignment="Top" />
        <ed:LineArrow
            Height="1"
            ArrowSize="0"
            BendAmount="0"
            EndArrow="NoArrow"
            Fill="#FFF4F4F5"
            Stroke="{StaticResource ConnectionBrush}"
            Margin="0,0,1,14"
            VerticalAlignment="Bottom" />
        <ed:LineArrow
            Width="1"
            Height="15"
            ArrowSize="0"
            BendAmount="0"
            EndArrow="NoArrow"
            Fill="#FFF4F4F5"
            Stroke="{StaticResource ConnectionBrush}"
            HorizontalAlignment="Left"
            VerticalAlignment="Bottom" />
        <ed:LineArrow
            Width="1"
            Height="15"
            ArrowSize="0"
            BendAmount="0"
            EndArrow="NoArrow"
            Fill="#FFF4F4F5"
            Stroke="{StaticResource ConnectionBrush}"
            HorizontalAlignment="Right"
            VerticalAlignment="Bottom" />
    </Grid>
</UserControl>

Full source:  http://stevenhollidge.com/blog-source-code/MetroInfoTiles.zip