Sunday 29 April 2012

UIMessage for Silverlight

Here is a shameless (and less functional) copy of the great little JavaScript project by Hans Fjällemark and John Papa https://github.com/KnockedUp/toastR.

The UIMessage control also works in WPF.

Demo (please click the submit button)

Other Message Types

errorquestioninfo

How to use UIMessage

<UserControl x:Class="UIMessageDemo_SL5.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:UIMessageDemo_SL5"
Width="400"
Height="150">

<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>

<Button x:Name="btnShowMessage"
Grid.Column="0"
Width="80"
Height="50"
Click="btnShowMessage_Click"
Content="Submit" />

<local:UIMessage x:Name="Message"
Grid.Column="1"
MessageType="Success"
Text="Success" />

</Grid>

</UserControl>

How to open UIMessage

using System.Windows;

namespace UIMessageDemo_SL5
{
public partial class MainPage
{
public MainPage()
{
InitializeComponent();
}

private void btnShowMessage_Click(object sender, RoutedEventArgs e)
{
Message.Show();
}
}
}

UIMessage.xaml

<UserControl x:Class="UIMessageDemo_SL5.UIMessage"
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"
x:Name="UIMessageControl"
d:DesignHeight="300"
d:DesignWidth="400"
mc:Ignorable="d">
<UserControl.Resources>
<SolidColorBrush x:Key="ErrorBrush" Color="#D5BD3630" />
<SolidColorBrush x:Key="InfoBrush" Color="#D759ABC3" />
<SolidColorBrush x:Key="SuccessBrush" Color="#E151A351" />
<SolidColorBrush x:Key="QuestionBrush" Color="#DCF9A938" />
<BitmapImage x:Key="ErrorImage" UriSource="images/error.png" />
<BitmapImage x:Key="InfoImage" UriSource="images/info.png" />
<BitmapImage x:Key="SuccessImage" UriSource="images/success.png" />
<BitmapImage x:Key="QuestionImage" UriSource="images/question.png" />
<Storyboard x:Key="FadeIn">
<DoubleAnimation BeginTime="0"
Duration="00:00:02"
From="0"
Storyboard.TargetName="Display"
Storyboard.TargetProperty="Opacity"
To="1" />
</Storyboard>
<Storyboard x:Key="FadeOut">
<DoubleAnimation BeginTime="00:00:01"
Duration="00:00:02"
From="1"
Storyboard.TargetName="Display"
Storyboard.TargetProperty="Opacity"
To="0" />
</Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">

<Border x:Name="Display"
Width="150"
Height="70"
Background="Pink"
CornerRadius="5"
Opacity="0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<Image x:Name="Icon"
Grid.Row="0"
Grid.Column="0"
Width="30"
Height="30"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Stretch="Uniform" />
<TextBlock Grid.Column="1"
VerticalAlignment="Center"
Foreground="White"
Text="{Binding Path=Text,
ElementName=UIMessageControl,
UpdateSourceTrigger=PropertyChanged}" />
</Grid>
</Border>
</Grid>
</UserControl>


UIMessage.xaml.cs

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;

namespace UIMessageDemo_SL5
{
public enum MessageType
{
NotSet = 0,
Error,
Info,
Success,
Question
}
public partial class UIMessage : UserControl
{
#region Fields

private SolidColorBrush _errorBrush;
private SolidColorBrush _infoBrush;
private SolidColorBrush _successBrush;
private SolidColorBrush _questionBrush;

private BitmapImage _errorImage;
private BitmapImage _infoImage;
private BitmapImage _successImage;
private BitmapImage _questionImage;

private Storyboard _fadeInStoryboard;
private Storyboard _fadeOutStoryboard;

#endregion

#region Constructor

public UIMessage()
{
InitializeComponent();
CheckResourcesAreAvailable();

_fadeInStoryboard.Completed += (sender, args) => _fadeOutStoryboard.Begin();
}

#endregion

#region Dependency Properties: MessageType, Text

public static readonly DependencyProperty TypeProperty =
DependencyProperty.Register("MessageType",
typeof(MessageType),
typeof(UIMessage),
new PropertyMetadata(MessageType.NotSet, TypePropertyChanged));

private static void TypePropertyChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs dependencyPropertyChangedEventArgs)
{
var uiMessage = (UIMessage)dependencyObject;
uiMessage.Display.SetValue(Border.BackgroundProperty, uiMessage.GetBrush(uiMessage.MessageType));
uiMessage.Icon.SetValue(Image.SourceProperty, uiMessage.GetImage(uiMessage.MessageType));
}

public MessageType MessageType
{
get { return (MessageType)GetValue(TypeProperty); }
set { SetValue(TypeProperty, value); }
}

public static readonly DependencyProperty TextProperty =
DependencyProperty.Register("Text",
typeof(string),
typeof(UIMessage),
new PropertyMetadata(default(string)));

public string Text
{
get { return (string)GetValue(TextProperty); }
set { SetValue(TextProperty, value); }
}

#endregion

#region Methods

private void CheckResourcesAreAvailable()
{
_errorBrush = (SolidColorBrush)this.Resources["ErrorBrush"];
_infoBrush = (SolidColorBrush)this.Resources["InfoBrush"];
_successBrush = (SolidColorBrush)this.Resources["SuccessBrush"];
_questionBrush = (SolidColorBrush)this.Resources["QuestionBrush"];
_errorImage = (BitmapImage)this.Resources["ErrorImage"];
_infoImage = (BitmapImage)this.Resources["InfoImage"];
_successImage = (BitmapImage)this.Resources["SuccessImage"];
_questionImage = (BitmapImage)this.Resources["QuestionImage"];
_fadeInStoryboard = (Storyboard)this.Resources["FadeIn"];
_fadeOutStoryboard = (Storyboard)this.Resources["FadeOut"];

if (_errorBrush == null) throw new Exception("Missing ErrorBrush resource");
if (_infoBrush == null) throw new Exception("Missing InfoBrush resource");
if (_successBrush == null) throw new Exception("Missing SuccessBrush resource");
if (_questionBrush == null) throw new Exception("Missing QuestionBrush resource");
if (_errorImage == null) throw new Exception("Missing BitmapImage ErrorImage resource");
if (_infoImage == null) throw new Exception("Missing BitmapImage InfoImage resource");
if (_successImage == null) throw new Exception("Missing BitmapImage SuccessImage resource");
if (_questionImage == null) throw new Exception("Missing BitmapImage QuestionImage resource");
if (_fadeInStoryboard == null) throw new Exception("Missing Storyboard FadeIn resource");
if (_fadeOutStoryboard == null) throw new Exception("Missing Storyboard FadeOut resource");
}

private SolidColorBrush GetBrush(MessageType type)
{
SolidColorBrush brush = null;
switch (type)
{
case MessageType.Info:
brush = _infoBrush;
break;
case MessageType.Error:
brush = _errorBrush;
break;
case MessageType.Success:
brush = _successBrush;
break;
case MessageType.Question:
brush = _questionBrush;
break;
}
return brush;
}

private BitmapImage GetImage(MessageType type)
{
BitmapImage image = null;
switch (type)
{
case MessageType.Info:
image = _infoImage;
break;
case MessageType.Error:
image = _errorImage;
break;
case MessageType.Success:
image = _successImage;
break;
case MessageType.Question:
image = _questionImage;
break;
}
return image;
}

public void Show()
{
_fadeInStoryboard.Begin();
}

#endregion
}
}

Source

http://stevenhollidge.com/blog-source-code/UIMessageDemo_SL5.zip

http://stevenhollidge.com/blog-source-code/UIMessageDemo_WPF.zip

No comments:

Post a Comment