Date is not displayed in Carousel item

[Vandana]

Hi,
I have created WAP Browser Application. Set Itemsource property to datatable.

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


FirstName is the field in datatable.

when I run this application i could see only  carousel items with first lable moving but not data is present(FirstName). but number of items are the number of rows in the datatable.

 

[Milan]

Hello Vandana,

It is actually hard to judje what is wrong from the XAML code that you have posed. Where exactly did you plug in the XAML? I would greatly appreciate it if you can provide us with more information about the XAML that you use.
The only hit that I can give you at the moment is to try and replace "Binding Path=Data.FirstName" with "Binding Path=FirstName".

Sincerely yours,
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,
My page.xaml 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>


page.xaml.cs is

namespace WPFBrowserApplication
{
    /// <summary>
    /// Interaction logic for Page1.xaml
    /// </summary>
    public partial class Page1 : Page
    {
        public Page1()
        {
            InitializeComponent();
            this.sampleRadCarousel.ItemsSource = getData();
                
            this.sampleRadCarousel.Loaded += new RoutedEventHandler(sampleRadCarousel_Loaded);
        }
       
        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"] = ' code for pic
                dt.Rows.Add(dr);
                dt.AcceptChanges();
                dr = dt.NewRow();
                dr["ID"] = 47;
                dr["FirstName"] = "Ana";
                dr["LastName"] = "Trujillo";
                dr["Phone"] = "6562-9722";
                dr["Picture"] = ' code for pic
              dt.Rows.Add(dr);
                dt.AcceptChanges();
            }
            catch(Exception ex)
            {

            }

            return dt;
        }

        void sampleRadCarousel_Loaded(object sender, RoutedEventArgs e)
        {
            Path path = CreateLinePath();
            Telerik.Windows.Controls.RadCarouselPanel panel = this.sampleRadCarousel.FindCarouselPanel();
            panel.ItemsPerPage = 7;
            panel.Path = path;
        }

        private Path CreateLinePath()
        {
            Path newPath = new Path();
            PathFigureCollectionConverter figureConverter = new PathFigureCollectionConverter();
            object geometryFigures = figureConverter.ConvertFromString("M30,347 L307.5,347");
            PathGeometry newGeometry = new PathGeometry();
            newPath.Stretch = Stretch.Fill;
            BrushConverter brushConverter = new BrushConverter();
            newPath.Stroke = (Brush)brushConverter.ConvertFromString("#FF0998f8");
            newPath.StrokeThickness = 2;
            newGeometry.Figures = (PathFigureCollection)geometryFigures;
            newPath.Data = (Geometry)newGeometry;
            return newPath;
        }
    }
}               



Also i could not see changes after i build xaml for first time.

Thanx
Vandana

[Milan]

Hello Vandana,

You just need to modify the bindings a little bit. Since you are biding to a datatable your data items are datarows and your bindings should look like that: "{Binding Path=Data[FirstName]}"  instead of  "{Binding Path=Data.FirstName}"  

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

dr["Picture"] = new BitmapImage(new Uri("sky.png", UriKind.RelativeOrAbsolute)) should work correctly. Could you be more specific about the runtime error that you are getting?
The most probable reason why you are seeing no picture is that sky.png is not availble. Is it included in your project? If it is not you could try adding it as a resource.

All the best,
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,
Error is:
An error occured in application you were using. only this...

I also tried by storing sky.png on d:

<Rectangle Grid.Row="1" RadiusX="3" RadiusY="3" Width="110" Height="80">
                                    <Rectangle.Fill>
                                        <ImageBrush ImageSource="D:\success.jpg"/>
                                    </Rectangle.Fill>
</Rectangle>

but getting same error.

Regards
Vandana

[Vandana]

Hi Milan,
Its working...
I have copy that image file in one folder and then added.
dr["Picture"] = new BitmapImage(new Uri("Images\\success.jpg", UriKind.RelativeOrAbsolute));


Thank you,
Vandana