Date is not displayed in Carousel item

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

    Posted 18 Feb 2009 Link to this post

    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.

     



  2. Milan
    Admin
    Milan avatar
    1989 posts

    Posted 19 Feb 2009 Link to this post

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

    Posted 19 Feb 2009 Link to this post

    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





  5. Milan
    Admin
    Milan avatar
    1989 posts

    Posted 21 Feb 2009 Link to this post

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

    Posted 23 Feb 2009 Link to this post

    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.
  8. Vandana
    Vandana avatar
    16 posts
    Member since:
    Feb 2009

    Posted 23 Feb 2009 Link to this post

    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

  9. Vandana
    Vandana avatar
    16 posts
    Member since:
    Feb 2009

    Posted 23 Feb 2009 Link to this post

    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



Back to Top
UI for WPF is Visual Studio 2017 Ready