Databinding not working in RadCarousel

[Vandana]

Hi,
I am createing WAP Browser Application to use RadCarousel, in which I am binding data to RadCarousel with datatable. When I run this xbap it doesnt show any error. but not showing data in CaruselItems.
can you please tell me what I am missing here?
my code is

<Page x:Class="WPFBrowserApplication.Page1"
    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:carousel="clr-namespace:Telerik.Windows.Controls.Carousel;assembly=Telerik.Windows.Controls.Navigation"
    Title="Page1">
    <Grid>
        <Grid.Resources>
            <carousel:ArithmeticValueConverter x:Key="ArithmeticValueConverter" />

            <Style TargetType="{x:Type telerik:CarouselItem}">
                <Setter Property="Template" >
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type telerik:CarouselItem}">
                            <Grid  ClipToBounds="False" Height="175" Width="150" >
                                <Border RenderTransformOrigin="0.5, 1" ClipToBounds="False" Width="{Binding ElementName=CarouselItemInnerGrid, Path=ActualWidth}"                        
                            Opacity="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ReflectionSettings.Opacity}"
                            Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ReflectionSettings.Visibility}"
                            BorderBrush="White"
                            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=CarouselItemInnerGrid}">
                                        </VisualBrush>
                                    </Border.Background>

                                </Border>

                                <Grid x:Name="CarouselItemInnerGrid">
                                    <Border x:Name="CarouselItemMainBorder" Opacity="0.5" BorderBrush="#FF91B3FF" BorderThickness="1,1,1,1" CornerRadius="5,5,5,5" SnapsToDevicePixels="True">
                                        <Border.Background>
                                            <LinearGradientBrush EndPoint="108,472" StartPoint="108,23" MappingMode="Absolute">
                                                <GradientStop Color="#FF2C3A68" Offset="0"/>
                                                <GradientStop Color="#FF000000" Offset="1"/>
                                                <GradientStop Color="#FF0F224C" Offset="0.045"/>
                                                <GradientStop Color="#FF000000" Offset="0.0451"/>
                                            </LinearGradientBrush>
                                        </Border.Background>
                                    </Border>
                                    <Border Opacity="1" BorderBrush="#3F000000" BorderThickness="1,1,1,1" CornerRadius="5,5,5,5" Margin="10,10,10,10" x:Name="CarouselItemInnerBorder" SnapsToDevicePixels="True">
                                        <Border.Background>
                                            <LinearGradientBrush EndPoint="101,462" StartPoint="101,13" MappingMode="Absolute">
                                                <GradientStop Color="#FF2C3A68" Offset="0"/>
                                                <GradientStop Color="#FF000000" Offset="1"/>
                                                <GradientStop Color="#FF0F224C" Offset="0.045"/>
                                                <GradientStop Color="#FF000000" Offset="0.0451"/>
                                            </LinearGradientBrush>
                                        </Border.Background>
                                        <ContentPresenter IsHitTestVisible="True" />
                                        <Border.Triggers>

                                        </Border.Triggers>
                                    </Border>
                                </Grid>
                            </Grid>

                            <ControlTemplate.Triggers>
                                <MultiTrigger>
                                    <MultiTrigger.Conditions>
                                        <Condition Property="IsSelected" Value="False" />
                                        <Condition Property="IsMouseOver" Value="True" />
                                    </MultiTrigger.Conditions>
                                    <MultiTrigger.EnterActions>
                                        <BeginStoryboard>
                                            <Storyboard >
                                                <ColorAnimation Storyboard.TargetName="CarouselItemMainBorder" Storyboard.TargetProperty="Background.GradientStops[0].Color" To="#FF344B97" Duration="0:0:0.3" />
                                                <ColorAnimation  Storyboard.TargetName="CarouselItemMainBorder" Storyboard.TargetProperty="Background.GradientStops[2].Color" To="#FF233F7E" Duration="0:0:0.3" />
                                                <ColorAnimation Storyboard.TargetName="CarouselItemInnerBorder" Storyboard.TargetProperty="Background.GradientStops[0].Color" To="#FF344B97" Duration="0:0:0.3" />
                                                <ColorAnimation Storyboard.TargetName="CarouselItemInnerBorder" Storyboard.TargetProperty="Background.GradientStops[2].Color" To="#FF233F7E" Duration="0:0:0.3" />
                                            </Storyboard>
                                        </BeginStoryboard>

                                    </MultiTrigger.EnterActions>
                                    <MultiTrigger.ExitActions>
                                        <BeginStoryboard>
                                            <Storyboard FillBehavior="Stop" >
                                                <ColorAnimation Storyboard.TargetName="CarouselItemMainBorder" Storyboard.TargetProperty="Background.GradientStops[0].Color" To="#FF2C3A68" Duration="0:0:0.3" />
                                                <ColorAnimation Storyboard.TargetName="CarouselItemMainBorder" Storyboard.TargetProperty="Background.GradientStops[2].Color" To="#FF0F224C" Duration="0:0:0.3" />
                                                <ColorAnimation Storyboard.TargetName="CarouselItemInnerBorder" Storyboard.TargetProperty="Background.GradientStops[0].Color" To="#FF2C3A68" Duration="0:0:0.3" />
                                                <ColorAnimation Storyboard.TargetName="CarouselItemInnerBorder" Storyboard.TargetProperty="Background.GradientStops[2].Color" To="#FF0F224C" Duration="0:0:0.3" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </MultiTrigger.ExitActions>
                                    
                                </MultiTrigger>

                                <Trigger Property="IsSelected" Value="True" >
                                    <Setter TargetName="CarouselItemMainBorder" Property="Background">
                                        <Setter.Value>
                                            <LinearGradientBrush EndPoint="108,472" StartPoint="108,23" MappingMode="Absolute">
                                                <GradientStop Color="#FF344B97" Offset="0"/>
                                                <GradientStop Color="#FF000000" Offset="1"/>
                                                <GradientStop Color="#FF233F7E" Offset="0.045"/>
                                                <GradientStop Color="#FF000000" Offset="0.0451"/>
                                            </LinearGradientBrush>
                                        </Setter.Value>
                                    </Setter>
                                    <Setter TargetName="CarouselItemInnerBorder" Property="Background">
                                        <Setter.Value>
                                            <LinearGradientBrush  EndPoint="101,462" StartPoint="101,13" MappingMode="Absolute">
                                                <GradientStop Color="#FF344B97" Offset="0"/>
                                                <GradientStop Color="#FF000000" Offset="1"/>
                                                <GradientStop Color="#FF233F7E" Offset="0.045"/>
                                                <GradientStop Color="#FF000000" Offset="0.0451"/>
                                            </LinearGradientBrush>
                                        </Setter.Value>
                                    </Setter>
                                </Trigger>

                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style TargetType="{x:Type telerik:CarouselDataRecordPresenter}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type telerik:CarouselDataRecordPresenter}">
                            <Grid IsHitTestVisible="False" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="30" />
                                    <RowDefinition Height="100" />
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
                                <StackPanel Grid.Row="0" Orientation="Horizontal" VerticalAlignment="Center" >
                                    <Label Content="Name: " Foreground="#ff8FB3FF" FontSize="12"/>
                                    <Label Content="{Binding Path=Data.FirstName}" Foreground="#ff8FB3FF" FontSize="12" />                                    
                                </StackPanel>
                                <Rectangle Grid.Row="1" RadiusX="3" RadiusY="3" Width="110" Height="80">
                                    <!--
                                    <Rectangle.Fill>    
                                         <ImageBrush x:Name="brush" ImageSource="{Binding Path=Data.Picture}"/>
                                    </Rectangle.Fill>
                                    -->
                                </Rectangle>
                                <StackPanel Grid.Row="2"  Orientation="Horizontal" VerticalAlignment="Center">
                                    <Label Content="Phone: " Foreground="#ff8FB3FF" FontSize="12"/>
                                    <Label Content="{Binding Path=Data.Phone}" FontSize="12" Foreground="#ff8FB3FF"/>
                                </StackPanel>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>
        
        <telerik:RadCarousel x:Name="sampleRadCarousel" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
    </Grid>
</Page>



and my datatable is like


public DataTable getData()
        {
            DataTable dt = new DataTable();
            DataSet ds = new DataSet();
            dt.Columns.Add("ID", Type.GetType("System.Int32"));
            dt.Columns.Add("FirstName", Type.GetType("System.String"));
            dt.Columns.Add("LastName", Type.GetType("System.String"));
            dt.Columns.Add("Phone", Type.GetType("System.String"));
            dt.Columns.Add("Picture");
            
            try
            {
                DataRow dr = dt.NewRow();
                dr["ID"] = 46;
                dr["FirstName"] = "Ana";
                dr["LastName"] = "Trujillo";
                dr["Phone"] = "6562-9722";
                dr["Picture"] = pic code here
                dt.Rows.Add(dr);
                dt.AcceptChanges();
                dr = dt.NewRow();
                dr["ID"] = 47;
                dr["FirstName"] = "Ana";
                dr["LastName"] = "Trujillo";
                dr["Phone"] = "6562-9722";
               dr["Picture"] = pic code here
                dt.Rows.Add(dr);
                dt.AcceptChanges();
            }
            catch(Exception ex)
            {

            }

            return dt;
        }


I could see blank item in RadCarousel at runtime

[Milan]

Hi Vandana,

The problem is that the binding "{Binding Path=Data.FirstName}" is incorrect. There is no property FirstName on the data items that your are binding to. Since you are binding to DataRows you need to change the binding to "{Binding Path=Data[FirstName]}" .
Now your carrousel items should display the data correctly.

Regards,
Milan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Vandana]

Hi Milan,

After giving {Binding Path=Data.FirstName} it is working for FirstName and Phone. But it does not display Image in the rectangle (second row)
My code in xaml is like:

<Rectangle Grid.Row="1" RadiusX="3" RadiusY="3" Width="110" Height="80">
                                    <Rectangle.Fill>
                                        <ImageBrush x:Name="brush" ImageSource="{Binding Path=Data[Picture]}"/>
                                    </Rectangle.Fill>
</Rectangle>

I have created new column in dtatable like:
dt.Columns.Add("Picture", typeof(BitmapImage));

and added picture like:
dr["Picture"] = new BitmapImage(new Uri("sky.png", UriKind.RelativeOrAbsolute));
It gives runtime error

And when I use Code for picture
dr["Picture"] =  code here
Is there no compilation error but image is not displyed in carousel item. Can you please tell me where I am wrong?

Thanx and Regards
Vandana

[Milan]

Hi Vandana,

Your question has been addressed in another forum thread: http://www.telerik.com/community/forums/wpf/carousel/date-is-not-displayed-in-carousel-item.aspx

Regards,
Milan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.