Databinding and reflection control problem

[Potecaru Tudor]

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>

[Milan]

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.

[Potecaru Tudor]

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

[Milan]

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.

[Potecaru Tudor]

thank you. I'll keep that in mind, however I implemented the carousel using a listbox

[Milan]

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.

[Potecaru Tudor]

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

[Potecaru Tudor]

Hello. Just wanted to say that the solution you provided is perfect so that you can mark this thread as solved. Thank you