ScaleTransform SelectedItem in RadCarousel

[Joachim Karlsson]

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

[Joachim Karlsson]

Anyone? :)

/Joachim

[Lancelot]

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

[Joachim Karlsson]

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?

[Joachim Karlsson]

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!

[Lancelot]

Awesome! Glad to be of service =D