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

Databinding and reflection control problem

7 Answers 103 Views
Carousel
This is a migrated thread and some comments may be shown as answers.
Potecaru Tudor
Top achievements
Rank 1
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

Sort by
0
Milan
Telerik team
answered on 10 Mar 2010, 09:54 AM
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.
0
Potecaru Tudor
Top achievements
Rank 1
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

0
Milan
Telerik team
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>
  
                                <!-- 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.
0
Potecaru Tudor
Top achievements
Rank 1
answered on 16 Mar 2010, 11:11 AM
thank you. I'll keep that in mind, however I implemented the carousel using a listbox
0
Milan
Telerik team
answered on 16 Mar 2010, 11:21 AM
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.
0
Potecaru Tudor
Top achievements
Rank 1
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
0
Potecaru Tudor
Top achievements
Rank 1
answered on 12 Apr 2010, 11:14 AM
Hello. Just wanted to say that the solution you provided is perfect so that you can mark this thread as solved. Thank you
Tags
Carousel
Asked by
Potecaru Tudor
Top achievements
Rank 1
Answers by
Milan
Telerik team
Potecaru Tudor
Top achievements
Rank 1
Share this question
or