CODEWITHSUNDEEP
c#windows-phone-7xaml
m_vitaly
m_vitaly

Reputation: 11952

WP7: Styling ListBox items

I'm new to Windows Phone 7 development. I need to create a page very similar to the settings app page. Something like this (but without the menu at the top and the subtext for each item):

(source: dotnetapp.com)

So far I've got a listbox with items, but clicking on one of the items, the item color changes and it doesn't have the "pushed button" effect like the settings application has.

First question is how do I create this beautiful pushed button effect (notice that the button tilts when pressed depending on the position of the click).

My second question is about styling items differently. The ItemsSource of the listBox is defined like this:

List<string> firstList;
List<string> secondList;

public MainPage()
{
    ...
    List<string> lst = new List<string>();
    lst.AddRange(firstList);
    lst.AddRange(secondList);
    listBox1.ItemsSource = lst;
    ...

I need to style the items differently whether they come from firstList or secondList, for example if the item is from firstList its color should be blue.

I think it should be done using StaticResource, but i'm not sure. Maybe I'll need to somehow wrap the string so that it will have a getter for defining from which list it comes from.

Thanks.

Upvotes: 2

Views: 602

Answers (1)

Dominik Kirschenhofer
Dominik Kirschenhofer

Reputation: 1205

Question 1 is answered (see William Mekanis comment)

For question 2 you have one big problem... you are binding a list of strings... no change to see which item is coming from which list. I would create something like a view model for my DataSource list.

Something like (NotifyPropertyChanged is ignored here, implement it if needed and use an ObservableCollection also ;) ):

public class ListDataSourceViewModel
{
    public string Text {get; set;}
    public bool IsFromFirstList {get; set;}
}

In case you have more lists you could also use an enum or whatever as list identifier...

That you create a new list for the DataSource like:

lst.AddRange(firstList.Select(item => new ListDataSourceViewModel 
     {
         Text = item, IsFromFirstList = true
     }
).ToArray());
lst.AddRange(secondList.Select(item => new ListDataSourceViewModel 
{
     Text = item, IsFromFirstList = false
}
).ToArray());

Afterwards create a datatemplate for your listitem binding the text to a textblock and the font color for your textblock to the IsFromFirstList property using a converter.

This code is written from mind, without VS... not shure if u can copy paste without problem but it should give you the idea ;) If you need help with creating the datatemplate and the converter just tell me!

Edit:

I rethought my suggestion... using converters, specialy in (potential) large lists, is not a good idea (for performance point of view). In your case it is anyway not a problem to use the needed color directly in the viewmodel.

I would change

public bool IsFromFirstList {get; set;}

to 

public Color WhatEverColor {get; set;}

set it as needed when the VMs are created and bind it to wherever you need it.

Hope it helps!

Upvotes: 1

Related Questions