Click here to Skip to main content
15,891,431 members
Articles / Silverlight

Notification Control in Silverlight

Rate me:
Please Sign up or sign in to vote.
4.54/5 (14 votes)
26 Jan 2012CPOL1 min read 32K   1.6K   17  
A notification control for Silverlight that looks like the Windows 7 balloon tip.
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:Balloon">

    <local:AlignmentConverter x:Key="Converter"/>

    <Storyboard x:Key="Close">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)">
            <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>

    <Storyboard  x:Key="Open">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>

    <Style TargetType="local:Balloon">
        <Setter Property="FontSize" Value="13"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:Balloon">
                    <Grid>
                        <Grid.Effect>
                            <DropShadowEffect ShadowDepth="2" Direction="315"/>
                        </Grid.Effect>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Border Grid.Row="1" BorderBrush="Gray" BorderThickness="1" CornerRadius="5" Margin="{Binding Alignment, Converter={StaticResource Converter}, RelativeSource={RelativeSource TemplatedParent}, ConverterParameter=MainMargin}">
                            <Border.Background>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FFE7E8F1" Offset="1"/>
                                    <GradientStop Color="White"/>
                                    <GradientStop Color="#FFF3F4F6" Offset="0.472"/>
                                </LinearGradientBrush>
                            </Border.Background>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <Image Source="{TemplateBinding Icon}" Margin="5"/>
                                <TextBlock Margin="5" Grid.Column="1" Foreground="#FF28489F" Text="{TemplateBinding Header}" FontSize="16"
                                           VerticalAlignment="Center"/>
                                <ContentPresenter Margin="5" Grid.Column="1" Grid.Row="1"/>
                            </Grid>
                        </Border>
                        
                        <Path Data="M306.375,133.125L306.375,100.875L335.75,133.25" Stroke="Gray" Height="20" Fill="White" Margin="{Binding Alignment, Converter={StaticResource Converter}, RelativeSource={RelativeSource TemplatedParent}, ConverterParameter=Margin}"
                              StrokeThickness="1" Stretch="Uniform" Visibility="{Binding Alignment, Converter={StaticResource Converter}, RelativeSource={RelativeSource TemplatedParent}, ConverterParameter=bottom}" VerticalAlignment="Center" HorizontalAlignment="{Binding Alignment, Converter={StaticResource Converter}, RelativeSource={RelativeSource TemplatedParent}, ConverterParameter=Alignment}"/>

                        <Path Data="M306.375,133.125L306.375,100.875L335.75,133.25" Stroke="Gray" Height="20" Fill="#FFE7E8F1" Margin="{Binding Alignment, Converter={StaticResource Converter}, RelativeSource={RelativeSource TemplatedParent}, ConverterParameter=Margin}"
                              StrokeThickness="1" Stretch="Uniform" Grid.Row="2" Visibility="{Binding Alignment, Converter={StaticResource Converter}, RelativeSource={RelativeSource TemplatedParent}, ConverterParameter=top}" VerticalAlignment="Center" RenderTransformOrigin="0.5, 0.5" HorizontalAlignment="{Binding Alignment, Converter={StaticResource Converter}, RelativeSource={RelativeSource TemplatedParent}, ConverterParameter=Alignment}">
                            <Path.RenderTransform>
                                <ScaleTransform ScaleY="-1"/>
                            </Path.RenderTransform>
                        </Path>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
India India
Jawahar working as a Senior Development Engineer in Aditi Technologies,Bangalore, India. Specialist in all XAML frameworks. Very passionate on UX Design and Development. Skilled in Expression Blend, Design, WPF, Silverlight, Windows Phone 7/8, Windows 8. Good knowledge in Entity Framework, SQLite and SQL Server also. Also had good experience with PRISM, MVVM, Caliiburn Micro and other design patterns.

He developed few products for Syncfusion Inc. Also working on some freelancing projects. Worked as a lead developer of Metro Studio from Syncfusion Inc.

An active freelancer. http://xamlfactory.elance.com

http://about.me/jawahars

http://wpfplayground.com/

Comments and Discussions