RadCarouselPanel with UserControl items

2 posts, 0 answers
  1. newbie
    newbie avatar
    15 posts
    Member since:
    Oct 2010

    Posted 27 Oct 2010 Link to this post

    Hi!

    I am attempting to get a Carousel control to work for me but I have been running into some problems.

    First off, I started by using a RadCarousel control to display some data about a person. I set the template for the control and bound it to a list of Person objects. Everything worked well until I tried to change the Path/Trajectory of the careousel. I discovered that you cannot change it.

    So, I switched to the RadCarouselPanel but I have been running into problems with it.
    I have a custom UserControl that displays the person's information but when I add these items the RadCarouselPanel does not rotate the items; however, if I put Image controls in the RadCarouselPanel, it will rotate (up to the point where a user control is next in the list).

    The user control is just a grid with an image in the first row, followed by the person's first name and last name in the second row. It's extremely simple.

    I have read that people have had problems adding buttons to the RadCarouselPanel because they capture the mouse click event...however my user control does not. It's just....a grid with some stuff in it.

    This is my Code-Behind for my window:
    (VB.NET)
    Public Class MainWindowAttempt2
     
        Public Sub New()
            ' This call is required by the designer.
            InitializeComponent()
        End Sub
        Protected Overloads Overrides Sub OnInitialized(ByVal e As EventArgs)
            MyBase.OnInitialized(e)
        End Sub
     
        Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
            Dim p As New People
            person1.ThePerson = p.People(0)
            person2.ThePerson = p.People(1)
            person3.ThePerson = p.People(2)
            person4.ThePerson = p.People(3)
            person5.ThePerson = p.People(4)
            person6.ThePerson = p.People(5)
            person7.ThePerson = p.People(6)
            person8.ThePerson = p.People(7)
        End Sub
     
    End Class



    This is what I have in my Window:
    (XAML)
    <Window xmlns:my1="clr-namespace:Infragistics.Windows.DataPresenter;assembly=InfragisticsWPF4.DataPresenter.v10.3" 
        x:Class="MainWindowAttempt2"
        xmlns:local="clr-namespace:TryingWPF"
        xmlns:my="clr-namespace:TryingWPF"
        xmlns:igWindows="http://infragistics.com/Windows"
        Height="500"
        Width="800"
        Title="MainWindowAttempt1" Background="Black" >
        <Window.Resources>
            <local:People x:Key="thePeople"></local:People>
            <DataTemplate x:Key="SimpleDataTemplate">
                <local:PersonIconUC ThePerson="{Binding}"></local:PersonIconUC>
            </DataTemplate>
     
            <DataTemplate x:Key="ResourcesComboItemTemplate">
                <Grid Width="134" Height="22" Margin="0,0,0,1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.Resources>
                        <Style TargetType="{x:Type Path}">
                            <Setter Property="Stroke" Value="#FFB4B4B4"/>
                        </Style>
                    </Grid.Resources>
                    <TextBlock
                Grid.Column="0"
                Text="{Binding Path=Name}"
                Margin="4,0,0,0"
                VerticalAlignment="Center"/>
                </Grid>
            </DataTemplate>
            <Path x:Key="defaultPath" x:Name="defaultPath" Margin="0,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Height="Auto" Width="Auto" Stretch="Fill" Opacity="1"
                      Data="M 28,250 C28,172.12684631347656 127.39120483398438,109 250,109 372.6087951660156,109 472,172.12684631347656 472,250 472,327.8731689453125 372.6087951660156,391 250,391 127.39120483398438,391 28,327.8731689453125 28,250 z"
                      Stroke="#FFB4B4B4" StrokeThickness="1"/>
            <x:Array x:Key="myPathsArray" Type="{x:Type Path}">
                <Path Name="horizontal" Margin="0,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Height="Auto" Width="Auto" Stretch="Fill" Opacity="1" Data="M 9,250 C9,250 491,250 491,250 " Stroke="#FFB4B4B4" StrokeThickness="1"/>
                <Path Name="lowerLeftU" Margin="0,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Height="Auto" Width="Auto" Stretch="Fill" Opacity="1"
                      Data="M 49,171 C49,171 -19,276 44,353 107,430 270.314697265625,433.61767578125 336,420 418,403 489,334 489,334 " Stroke="#FFB4B4B4" StrokeThickness="1"/>
                <Path Name="verticalLeft" Margin="0,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Height="Auto" Width="Auto" Stretch="Fill" Opacity="1" Data="M 0,0 C0,0 0,1 0,1" Stroke="#FFB4B4B4" StrokeThickness="1"/>
                <Path Name="circle" Margin="0,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Height="Auto" Width="Auto" Stretch="Fill" Opacity="1"
                      Data="M 28,250 C28,172.12684631347656 127.39120483398438,109 250,109 372.6087951660156,109 472,172.12684631347656 472,250 472,327.8731689453125 372.6087951660156,391 250,391 127.39120483398438,391 28,327.8731689453125 28,250 z"
                      Stroke="#FFB4B4B4" StrokeThickness="1"/>
                <Path Name="circle_front" Margin="0,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Height="Auto" Width="Auto" Stretch="Fill" Opacity="1"
                      Data="M 254,153 C376.6087951660156,153 472,211.87362670898438 472,284.5 472,357.12640380859375 372.6087951660156,416 250,416 127.39120483398438,416 28,357.12640380859375 28,284.5 28,213.47877502441406 128.04635620117188,155.60911560058594 246.90530395507812,153.08578491210938 "
                      Stroke="#FFB4B4B4" StrokeThickness="1"/>
                <Path Name="inverseParabola" Margin="0,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Height="Auto" Width="Auto" Stretch="Fill" Opacity="1"
                      Data="M 12,444 C12,444 61,192 239,192 417,192 487,438 487,438 " Stroke="#FFB4B4B4" StrokeThickness="1"/>
                <Path Name="rightArc" Margin="0,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Height="Auto" Width="Auto" Stretch="Fill" Opacity="1"
                      Data="M 288,9 C406,9 502,134 460,263 406.58856201171875,427.0494079589844 269,483 72,483 " Stroke="#FFB4B4B4" StrokeThickness="1"/>
                <Path Name="zigzag" Margin="0,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Height="Auto" Width="Auto" Stretch="Fill" Opacity="1"
                      Data="M 21,30 C21,30 468,30 468,30 468,30 468,174 468,174 468,174 20,174 20,174 20,174 20,336 20,336 20,336 468,336 468,336 468,336 468,480 468,480 468,480 18,480 18,480 "
                      Stroke="#FFB4B4B4" StrokeThickness="1"/>
                <Path Name="spiral" Margin="0,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Height="Auto" Width="Auto" Stretch="Fill" Opacity="1"
                      Data="M 286.6033935546875,250.22378540039062 C286.8534240722656,250.34091186523438 286.9825134277344,250.65719604492188 286.8481140136719,250.94395446777344 286.7137451171875,251.23068237304688 286.3520812988281,251.3793487548828 286.02471923828125,251.22596740722656 285.6973571777344,251.07257080078125 285.5283203125,250.65847778320312 285.7042541503906,250.2830047607422 285.8802185058594,249.9075164794922 286.3537902832031,249.712890625 286.78240966796875,249.91372680664062 287.2110595703125,250.1145782470703 287.43243408203125,250.65679931640625 287.2020263671875,251.1484375 286.97161865234375,251.64007568359375 286.3515930175781,251.89491271972656 285.790283203125,251.6319580078125 285.2290344238281,251.36895751953125 284.9391784667969,250.65899658203125 285.24090576171875,250.01524353027344 285.5425720214844,249.37147521972656 286.3544616699219,249.03781127929688 287.08935546875,249.38214111328125 287.8243103027344,249.72647094726562 288.2038269042969,250.65609741210938 287.80877685546875,251.4990234375 287.4137268066406,252.34194946289062 286.3506774902344,252.7788543701172 285.388427734375,252.32798767089844 284.4261169433594,251.87713623046875 283.92919921875,250.65989685058594 284.4464416503906,249.5561981201172 284.96368408203125,248.4524688720703 286.3555908203125,247.88037109375 287.6156311035156,248.47071838378906 288.8757019042969,249.06105041503906 289.5263366699219,250.65493774414062 288.84906005859375,252.10011291503906 288.1717529296875,253.5452880859375 286.3491516113281,254.29432678222656 284.6993408203125,253.52133178710938 283.049560546875,252.74830627441406 282.19757080078125,250.66143798828125 283.0843811035156,248.76914978027344 283.97113037109375,246.8768310546875 286.35760498046875,245.89593505859375 288.5179138183594,246.90806579589844 290.67828369140625,247.92022705078125 291.79388427734375,250.6529083251953 290.632568359375,253.1306915283203 289.4713134765625,255.60842895507812 286.3465576171875,256.892578125 283.51800537109375,255.56724548339844 280.68951416015625,254.24195861816406 279.22882080078125,250.66407775878906 280.7491149902344,247.41981506347656 282.26947021484375,244.17544555664062 286.36102294921875,242.49359130859375 290.06494140625,244.22885131835938 293.7689514160156,245.96420288085938 295.681640625,250.6494598388672 293.6905212402344,254.8976287841797 291.6994934082031,259.1455993652344 286.34210205078125,261.34716796875 281.4926452636719,259.0748596191406 276.6434326171875,256.80267333984375 274.13916015625,250.6685791015625 276.7454833984375,245.10643005371094 279.35198974609375,239.5439453125 286.36688232421875,236.66015625 292.71734619140625,239.63522338867188 299.068115234375,242.6104278564453 302.3475036621094,250.64353942871094 298.9334411621094,257.9270935058594 295.5196533203125,265.2101135253906 286.33441162109375,268.98419189453125 278.02044677734375,265.0882873535156 269.70703125,261.1925964355469 265.4136047363281,250.6763458251953 269.881591796875,241.1403045654297 274.3500671386719,231.60330200195312 286.3769226074219,226.6584014892578 297.2652282714844,231.7589111328125 308.1544494628906,236.85984802246094 313.7771301269531,250.63340759277344 307.9227600097656,263.121337890625 302.0692443847656,275.6075744628906 286.3212890625,282.0769348144531 272.0679626464844,275.3971862792969 257.8161926269531,268.7181396484375 250.45558166503906,250.6896209716797 258.1142883300781,234.3408966064453 265.7743225097656,217.98928833007812 286.3941345214844,209.5090789794922 305.0635070800781,218.2533416748047 323.7354736328125,226.99884033203125 333.37615966796875,250.61599731445312 323.3362121582031,272.02752685546875 313.298583984375,293.4341735839844 286.2987365722656,304.52197265625 261.86419677734375,293.0687561035156 237.43414306640625,281.6175842285156 224.81556701660156,250.71237182617188 237.9415283203125,222.6846466064453 251.0714569091797,194.64849853515625 286.4236755371094,180.1027374267578 318.43646240234375,195.0932159423828 350.4569091796875,210.08726501464844 366.9875793457031,250.58615112304688 349.76605224609375,287.2992858886719 332.55133056640625,323.9979553222656 286.2601318359375,342.9967041015625 244.3749542236328,323.3577575683594 202.50294494628906,303.7250061035156 180.87185668945312,250.7513885498047 203.3621368408203,202.7039337158203 225.86404418945312,154.63168334960938 286.4742431640625,129.67405700683594 341.3727111816406,155.37069702148438 396.2937316894531,181.077880859375 424.6409606933594,250.5349578857422 395.0908508300781,313.48895263671875 365.5606689453125,376.4003601074219 286.19390869140625,408.940673828125 214.40447998046875,375.2626037597656 142.6536407470703,341.6026611328125 105.57711791992188,250.81825256347656 144.0952911376953,168.45826721191406 182.64755249023438,86.02544403076172 286.5611267089844,43.179595947265625 380.7217712402344,87.22339630126953 474.94891357421875,131.2982635498047 523.5664672851562,250.4471435546875 472.83233642578125,358.4096374511719 422.156982421875,466.2471008300781 286.0804443359375,521.9407348632812 163.06336975097656,464.1784973144531 40.15966033935547,406.4694519042969 -23.379179000854492,250.9327392578125 42.5390510559082,109.77686309814453 48.007965087890625,98.06584930419922 53.2337760925293,88.53321075439453 60.15699768066406,77.61809539794922 "
                      Stroke="#FFB4B4B4" StrokeThickness="1"/>
                <Path Name="spiral_lite" Margin="0,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Height="Auto" Width="Auto" Stretch="Fill" Opacity="1"
                      Data="M 284.5203857421875,240.43275451660156 C295.6313171386719,243.21499633789062 305.7552795410156,251.480712890625 310.16925048828125,264.4330749511719 317.0760498046875,284.7004699707031 306.4331359863281,309.9669189453125 281.9519348144531,318.3504638671875 257.4701232910156,326.7342224121094 226.96444702148438,313.91278076171875 216.86415100097656,284.3240966796875 206.76043701171875,254.72540283203125 222.29275512695312,217.80810546875 258.05877685546875,205.56231689453125 293.823486328125,193.31700134277344 338.36639404296875,212.0667266845703 353.0829772949219,255.28460693359375 367.7923583984375,298.48114013671875 345.1015319824219,352.32037353515625 292.9330139160156,370.1869201660156 240.76171875,388.05438232421875 175.73866271972656,360.7445068359375 154.18878173828125,297.6854248046875 132.62332153320312,234.58079528808594 165.722900390625,155.84722900390625 241.99557495117188,129.73573303222656 318.2622375488281,103.62630462646484 413.2167053222656,143.63694763183594 444.5440368652344,235.78671264648438 475.83837890625,327.8395080566406 427.45098876953125,442.51763916015625 316.31976318359375,480.5843811035156 205.1757354736328,518.6554565429688 66.58607482910156,460.5341796875 20.559154510498047,326.17291259765625 -22.77850341796875,199.66209411621094 17.320261001586914,90.10169982910156 125.22354888916016,10.899418830871582 "
                      Stroke="#FFB4B4B4" StrokeThickness="1"/>
                <Path Name="heart" Margin="0,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Height="Auto" Width="Auto" Stretch="Fill" Opacity="1"
                      Data="M 32,212 C32,212 227,-98 322,80 417,258 509,487 335,481 161,475 77,287 139,220 201,153 230,132 230,132 " Stroke="#FFB4B4B4" StrokeThickness="1"/>
            </x:Array>
     
        </Window.Resources>
        <Grid DataContext="{StaticResource thePeople}">
            <Grid.RowDefinitions>
                <RowDefinition Height="400"></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <!--<telerik:RadCarousel Grid.RowSpan="2" HorizontalAlignment="Left"
                                 ItemsSource="{Binding Path=People}"
                                 Name="RadCarousel1"
                                 VerticalAlignment="Top"
                                 Background="Black"
                                 ItemTemplate="{StaticResource SimpleDataTemplate}">
     
            </telerik:RadCarousel>-->
            <telerik:RadCarouselPanel Grid.Row="0" Name="Panel" IsOpacityEnabled="True" IsPathVisible="True"
                    ItemsPerPage="3" PathPadding="60,10,60,10" Background="Transparent" >
     
                <Image Source="/TryingWPF;component/Images/abc.jpg" Width="150"></Image>
                <Image Source="/TryingWPF;component/Images/abc.jpg" Width="150"></Image>
                <Image Source="/TryingWPF;component/Images/abc.jpg" Width="150"></Image>
                <Image Source="/TryingWPF;component/Images/abc.jpg" Width="150"></Image>
                <Image Source="/TryingWPF;component/Images/abc.jpg" Width="150"></Image>
                <Image Source="/TryingWPF;component/Images/abc.jpg" Width="150"></Image>
                <Image Source="/TryingWPF;component/Images/abc.jpg" Width="150"></Image>
                <Image Source="/TryingWPF;component/Images/abc.jpg" Width="150"></Image>
                <Image Source="/TryingWPF;component/Images/abc.jpg" Width="150"></Image>
                <Image Source="/TryingWPF;component/Images/abc.jpg" Width="150"></Image>
                <Image Source="/TryingWPF;component/Images/abc.jpg" Width="150"></Image>
                <local:PersonIconUC x:Name="person1"/>
                <local:PersonIconUC x:Name="person2"/>
                <local:PersonIconUC x:Name="person3" />
                <local:PersonIconUC x:Name="person4" />
                <local:PersonIconUC x:Name="person5" />
                <local:PersonIconUC x:Name="person6" />
                <local:PersonIconUC x:Name="person7" />
                <local:PersonIconUC x:Name="person8" />
                 
                 
     
            </telerik:RadCarouselPanel>
            <ComboBox Grid.Row="1" x:Name="cboResources" IsSynchronizedWithCurrentItem="True" ItemsSource="{StaticResource myPathsArray}"
                      ItemTemplate="{StaticResource ResourcesComboItemTemplate}" SelectedItem="{Binding Path=Path, ElementName=Panel}"
                      VerticalAlignment="Center" Height="24" HorizontalAlignment="Left" Width="141" SelectedIndex="0"/>
     
        </Grid>
    </Window>

  2. Milan
    Admin
    Milan avatar
    1989 posts

    Posted 28 Oct 2010 Link to this post

    Hello newbie,

    When working with data it is best to use RadCarousel instead of RadCarouselPanel. To change the path of a RadCarousel you can try the following approach:

    <Window x:Class="CarouselHorizontalPath.Window1"
        xmlns:System="clr-namespace:System;assembly=mscorlib"
        Title="Window1" Height="750" Width="700">
        <Window.Resources>
            <Path
              x:Key="horizontalPath"
              Stretch="Fill"
              Opacity="1"
              Data="M 9,200 C9,200 450,200 450,200 "
              Stroke="#FFB4B4B4"
              StrokeThickness="1"/>
        </Window.Resources>
        <Grid>
            <telerik:RadCarousel Name="RadCarousel1" Loaded="RadCarousel1_Loaded">
                <telerik:RadCarousel.ItemsPanel>
                    <ItemsPanelTemplate>
                        <telerik:RadCarouselPanel Path="{StaticResource horizontalPath}"/>
                    </ItemsPanelTemplate>
                </telerik:RadCarousel.ItemsPanel>
            </telerik:RadCarousel>
        </Grid>
    </Window>


    Greetings,
    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
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top