Color Listpicker selected item/value/content which one to use?

[Wolfshund]

Hi,

in my Expense app, there is a Category table consisting of description field (string) and a ColorName field(string).
Now I thought I could do something like the categories page from the Telerik Tasks app (the marketplace one, as the ToDo app doesn't has this feature). Based on the examples.listpicker.mode code, I created the following XAML and C# code. The program works well, until I access the ColorName Textblock from the listpicker. As there are a color rectangle and a colorname I don't know how to get the colorname back from the listpicker to save it to the category record. Always getting exception error.

XAML

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock x:Name="ApplicationTitle" Text="Expense" Margin="0,-1,0,0" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock x:Name="PageTitle" Text="add new category" Margin="0,-1,0,0" FontSize="43.333" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>
    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <telerikPrimitives:RadTextBox Height="110" Header="Description" HorizontalAlignment="Left" Margin="-6,10,0,0" x:Name="txtCategory"
                                      Text="" Watermark="enter some text"  VerticalAlignment="Top" Width="456" />
        <telerikInput:RadListPicker x:Name="ColorPicker" InlineModeThreshold="12"
                                    Header="Select Color" Margin="6,142,18,0" >
            <telerikInput:RadListPicker.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Rectangle Fill="{Binding ColorName}" Width="24" Height="24"/>
                        <TextBlock Text="{Binding ColorName}" Margin="12 -3 0 0"/>
                    </StackPanel>
                </DataTemplate>
            </telerikInput:RadListPicker.ItemTemplate>
        </telerikInput:RadListPicker>
    </Grid>
</Grid>

And C# Code

namespace Expense
{
    public partial class AddCategorie : PhoneApplicationPage
    {
        public AddCategorie()
        {
            InitializeComponent();
            this.DataContext=this;
            this.ColorPicker.ItemsSource = new ColorItem[] {
                new ColorItem(Colors.Blue, "blue"),
                new ColorItem(Colors.Red, "red"),
                new ColorItem(Colors.Green, "green"),
                new ColorItem(Colors.Orange, "orange"),
                new ColorItem(Colors.Purple, "purple"),
                new ColorItem(Colors.Magenta, "magenta"),
                new ColorItem(Colors.Black, "black"),
                new ColorItem(Colors.White, "white"),
                new ColorItem(Colors.Yellow, "yellow"),
                new ColorItem(Colors.Cyan, "cyan"),
                new ColorItem(Colors.Gray, "gray"),
                new ColorItem(Colors.Brown, "brown")
            };
        }


        public class ColorItem
        {
            public ColorItem(Color color, string name)
            {
                this.Color = color;
                this.ColorName = name;
            }

            public Color Color
            {
                get;
                set;
            }

            public string ColorName
            {
                get;
                set;
            }
        }

        private void SaveButton_Click(object sender, EventArgs e)
        {
            // Confirm there is some text in the text box.
            if (txtCategory.Text.Length > 0)
            {
                // Create a Expense item.
                Category newCategoryItem = new Category

                {
                    Description = txtCategory.Text,
                    ColorCode = ColorPicker.SelectedItem.ToString()
                };

                // Add the item to the ViewModel.
                App.Context.CategoryItems.InsertOnSubmit(newCategoryItem);
                App.Context.SubmitChanges();

                // Return to the main page.
                if (NavigationService.CanGoBack)
                {
                    NavigationService.GoBack();
                }
            }

        }

The datacontext is setup properly, as I tested it setting a default colorname (not using the listpicker one's). I'm sure that the XAML is correct, so I'm certain to miss the use of the Listpicker selectitem properties or maybe indexing?. Any hints?

Kind regards,
Joerg

[Kiril Stanoev]

Hello Joerg,

Thank you for contacting us. There are couple of ways to achieve what you're looking for. I'll give you both and it will be up to you to decide which one to use.

1. The first approach will require for you to override the .ToString() method inside the ColorItem class:

public class ColorItem
{
    public ColorItem(Color color, string name)
    {
        this.Color = color;
        this.ColorName = name;
    }

    public Color Color
    {
        get;
        set;
    }

    public string ColorName
    {
        get;
        set;
    }

    public override string ToString()
    {
        return this.ColorName;
    }
}

The rest of the app can remain the same. By overriding .ToString(), you tell what will be returned when .ToString() is called over an instance of ColorItem. What I mean is that if you do the following:

Category newCategoryItem = new Category();
newCategoryItem.Description = txtCategory.Text;
newCategoryItem.ColorCode = ColorPicker.SelectedItem.ToString();

newCategoryItem.ColorCode will be populated will a readable string such as blue, green, orange etc. and not the default .ToString() representation which will be something like "{Name of the application}.ColorItem"

More information on how to properly override the .ToString() of an object can be found here:

http://msdn.microsoft.com/en-us/library/ms173154(v=vs.80).aspx 

2. The second approach is to cast the ColorPicker.SelectedItem to ColorItem:

Category newCategoryItem = new Category();
newCategoryItem.Description = txtCategory.Text;
newCategoryItem.ColorCode = (ColorPicker.SelectedItem as ColorItem).ColorName;

Give both approaches a try and let me know how it works for you. I'd be glad to further assist you.

All the best,
Kiril Stanoev
the Telerik team

[Wolfshund]

Hi Kiril,

thank you very much for your kind help.
You Telerik guys are incredible.
Both versions are working perfectly, but I decided to use the second one, looks more professional ;-) 
although the first version is much more understandable for me on first sight. Again, some new stuff learned! 

Kind regards,
Joerg