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

Databinding and reflection control problem

7 Answers 271 Views

Carousel

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

Potecaru Tudor asked on 09 Mar 2010, 04:51 PM

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>

7 Answers, 1 is accepted

answered on 10 Mar 2010, 09:54 AM

carouselxmlbinding.zip

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.

answered on 10 Mar 2010, 12:07 PM

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

answered on 15 Mar 2010, 10:52 PM

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>

<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>

<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

answered on 16 Mar 2010, 04:55 PM

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