Applying transitions code behind

2 posts, 1 answers
  1. Kenz
    Kenz avatar
    19 posts
    Member since:
    Apr 2011

    Posted 11 Jul 2011 Link to this post

    Hi ,
    i need to add a transition effect on every clicks of RadMenu items.(Mainpage's background is changing on every click)
    So i have a code like this :

    public partial class userMenu : UserControl
       
           public userMenu()
           {
               InitializeComponent();
           }
           private void OnRadMenuItemClick(object sender, Telerik.Windows.RadRoutedEventArgs e)
           {
               RadMenuItem currentItem = e.OriginalSource as RadMenuItem;
     
               if (currentItem != null)
               {
                   menuItem(currentItem);
               }
           private void menuItem(RadMenuItem item)
           {
               switch (item.Name)
               {
           case "menuThemeColor1":
                       BitmapImage bmi1 = new BitmapImage(new Uri("view/images/back1.png", UriKind.Relative));
                       ImageBrush brush1 = new ImageBrush();
                       brush1.ImageSource = bmi1;
                       _mainPage.LayoutRoot.Background = brush1;                                
                       break;
     
                   case "menuThemeColor2":
                       BitmapImage bmi2 = new BitmapImage(new Uri("view/images/back2.png", UriKind.Relative));
                       ImageBrush brush2 = new ImageBrush();
                       brush2.ImageSource = bmi2;
                       _mainPage.LayoutRoot.Background = brush2;
                       break;
     
                   case "menuThemeColor3":
                       BitmapImage bmi3 = new BitmapImage(new Uri("view/images/back3.png", UriKind.Relative));
                       ImageBrush brush3 = new ImageBrush();
                       brush3.ImageSource = bmi3;
                       _mainPage.LayoutRoot.Background = brush3;
                       break;
               }
           }




    Need to add transitions please help me how can i achieve this
    thanks..

  2. Answer
    Pana
    Admin
    Pana avatar
    748 posts

    Posted 13 Jul 2011 Link to this post

    Hello Kenz,

    This XAML:
    <UserControl x:Class="SilverlightApplication7.MainPage"
            mc:Ignorable="d"
            d:DesignHeight="300" d:DesignWidth="400">
      
        <Grid x:Name="LayoutRoot" Background="White">
              
            <telerik:RadTransitionControl x:Name="TransitionBackground">
                <telerik:RadTransitionControl.Transition>
                    <telerik:FadeTransition />
                </telerik:RadTransitionControl.Transition>
                <telerik:RadTransitionControl.ContentTemplate>
                    <DataTemplate>
                        <Rectangle Fill="{Binding}" />
                    </DataTemplate>
                </telerik:RadTransitionControl.ContentTemplate>
            </telerik:RadTransitionControl>
      
            <telerik:RadMenu ItemClick="RadMenu_ItemClick" VerticalAlignment="Top">
                <telerik:RadMenuItem Header="Background">
                    <telerik:RadMenuItem Header="Red" />
                    <telerik:RadMenuItem Header="Green" />
                    <telerik:RadMenuItem Header="Blue" />
                </telerik:RadMenuItem>
            </telerik:RadMenu>
      
            <TextBlock Text="Cotnent here" FontSize="50" Foreground="Purple" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center" />
        </Grid>
    </UserControl>

    Width this code behind:
    namespace SilverlightApplication7
    {
        public partial class MainPage : UserControl
        {
            public MainPage()
            {
                InitializeComponent();
            }
      
            private void RadMenu_ItemClick(object sender, Telerik.Windows.RadRoutedEventArgs e)
            {
                RadMenuItem rmi = (RadMenuItem)e.OriginalSource;
                switch (rmi.Header.ToString())
                {
                    case "Red":
                        this.TransitionBackground.Content = new SolidColorBrush(Colors.Red);
                        break;
                    case "Green":
                        this.TransitionBackground.Content = new SolidColorBrush(Colors.Green);
                        break;
                    case "Blue":
                        this.TransitionBackground.Content = new SolidColorBrush(Colors.Blue);
                        break;
                }
            }
        }
    }

    Would do the trick. Note when the transition gets new content it triggers transition. The ContentTemplate will make it create a new Rectangle, and apply the Content as Background. The code behind will set the Content to a proper Brush. There sould be no difficulties setting bitmaps as well. You will have to make sure they are loaded before you plug them in the transition though. Otherwise you will see the old content move away while the new image will appear at instant once it downloads.

    Regards,
    Pana
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  3. DevCraft banner
Back to Top