Simple static images content

[Web team]

Hi,

I have a static set of images within the transition control. Right now I can display 10 images per per page. I want to ask how can I create another set of 10 images that will be shown on the next page. Data template only allows me one set of images. 

Also, how can I have two custom images (arrow left and arrow right) to trigger "Next page" and "Previous page"? My current code is shown below:

<telerik:RadTransitionControl x:Name="TransitionControl" SnapsToDevicePixels="True" Margin="130,124,100,184">
            <telerik:RadTransitionControl.ContentTemplate>
                <DataTemplate>
                    <StackPanel>
                        <WrapPanel Orientation="Horizontal">
                            <WrapPanel.Resources>
                                <Style TargetType="{x:Type Image}">
                                    <Setter Property="Margin" Value="10,10" />
                                </Style>
                            </WrapPanel.Resources>
                            <Image Height="250" Width="180" DataContext="{Binding}" Source="/Kintrol;component/Images/300.jpg" />
                            <Image Source="Images/1.jpg" Height="250" Width="180" />
                            <Image Source="Images/2.jpg" Height="250" Width="180" />
                            <Image Source="Images/3.jpg" Height="250" Width="180" />
                            <Image Source="Images/4.jpg" Height="250" Width="180" />
                            <Image Source="Images/5.jpg" Height="250" Width="180" />
                            <Image Source="Images/6.jpg" Height="250" Width="180" />
                            <Image Source="Images/7.jpg" Height="250" Width="180" />
                            <Image Source="Images/8.jpg" Height="250" Width="180" />
                            <Image Source="Images/9.jpg" Height="250" Width="180" />
                        </WrapPanel>
                    </StackPanel>
                </DataTemplate>
            </telerik:RadTransitionControl.ContentTemplate>
            <telerik:RadTransitionControl.Transition>
                <telerik:SlideAndZoomTransition />
            </telerik:RadTransitionControl.Transition>
        </telerik:RadTransitionControl>
        <Image Source="Images/next.png" Margin="1134,332,12,359"  />
        <Image Source="Images/previous.png" Margin="12,262,1134,334" />

[Web team]

help please

[Web team]

I was able to set and change the images programatically using code behind. However I cannot trigger the transition using the mouse down event of the image button as shown below: 

<telerik:RadTransitionControl x:Name="TransitionControl" SnapsToDevicePixels="True" Margin="130,124,100,184" Duration="00:00:01">

            <telerik:RadTransitionControl.Content>
                <StackPanel>
                    <WrapPanel Orientation="Horizontal">
                        <WrapPanel.Resources>
                            <Style TargetType="{x:Type Image}">
                                <Setter Property="Margin" Value="10,10" />
                            </Style>
                        </WrapPanel.Resources>
                        <Image x:Name="imgc1" Source="{Binding img1}" Height="250" Width="180" />
                        <Image x:Name="imgc2" Source="{Binding img2}" Height="250" Width="180" />
                        <Image x:Name="imgc3" Source="{Binding img3}" Height="250" Width="180" />
                        <Image x:Name="imgc4" Source="{Binding img4}" Height="250" Width="180" />
                        <Image x:Name="imgc5" Source="{Binding img5}" Height="250" Width="180" />
                        <Image x:Name="imgc6" Source="{Binding img6}" Height="250" Width="180" />
                        <Image x:Name="imgc7" Source="{Binding img7}" Height="250" Width="180" />
                        <Image x:Name="imgc8" Source="{Binding img8}" Height="250" Width="180" />
                        <Image x:Name="imgc9" Source="{Binding img9}" Height="250" Width="180" />
                        <Image x:Name="imgc10" Source="{Binding img10}" Height="250" Width="180" />
                    </WrapPanel>
                </StackPanel>
                </telerik:RadTransitionControl.Content>

                <telerik:RadTransitionControl.Transition>
                <telerik:SlideAndZoomTransition SlideDirection="LeftToRight"/>
            </telerik:RadTransitionControl.Transition>
        </telerik:RadTransitionControl>
        <Image Source="Images/next.png" Margin="1134,332,12,359" MouseDown="Image_MouseDown" />

public MainWindow()
       {

           InitializeComponent();
           this.data = new Data { img1 = new BitmapImage(new Uri(@"pack://application:,,,/Kintrol;component/Images/0.jpg")),
                                   img2 = new BitmapImage(new Uri(@"pack://application:,,,/Kintrol;component/Images/1.jpg")),
                                   img3 = new BitmapImage(new Uri(@"pack://application:,,,/Kintrol;component/Images/2.jpg")),
                                   img4 = new BitmapImage(new Uri(@"pack://application:,,,/Kintrol;component/Images/3.jpg")),
                                   img5 = new BitmapImage(new Uri(@"pack://application:,,,/Kintrol;component/Images/4.jpg")),
                                   img6 = new BitmapImage(new Uri(@"pack://application:,,,/Kintrol;component/Images/5.jpg")),
                                   img7 = new BitmapImage(new Uri(@"pack://application:,,,/Kintrol;component/Images/6.jpg")),
                                   img8 = new BitmapImage(new Uri(@"pack://application:,,,/Kintrol;component/Images/7.jpg")),
                                   img9 = new BitmapImage(new Uri(@"pack://application:,,,/Kintrol;component/Images/8.jpg")),
                                   img10 = new BitmapImage(new Uri(@"pack://application:,,,/Kintrol;component/Images/9.jpg"))
           };

           this.DataContext = data;
       }

private void Image_MouseDown(object sender, MouseButtonEventArgs e)
        {
            this.data = new Data
            {
                img1 = new BitmapImage(new Uri(@"pack://application:,,,/Kintrol;component/Images/11.jpg")),
                img2 = new BitmapImage(new Uri(@"pack://application:,,,/Kintrol;component/Images/22.jpg")),
                img3 = new BitmapImage(new Uri(@"pack://application:,,,/Kintrol;component/Images/33.jpg")),
                img4 = new BitmapImage(new Uri(@"pack://application:,,,/Kintrol;component/Images/44.jpg")),
                img5 = new BitmapImage(new Uri(@"pack://application:,,,/Kintrol;component/Images/55.jpg")),
                img6 = new BitmapImage(new Uri(@"pack://application:,,,/Kintrol;component/Images/66.jpg")),
                img7 = new BitmapImage(new Uri(@"pack://application:,,,/Kintrol;component/Images/77.jpg")),
                img8 = new BitmapImage(new Uri(@"pack://application:,,,/Kintrol;component/Images/88.jpg")),
                img9 = new BitmapImage(new Uri(@"pack://application:,,,/Kintrol;component/Images/99.jpg")),
                img10 = new BitmapImage(new Uri(@"pack://application:,,,/Kintrol;component/Images/100.jpg"))
            };

            this.DataContext = data;



        }

[Miroslav Nedyalkov]

Hi Arnold,

 The TransitionControl triggers its animation only when either the Content or the ContentTemplate properties are changed. In order to use the automatic animation triggering you should change one of these properties. For more information about how to use the RadTransitionControl you could refer to this help article.

Hope this helps.

Regards,
Miroslav Nedyalkov
the Telerik team