Getting a Record ID from the selected item in a crousel.

[Simon Allport]

Hi,
I have a carousel, and when i scroll , click through the items and then double click on a item, I would like to extract the  value from the carousel. As I can't see anything obvious like you would find in a combo box.

For example I have  a list of employees with a 'name' and 'employee id'. I select double click on a employee and i want to then be able to get the employee id.

My Xaml

<Page x:Class="Elica_WardView.Page1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Page1"
    xmlns:local="clr-namespace:Elica_WardView"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:carousel="clr-namespace:Telerik.Windows.Controls.Carousel;assembly=Telerik.Windows.Controls.Navigation">
    <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="BackGround" Width="2000" Height="900" Canvas.Left="0" Canvas.Top="0">
        <Canvas.Background>
            <LinearGradientBrush StartPoint="0.505999,-0.00069987" EndPoint="0.505999,1.0007">
                <LinearGradientBrush.GradientStops>
                    <GradientStop Color="#FF388CE3" Offset="0"/>
                    <GradientStop Color="#FFFFFFFF" Offset="1"/>
                </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
        </Canvas.Background>
        <Grid Width="2000">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="800" />
          </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="450"/>
           </Grid.RowDefinitions>
            <Grid.Resources>
                <DataTemplate DataType="{x:Type local:MyMaps}">

                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="450" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="290" />
                                <RowDefinition Height="100" />
                            </Grid.RowDefinitions>
                            <Image Source="{Binding Path=Image}" Grid.Column="0" Grid.Row="0" MouseDown="Image_MouseDown"/>
                            <TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding Path=Description}" FontSize="14"/>

                        </Grid>

                </DataTemplate>
            </Grid.Resources>

            <Image Source="Images/Logo.png" Grid.Column="0" Grid.Row="0" Width="450" />

            <telerik:RadCarousel Name="radCarousel1" Height="390" Grid.Row="1" VerticalAlignment="Bottom" Grid.Column="0" AutoGenerateDataPresenters="False" SelectedItem="{Binding Path=Ward}">

            </telerik:RadCarousel>
        </Grid>
    </Canvas>
</Page>

Example of the  code beind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Collections;
using Telerik.Windows.Controls.Carousel;
using Telerik.Windows.Controls;
using Telerik.Windows;
using Telerik.Windows.Data;

namespace Elica_WardView
{
    /// <summary>
    /// Interaction logic for Page1.xaml
    /// </summary>
    public partial class Page1 : Page
    {
        public Page1()
        {
            InitializeComponent();
            radCarousel1.ItemsSource = this.CreateItemSource();

       }


        private List<MyMaps> CreateItemSource()
        {
            List<MyMaps> list = new List<MyMaps>();
            list.Clear();
            list.Add(new MyMaps(new BitmapImage(new Uri("Wards/22c_thumb.png", UriKind.Relative)),"22","1"));
            list.Add(new MyMaps(new BitmapImage(new Uri("Wards/27g_thumb.png", UriKind.Relative)), "27", "2"));
            list.Add(new MyMaps(new BitmapImage(new Uri("Wards/a1_thumb.png", UriKind.Relative)), "a1", "3"));
            list.Add(new MyMaps(new BitmapImage(new Uri("Wards/wd16_thumb.png", UriKind.Relative)), "wd16", "4"));
            list.Add(new MyMaps(new BitmapImage(new Uri("Wards/27r_thumb.png", UriKind.Relative)), "27r", "5"));
            return list;
        }

        private void Image_MouseDown(object sender, MouseButtonEventArgs e)
        {
            if (e.ClickCount >= 2)
            {
              // Get the selected value here!!
                string img = radCarousel1.CurrentItem.ToString();

                string x = e.OriginalSource.ToString();
            }
        }





 }
    public class MyMaps
    {
        private BitmapSource _Image;
        private string _Description;
        private string _Ward;

        public MyMaps(BitmapSource Image, string Description,string Ward)
        {
            this._Image = Image;
            this._Description = Description;
            this._Ward = Ward;
        }

        public BitmapSource Image {
            get {return _Image;}
            set { _Image = value; }

        }

        public string Description {
            get { return _Description; }
            set { _Description = value; }
        }

        public string Ward {
            get { return _Ward; }
            set { _Ward = value; }
        }
    }





}

Can i have some help please or example of how it can be done.

Thanks

[Milan]

Hi Simon Allport,

You could either use SelectedItem or CurrentItem in chi situation. Just cast SelectedItem or CurrentItem to your data type and you will be able to get access to the properties:

01.private void Image_MouseDown(object sender, MouseButtonEventArgs e)
02.        {
03.            if (e.ClickCount >= 2)
04.            {
05.              // Get the selected value here!!
06.                var selectedItem = (MyDataType)radCarousel1.CurrentItem;
07.                var name = selectedItem.Name;
08.
09.                string x = e.OriginalSource.ToString();
10.            }
11.        }

Hope this helps.

Regards,
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.