Applying transitions code behind

[Kenz]

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..

[Pana]

Hello Kenz,

This XAML:

<UserControl x:Class="SilverlightApplication7.MainPage"
        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:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        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