This is a migrated thread and some comments may be shown as answers.

Simple static images content

3 Answers 187 Views

TransitionControl

This is a migrated thread and some comments may be shown as answers.

Web team asked on 15 Sep 2011, 10:37 AM

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" />

3 Answers, 1 is accepted

answered on 19 Sep 2011, 09:34 AM

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;

}