Sharker Khaleed Mahmud Silverlight Tips & Tricks

October 29, 2010

92. Animated Note Control using Triggers in Silverlight

Filed under: Silverlight — Tags: , , — Sharker Khaleed Mahmud | shamrat231 @ 10:25 PM

[tweetmeme source=”shamrat231” only_single=false]

In this entry, I am going to create a simple note control. Let’s look at the initial code I have written below. The idea is that the control should be very simple and easy to create. Create a class and name it say…SlideNoteControl and then refer this control to your Mainpage.xaml where controls: is the namespace of the project.

You can see the live example here [live demo]

The SOURCE CODE(.zip) is at the end of the page for download.

SlideNoteControl.cs

    public class SlideNoteControl : ContentControl
    {
        public SlideNoteControl()
            : base()
        {
            this.DefaultStyleKey = typeof(SlideNoteControl);
        }

        public static readonly DependencyProperty NoteProperty = DependencyProperty
            .Register(“Note”, typeof(UIElement), typeof(SlideNoteControl), null);

        public UIElement Note
        {
            get { return (UIElement)this.GetValue(SlideNoteControl.NoteProperty); }
            set { this.SetValue(SlideNoteControl.NoteProperty, value); }
        }
    }

and here is how you use it in .xaml

So basically I created a dependency property to hold content for this note control. Now I will open blend and go to app.xaml to design this note control. Now think of what a note control needs…a border with a shadow and some text in it. So basically the controltemplate should define a simple note looks. Look at the .xaml below

App.xaml
        <!–SlideNoteControl–>
        <Style TargetType=”controls:SlideNoteControl”>
            <Setter Property=”Foreground” Value=”#FF000000″/>
            <Setter Property=”HorizontalContentAlignment” Value=”Left”/>
            <Setter Property=”VerticalContentAlignment” Value=”Top”/>
            <Setter Property=”Template”>
                <Setter.Value>
                    <ControlTemplate TargetType=”controls:SlideNoteControl”>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height=”Auto”/>
                            </Grid.RowDefinitions>
                            <Border BorderThickness=”1″ BorderBrush=”Black” Width=”{TemplateBinding Width}” Height=”{TemplateBinding Height}” Background=”{TemplateBinding Background}” Grid.Row=”0″>
                                <Border.Effect>
                                    <DropShadowEffect Color=”#FFE7E2E2″ BlurRadius=”10″ />
                                </Border.Effect>
                                <ContentPresenter Cursor=”{TemplateBinding Cursor}” ContentTemplate=”{TemplateBinding ContentTemplate}” Content=”{TemplateBinding Note}” HorizontalAlignment=”{TemplateBinding HorizontalContentAlignment}” VerticalAlignment=”{TemplateBinding VerticalContentAlignment}” Margin=”10″/>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>

and the output looks like this…the below image shows a readonly mode note. I say that this is readonly as i have used textblock only.

However, you can chang the textblock to any control that you feel like. For eg, if you want to write on the note….great use a TextBox.

MainPage.xaml

        <!–Read Only Note Control–>
        <controls:SlideNoteControl Height=”170″ Background=”#faeb76″ Margin=”0,0,10,10″ VerticalAlignment=”Bottom”>
            <controls:SlideNoteControl.Note>
                <TextBlock><Run Text=”Animated Note Sample Demo” FontWeight=”Black”/><Run Text=” “/><LineBreak/><LineBreak/><Run Text=” “/><Italic><Run Text=”This note is customizable, flexible to display silverlight notes”/></Italic><Run Text=” “/><LineBreak/><Run Text=” “/><LineBreak/><Run Text=” “/><Run Text=”Click on the close button to hide this notification.” /></TextBlock>
            </controls:SlideNoteControl.Note>
        </controls:SlideNoteControl>

       
        <!–TextBox Note Control–>
        <controls:SlideNoteControl x:Name=”TextNoteControl” Height=”100″ Background=”#faeb76″ Margin=”0,10,10,10″ VerticalAlignment=”Top”>
            <controls:SlideNoteControl.Note>
                <TextBox Text=”This is editable text box. Something important?, start typing here…” Background=”Transparent” TextWrapping=”Wrap” BorderThickness=”0″ Width=”{Binding TextNoteControl, ElementName=Width}” />
            </controls:SlideNoteControl.Note>
        </controls:SlideNoteControl>

Now the note should slide and when click close. Let’s use trigger to create a storyboard and stop it when close icon clicked. For demonstration purpose, the above example uses a textblock. First of all create a simple storyboard which translate the note control from left to right in blend. How to do that?…ok just hold the slide control and create two keyframe which will translate this control. Obviously the storyboard should be in the styles. For now lets look at the code below.

Dummy StoryBoard Created in Blend

  <Storyboard x:Name=”Storyboard1″>
   <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=”(UIElement.RenderTransform).(CompositeTransform.TranslateX)” Storyboard.TargetName=”slideNoteControl”>
    <EasingDoubleKeyFrame KeyTime=”0″ Value=”380″/>
    <EasingDoubleKeyFrame KeyTime=”0:0:0.5″ Value=”0″/>
   DoubleAnimationUsingKeyFrames>
  </Storyboard>

I need to animate my note control. As a result, the targetName need to change when this storyboard will be put inside the style as shown below.

App.xaml
                            <Grid.Triggers>
                                <EventTrigger RoutedEvent=”Grid.Loaded”>
                                    <BeginStoryboard>
                                        <Storyboard Storyboard.TargetName=”NoteControlBorder” Storyboard.TargetProperty=”(UIElement.RenderTransform).(CompositeTransform.TranslateX)” >
                                            <DoubleAnimationUsingKeyFrames>
                                                <EasingDoubleKeyFrame KeyTime=”0″ Value=”760″/>
                                                <EasingDoubleKeyFrame KeyTime=”0:0:01″ Value=”0″/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </BeginStoryboard>
                                EventTrigger>
                            </Grid.Triggers>

Great, now the sliding animation is working. One last touch that is needed is that the current note control needs  a close button. For this i will be using triggers from blend. The below code shows how I manipulate the storyboard using triggers when the close button is clicked.

                                    <Border CornerRadius=”2″ Background=”Red” Width=”16″ Height=”16″ VerticalAlignment=”Top” HorizontalAlignment=”Left” Margin=”-5,-5,0,0″ >
                                        <HyperlinkButton Foreground=”White” Content=”X”  IsTabStop=”False” HorizontalContentAlignment=”Center”>
                                            <i:Interaction.Triggers>
                                                <i:EventTrigger EventName=”Click”>
                                                    <ei:ControlStoryboardAction>
                                                        <ei:ControlStoryboardAction.Storyboard>
                                                            <Storyboard >
                                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName=”NoteControlBorder” Storyboard.TargetProperty=”(UIElement.RenderTransform).(CompositeTransform.TranslateX)”>
                                                                    <EasingDoubleKeyFrame KeyTime=”0″ Value=”0″/>
                                                                    <EasingDoubleKeyFrame KeyTime=”0:0:01″ Value=”760″/>
                                                                </DoubleAnimationUsingKeyFrames>
                                                            </Storyboard>
                                                        ei:ControlStoryboardAction.Storyboard>
                                                    ei:ControlStoryboardAction>
                                                </i:EventTrigger>
                                            </i:Interaction.Triggers>
                                        </HyperlinkButton>
                                    </Border>

Here is the output..

As always, you can download the source code from here [download link]

Sharker Khaleed Mahmud
Web Developer

Advertisements

4 Comments »

  1. […] Animated Note Control using Triggers in Silverlight (Sharker Khaleed Mahmud) […]

    Pingback by Windows Client Developer Roundup 048 for 11/1/2010 - Pete Brown's 10rem.net — November 1, 2010 @ 10:21 PM

  2. […] Animated Note Control using Triggers in Silverlight (Sharker Khaleed Mahmud) […]

    Pingback by Linksammlung 25/11/2010 | Silverlight, WPF & .NET — November 25, 2010 @ 11:50 AM

  3. how to apply this animated notice control on button click means if i click on button this will show whenever i click
    i will do this by
    TextNoteControl.Style = this.Resources[“mainstylekey”] as Style;
    but this will work on only one time so pls help me anyone know .thax in advance

    Comment by mohan singh — June 28, 2011 @ 12:21 PM

  4. can it be possible to control on button click means when i click on button it open or close
    then pls send necessary code

    Comment by mohan singh — December 14, 2011 @ 1:17 AM


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: