Databinding and reflection control problem

8 posts, 0 answers
  1. Potecaru Tudor
    Potecaru  Tudor avatar
    8 posts
    Member since:
    Mar 2010

    Posted 09 Mar 2010 Link to this post

    Hello. I'm developing an application, and we need a carouse, so I started using the RadCarousel. Now, my carousel will only contain a few images, but i want the carousel to take them from an xml file i've written:
    <?xml version="1.0" encoding="utf-8" ?>  
    <root>  
      <image url="images\announcementsIcon.png"></image>  
      <image url="images\phoneDirectoryIcon.png"></image>  
      <image url="images\gadgetWallIcon.png"></image>  
      <image url="images\wpaNewsIcon.png"></image>  
      <image url="images\newsIcon.png"></image>  
    </root> 

    I used Blend to import this as an XML data source and declare it on the carousel ItemSource property as a static resource, and then tried to link each image inside the CarouselDataRecordPresenter to the url attributs but didnt succed. I'm not sure what am I doing wrong, I was trying to follow these instructions but they didnt help me. And my second problem, is that,trying to get it going and adding the images to carousel hardcoded, I couldnt get the reflection effect to work. Here's the code. Please help. Thank you

                    <telerik:RadCarousel x:Name="naxosCarousel" Height="150" HorizontalAlignment="Center" MaxWidth="774" ScrollViewer.HorizontalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden">  
                        <telerik:RadCarousel.ReflectionSettings>  
                            <telerik:ReflectionSettings Visibility="Visible" Opacity="1" HiddenPercentage="0.2" HeightOffset="6" Angle="10"/>  
                        </telerik:RadCarousel.ReflectionSettings>  
                        <Image Source="images\phoneDirectoryIcon.png"/>  
                        <Image Source="images\newsIcon.png"/>  
                        <Image Source="images\gadgetWallIcon.png"/>  
                        <Image Source="images\wpaNewsIcon.png"/>  
                        <Image Source="images\announcementsIcon.png"/>  
                    </telerik:RadCarousel> 

  2. Milan
    Admin
    Milan avatar
    1989 posts

    Posted 10 Mar 2010 Link to this post

    Hi Potecaru Tudor,

    I have prepared a sample application that demonstrates both approaches - binding using Xml and explicitly defined items.


    Best wishes,
    Milan
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Potecaru Tudor
    Potecaru  Tudor avatar
    8 posts
    Member since:
    Mar 2010

    Posted 10 Mar 2010 Link to this post

    Thank you for the quick answer. I managed to solve the databinding problem, it was a matter of path finding, as I defined the CarouselDataRecordPresenter style inside a separate resourcedictionary in a inner folder so it was looking for images from its folder level. However, I couldnt get the reflection to work. I created a simple new project and it worked fine. But in this one doesnt. Here's my carousel code
                <Border x:Name="Carousel" Margin="200,41.656,50,0" CornerRadius="10" VerticalAlignment="Top">  
                    <telerik:RadCarousel x:Name="naxosCarousel" Height="93" MaxWidth="774" HorizontalScrollBarVisibility="Hidden" Margin="0,-40,0,0" Style="{DynamicResource RadCarouselStyle}">  
                        <telerik:RadCarousel.ReflectionSettings>  
                            <telerik:ReflectionSettings Visibility="Visible"/>  
                        </telerik:RadCarousel.ReflectionSettings>  
                        <telerik:RadCarousel.ItemsSource>  
                            <Binding Source="{StaticResource objectDataProvider}"/>  
                        </telerik:RadCarousel.ItemsSource>  
                    </telerik:RadCarousel>  
                </Border> 

    and my resourcedictionary for the carousel 

    <ResourceDictionary  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" xmlns:System="clr-namespace:System;assembly=mscorlib" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"  
        xmlns:carousel="clr-namespace:Telerik.Windows.Controls.Carousel;assembly=Telerik.Windows.Controls.Navigation">  
          
    <carousel:ArithmeticValueConverter x:Key="ArithmeticValueConverter" />  
     
                <Style TargetType="{x:Type telerik:CarouselItem}">  
                    <Setter Property="Template">  
                        <Setter.Value>  
                            <ControlTemplate TargetType="{x:Type telerik:CarouselItem}">  
                                <ControlTemplate.Resources>  
                                    <Storyboard x:Key="OnMouseEnter1">  
                                        <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">  
                                            <SplineColorKeyFrame KeyTime="00:00:00.2000000" Value="#E5FFFFFF"/>  
                                        </ColorAnimationUsingKeyFrames>  
                                    </Storyboard>  
                                    <Storyboard x:Key="OnMouseEnter_Copy1">  
                                        <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">  
                                            <SplineColorKeyFrame KeyTime="00:00:00.2000000" Value="#4CFFFFFF"/>  
                                        </ColorAnimationUsingKeyFrames>  
                                    </Storyboard>  
                                </ControlTemplate.Resources>  
                                <Border x:Name="border" Width="110" Height="60" Background="#66FFFFFF" CornerRadius="5" BorderBrush="#CCFFFFFF" BorderThickness="2,3,2,2">  
                                    <ContentPresenter IsHitTestVisible="True" Margin="10,0" />  
                                </Border>  
                                <ControlTemplate.Triggers>  
                                    <EventTrigger RoutedEvent="Mouse.MouseLeave">  
                                        <BeginStoryboard x:Name="OnMouseEnter_Copy1_BeginStoryboard" Storyboard="{StaticResource OnMouseEnter_Copy1}"/>  
                                    </EventTrigger>  
                                    <EventTrigger RoutedEvent="Mouse.MouseEnter">  
                                        <BeginStoryboard Storyboard="{StaticResource OnMouseEnter1}"/>  
                                    </EventTrigger>  
                                </ControlTemplate.Triggers>           
                            </ControlTemplate>  
                        </Setter.Value>  
                    </Setter>  
                </Style>  
                  
                <Style TargetType="telerik:CarouselDataRecordPresenter">  
                    <Setter Property="Template">  
                        <Setter.Value>  
                            <ControlTemplate TargetType="telerik:CarouselDataRecordPresenter">  
                                <Image Source="{Binding Mode=OneWay, XPath=@url}" />  
                            </ControlTemplate>  
                        </Setter.Value>  
                    </Setter>  
                </Style>  
    </ResourceDictionary> 

    Hope youll find an error cause I couldnt :-). Btw, I use RadControls for WPF Q3 2010, released on 14 January 2010. Thank you for your help

  5. Milan
    Admin
    Milan avatar
    1989 posts

    Posted 15 Mar 2010 Link to this post

    Hello Potecaru Tudor,

    You should add an extra border to your CarouselItem template which will render the reflections:

    <Grid.Resources>
                <telerik:ArithmeticValueConverter x:Key="ArithmeticValueConverter" />
      
                <Style TargetType="{x:Type telerik:CarouselItem}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type telerik:CarouselItem}">
                                <ControlTemplate.Resources>
                                    <Storyboard x:Key="OnMouseEnter1">
                                        <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                            <SplineColorKeyFrame KeyTime="00:00:00.2000000" Value="#E5FFFFFF"/>
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                    <Storyboard x:Key="OnMouseEnter_Copy1">
                                        <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="border" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                            <SplineColorKeyFrame KeyTime="00:00:00.2000000" Value="#4CFFFFFF"/>
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </ControlTemplate.Resources>
                                <Grid>
      
                                    <!-- REFLECTION BORDER START-->
                                    <Border x:Name="reflection" RenderTransformOrigin="0.5, 1" ClipToBounds="False" Width="{Binding ElementName=border, Path=ActualWidth}"                        
                        Opacity="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ReflectionSettings.Opacity}" 
                        Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ReflectionSettings.Visibility}"
                        BorderBrush="White" IsHitTestVisible="False"
                        BorderThickness="0">
                                        <Border.RenderTransform>
                                            <TransformGroup>
                                                <ScaleTransform 
                                            ScaleX="{Binding RelativeSource={RelativeSource TemplatedParent}, 
                                                            Path=ReflectionSettings.WidthOffset, 
                                                            Converter={StaticResource ArithmeticValueConverter}, 
                                                            ConverterParameter=1}" 
                                            ScaleY="{Binding RelativeSource={RelativeSource TemplatedParent}, 
                                                            Path=ReflectionSettings.HeightOffset, 
                                                            Converter={StaticResource ArithmeticValueConverter}, 
                                                            ConverterParameter=-1}" 
                                            CenterY="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ReflectionSettings.OffsetY}" />
                                                <TranslateTransform X="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ReflectionSettings.OffsetX}" />
                                                <SkewTransform AngleX="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ReflectionSettings.Angle}" />
                                            </TransformGroup>
      
                                        </Border.RenderTransform>
                                        <Border.OpacityMask>
                                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                                <LinearGradientBrush.GradientStops>
                                                    <GradientStop Offset="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ReflectionSettings.HiddenPercentage}" Color="Transparent"/>
                                                    <GradientStop Offset="1" Color="Black"/>
                                                </LinearGradientBrush.GradientStops>
                                            </LinearGradientBrush>
                                        </Border.OpacityMask>
                                        <Border.Background>
                                            <VisualBrush Visual="{Binding ElementName=border}">
                                            </VisualBrush>
                                        </Border.Background>
      
                                    </Border>
                                    <!-- REFLECTION BORDER END -->
      
                                    <Border x:Name="border" Width="110" Height="60" Background="#66FFFFFF" CornerRadius="5" BorderBrush="#CCFFFFFF" BorderThickness="2,3,2,2">
                                        <ContentPresenter IsHitTestVisible="True" Margin="10,0" />
                                    </Border>
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <EventTrigger RoutedEvent="Mouse.MouseLeave">
                                        <BeginStoryboard x:Name="OnMouseEnter_Copy1_BeginStoryboard" Storyboard="{StaticResource OnMouseEnter_Copy1}"/>
                                    </EventTrigger>
                                    <EventTrigger RoutedEvent="Mouse.MouseEnter">
                                        <BeginStoryboard Storyboard="{StaticResource OnMouseEnter1}"/>
                                    </EventTrigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Grid.Resources>


    All the best,
    Milan
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  6. Potecaru Tudor
    Potecaru  Tudor avatar
    8 posts
    Member since:
    Mar 2010

    Posted 16 Mar 2010 Link to this post

    thank you. I'll keep that in mind, however I implemented the carousel using a listbox
  7. Milan
    Admin
    Milan avatar
    1989 posts

    Posted 16 Mar 2010 Link to this post

    Hi Potecaru Tudor,

    Could you please elaborate a bit? Are you using RadCarouselPanel as ItemsPanel of a ListBox? If that is the case you can simply use ListBoxItems instead of CarouselItems.

    Best wishes,
    Milan
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  8. Potecaru Tudor
    Potecaru  Tudor avatar
    8 posts
    Member since:
    Mar 2010

    Posted 16 Mar 2010 Link to this post

    Hey. Well, being pressed by time, I couldnt wait, and before you posted the answer regarding the border to solve the reflection, I implemented some kind of a carousel customizing the listbox to display images with their reflection, so I guess my problem is solved, in a way. All i would need would be to implement the scroll on mouse over but I'm not sure this is possible on a listbox, and anyway, I guess is not the place to talk about the listbox problems here :-). Thank you for your support.

    Later edit: To answer your question, I think you can guess from my post that I already customized the listboxitems instead of using the radcarouselpanel
  9. Potecaru Tudor
    Potecaru  Tudor avatar
    8 posts
    Member since:
    Mar 2010

    Posted 12 Apr 2010 Link to this post

    Hello. Just wanted to say that the solution you provided is perfect so that you can mark this thread as solved. Thank you
Back to Top
UI for WPF is Visual Studio 2017 Ready