Databinding not working in RadCarousel

4 posts, 0 answers
  1. Vandana
    Vandana avatar
    16 posts
    Member since:
    Feb 2009

    Posted 19 Feb 2009 Link to this post

    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








  2. Milan
    Admin
    Milan avatar
    1989 posts

    Posted 20 Feb 2009 Link to this post

    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.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Vandana
    Vandana avatar
    16 posts
    Member since:
    Feb 2009

    Posted 23 Feb 2009 Link to this post

    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
  5. Milan
    Admin
    Milan avatar
    1989 posts

    Posted 23 Feb 2009 Link to this post

    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.
Back to Top