ScaleTransform SelectedItem in RadCarousel

6 posts, 1 answers
  1. Joachim Karlsson
    Joachim Karlsson avatar
    17 posts
    Member since:
    May 2010

    Posted 28 May 2012 Link to this post

    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
  2. Joachim Karlsson
    Joachim Karlsson avatar
    17 posts
    Member since:
    May 2010

    Posted 29 May 2012 Link to this post

    Anyone? :)

    /Joachim
  3. UI for WPF is Visual Studio 2017 Ready
  4. Answer
    Lancelot
    Lancelot avatar
    251 posts
    Member since:
    Jul 2012

    Posted 29 May 2012 Link to this post

    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
  5. Joachim Karlsson
    Joachim Karlsson avatar
    17 posts
    Member since:
    May 2010

    Posted 29 May 2012 Link to this post

    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?
  6. Joachim Karlsson
    Joachim Karlsson avatar
    17 posts
    Member since:
    May 2010

    Posted 29 May 2012 Link to this post

    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!
  7. Lancelot
    Lancelot avatar
    251 posts
    Member since:
    Jul 2012

    Posted 29 May 2012 Link to this post

    Awesome! Glad to be of service =D
Back to Top
UI for WPF is Visual Studio 2017 Ready