This is a migrated thread and some comments may be shown as answers.

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

2 Answers 39 Views
ListPicker
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Wolfshund
Top achievements
Rank 2
Wolfshund asked on 14 Sep 2012, 08:31 AM

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

2 Answers, 1 is accepted

Sort by
0
Accepted
Kiril Stanoev
Telerik team
answered on 18 Sep 2012, 10:14 AM
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

Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.

0
Wolfshund
Top achievements
Rank 2
answered on 24 Sep 2012, 02:06 AM
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
Tags
ListPicker
Asked by
Wolfshund
Top achievements
Rank 2
Answers by
Kiril Stanoev
Telerik team
Wolfshund
Top achievements
Rank 2
Share this question
or