• North American Sales: 1-800-231-8588
  • Global Contacts
  • My Account
Infragistics Infragistics
Menu
  • North American Sales: 1-800-321-8588
  • My Account
    • Sign In/Register
  • Design & DevelopmentDesign & Develop
    • Best Value
      Infragistics Ultimate The complete toolkit for building high performing web, mobile and desktop apps.
      Indigo.Design Use a unified platform for visual design, UX prototyping, code generation and application development.
    • Web
      Ignite UI for Angular Ignite UI for JavaScript Ignite UI for React Ultimate UI for ASP.NET Indigo.Design
    • Desktop
      Ultimate UI for Windows Forms Ultimate UI for WPF
      Prototyping
      Indigo.Design
    • Mobile
      Ultimate UI for Xamarin Ultimate UI for iOS Ultimate UI for Android
    • Automated Testing Tools
      Test Automation for Micro Focus UFT: Windows Forms Test Automation for Micro Focus UFT: WPF Test Automation for IBM RFT: Windows Forms
  • UX
    • Indigo.Design Desktop Collaborative prototyping and remote usability testing for UX & usability professionals
    • Indigo.Design A Unified Platform for Visual Design, UX Prototyping, Code Generation, and App Development
  • Business Intelligence
    • Reveal Embedded Accelerate your time to market with powerful, beautiful dashboards into your apps
    • Reveal App Empower everyone in your organization to use data to make smarter business decisions
  • Team Productivity
  • Learn & Support Support
    • Help & Support Documents
    • Blogs
    • Forums
    • Product Ideas
    • Reference Applications
    • Customer Stories
    • Webinars
    • eBook & Whitepapers
    • Events
  • Free Trials
  • Pricing
    • Product Pricing / Buy Online
    • Renew Existing License
    • Contact Us
WPF
  • Product Platforms
  • More
WPF
WPF Defining a Custom Path in the XamCarousel
  • Blog
  • Files
  • Wiki
  • Mentions
  • Tags
  • More
  • Cancel
  • New
WPF requires membership for participation - click to join
  • WPF
  • Configuring the XamTab Control
  • Creating a Custom Summary for the XamDataGrid
  • Defining a Custom Path in the XamCarousel
  • Enabling Row Summaries in the XamDataGrid
  • Exporting the XamDataGrid to Excel
  • Hosting a WPF Control in a Windows Forms Application
  • Printing the XamDataGrid with Infragistics.Reports
  • Spell Checking in the XamDataGrid
  • Tangerine -- A WPF Reference Application
  • Using the Infragistics WinGrid in a WPF Application
  • Validation in the XamDataGrid
  • XamDataGrid :: Copying to Excel via the Clipboard
  • XML Databinding with the XamDataGrid

Defining a Custom Path in the XamCarousel

Introduction

The XamCarousel line of controls brings the sizzle of WPF to the client developer. It makes it easy to create navigation views or data-bound contact rolodexes. This tutorial will demonstrate how to define a custom path upon which the carousel items will arrange themselves.

Creating a Custom Path

First step, is to define your custom path. This can be achieved by using the Pen Tool in Blend and having a little fun drawing. Essentially, what you are working on is getting the data from the path property and re-use it in your Carousel.

In XAML that path looks like this:

<Path x:Name="myPath"  Margin="0,0,0,0" HorizontalAlignment="Left" 
      VerticalAlignment="Top" Height="Auto" Width="Auto" Stretch="Fill" 
      Data="M8,210.04 C83.5,85.541096 177.5,84.54052 236.5,204.53999 295.5,
      324.54002 398.5,251.53956 409.5,210.53999 466.5,84.541153 561.5,88.54112 
      609.5,212.54011" 
      Stroke="#FF0000" StrokeThickness="1" />

Assigning the Custom Path to the Carousel

After the path is drawn, initialize one of the XamCarousel controls. In the case of this sample, we are going to add a custom path to our XamCarouselPanel which will host a series of images. The XAML code looks like this:

<igWindows:XamCarouselPanel Margin="0,0,0,0">
    <igWindows:XamCarouselPanel.ViewSettings>
          <igWindows:CarouselViewSettings IsListContinuous="True"/>
   </igWindows:XamCarouselPanel.ViewSettings>
   <Image Source="Images/Autumn Leaves.jpg" Width="130" />
   <Image Source="Images/Creek.jpg" Width="130" />
    …
</igWindows:XamCarouselPanel>

Next, we need to make a quick resource that will house our path definition. We can simply copy our above path into the <Grid.Resources> <Path x:key=”myPath”… /> </Grid.Resources> and assign a x:key name to the Path.

<igWindows:CarouselViewSettings IsListContinuous="True" 
           ItemPath="{StaticResource myPath}" ItemsPerPage=”7”/>

And that’s it, after that we have officially styled the xamCarousel to follow our custom path!

  • XamCarouselPanel
  • XamCarouseLlistbox
  • WPF
  • xamDataCarousel
  • Share
  • History
  • More
  • Cancel
Related
Recommended