Simple static images content

4 posts, 0 answers
  1. Web team
    Web team avatar
    57 posts
    Member since:
    Mar 2010

    Posted 15 Sep 2011 Link to this post

    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" />
  2. Web team
    Web team avatar
    57 posts
    Member since:
    Mar 2010

    Posted 18 Sep 2011 Link to this post

    help please
  3. UI for WPF is Visual Studio 2017 Ready
  4. Web team
    Web team avatar
    57 posts
    Member since:
    Mar 2010

    Posted 19 Sep 2011 Link to this post

    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;
                 
                  
      
            }
  5. Miroslav Nedyalkov
    Admin
    Miroslav Nedyalkov avatar
    1718 posts

    Posted 21 Sep 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top