Thursday 31 May 2012

Silverlight Metro Info Tile

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

prototype

 

MetroInfoTile

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

No comments:

Post a Comment