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

ScaleTransform SelectedItem in RadCarousel

5 Answers 105 Views
Carousel
This is a migrated thread and some comments may be shown as answers.
Joachim Karlsson
Top achievements
Rank 1
Joachim Karlsson asked on 28 May 2012, 10:26 PM
Hi!

I'm currently working on a project and I need to ScaleTransform the SelectedItem
I've tried diffrent ways, but no ways seems to be.

What i want is the Image/CarouselItem/SelectedItem to Scale when i trigger StoryBoard begin.

Like a ZoomIn/ZoomOut on the SelectedItem.

Is this possible to do?

TransformGroup transformGroup = (TransformGroup)SelectedItem.RenderTransform;
 ScaleTransform transform = (ScaleTransform)transformGroup.Children[0];
 
  xAni = new DoubleAnimation();
 
            xAni.Duration = TimeSpan.FromMilliseconds(300);
            xAni.From = xFrom;
            xAni.To = xTo;
            storyboard.Children.Add(xAni);
 
            // if (yAni == null)
            yAni = new DoubleAnimation();
 
            yAni.Duration = TimeSpan.FromMilliseconds(300);
            yAni.From = yFrom;
            yAni.To = yTo;
            storyboard.Children.Add(yAni);
 
            Storyboard.SetTargetProperty(xAni, new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"));
            Storyboard.SetTarget(xAni, SelectedItem);
 
            Storyboard.SetTargetProperty(yAni, new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"));
            Storyboard.SetTarget(yAni, SelectedItem);
 
 storyboard.Begin();


<telerik:RadCarousel                                       
                                      x:Name="Part_RadCarousel"
                                       AutoGenerateDataPresenters="False"
                                       HorizontalAlignment="Stretch"
                                       VerticalAlignment="Stretch"
                                       Background="Black"
                                       VirtualizingStackPanel.IsVirtualizing="True">
                           <telerik:RadCarousel.ItemTemplate>
                               <ItemContainerTemplate>
                                   <Image  HorizontalAlignment="Stretch"
                                               VerticalAlignment="Stretch"
                                               Margin="25"
                                               Height="600"
                                               Width="800"
                                               RenderTransformOrigin="0.5,0.5"
                                               Source="{Binding ImageUrl}">
                                       <Image.RenderTransform>
                                           <TransformGroup>
                                               <ScaleTransform ScaleX="1" ScaleY="1"/>
                                           </TransformGroup>
                                       </Image.RenderTransform>
                                   </Image>
                               </ItemContainerTemplate>
                           </telerik:RadCarousel.ItemTemplate>
                           <telerik:RadCarousel.ItemsPanel>
                               <ItemsPanelTemplate>
                                   <telerik:RadCarouselPanel  Path="{StaticResource path}"
                                                              IsContinuous="True"
                                                              IsScalingEnabled="True"
                                                              />
                               </ItemsPanelTemplate>
                           </telerik:RadCarousel.ItemsPanel>
                       </telerik:RadCarousel>

Regards
Joachim

5 Answers, 1 is accepted

Sort by
0
Joachim Karlsson
Top achievements
Rank 1
answered on 29 May 2012, 02:41 PM
Anyone? :)

/Joachim
0
Accepted
Lancelot
Top achievements
Rank 1
answered on 29 May 2012, 07:24 PM
Hi Joachim,

Try this format to set your ItemTemplate before applying the transform. Replace the <telerik:RadCarousel.ItemTemplate>...   </telerik:RadCarousel.ItemTemplate> section of your file with the code in the block below.
<telerik:RadCarousel.ItemTemplate>
                <DataTemplate>
                    <ListBoxItem>
                        <Image  HorizontalAlignment="Stretch"
                                               VerticalAlignment="Stretch"
                                               Margin="25"
                                               Height="600"
                                               Width="800"
                                               RenderTransformOrigin="0.5,0.5"
                                               Source="{Binding ImageUrl}">
                            <Image.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform ScaleX="1" ScaleY="1"/>
                                </TransformGroup>
                            </Image.RenderTransform>
                        </Image>
                    </ListBoxItem>
                </DataTemplate>
            </telerik:RadCarousel.ItemTemplate>


Let me know if this doesnt work, I can help you even further if you provide the whole solution for me. Send it in a zipped folder and I will be able to write you a custom solution using your project.

Good luck,
Lancelot
0
Joachim Karlsson
Top achievements
Rank 1
answered on 29 May 2012, 09:05 PM
Thanks alot!

seems to be working !

But i got another problem now, I'm trying to access the Databound UiElement, Now i only get the databound data.

I tried somthing like this

void m_carousel_SelectionChanged(object sender, SelectionChangeEventArgs e)
{
            var rcp = e.OriginalSource as RadCarousel;
            var t = rcp.Panel.FindChildByType<Image>();
}

Gives me the wrong "Image", Any suggestion?
0
Joachim Karlsson
Top achievements
Rank 1
answered on 29 May 2012, 09:24 PM
var rcp = e.OriginalSource as RadCarousel;
var carouselItem = rcp.ItemsControl.ItemContainerGenerator.ContainerFromItem(e.AddedItems[0]);
var image = carouselItem.ChildrenOfType<Image>().FirstOrDefault();
Found my solution!


Thanks alot for  your help Lancelot!
0
Lancelot
Top achievements
Rank 1
answered on 29 May 2012, 09:29 PM
Awesome! Glad to be of service =D
Tags
Carousel
Asked by
Joachim Karlsson
Top achievements
Rank 1
Answers by
Joachim Karlsson
Top achievements
Rank 1
Lancelot
Top achievements
Rank 1
Share this question
or