Silverlight WP7 Change TextBlock Foreground in Item class code

Introduction
This post is a result of research I did for my own app project. I needed to change the Foreground color of a TextBlock via code based on the value of a property at runtime. The app is a Windows Phone 7 Pivot app with the default MVVM classes (provided by VS2010 during project creation). I found plenty of explanation and some sample code but couldn't make it work in my own app. I found the WinMilk app source code on CodePlex and knew that app did something very much like what I wanted to do. Thanks to the app authors for making the code available.

Feature Description
The data concept was of a collection of Items, where each item has a status and a color associated with that status. The visual concept was a PivotItem with a ListBox. The ListBox is bound to the data collection. The ListBox's StackPanel contains a TextBlock for the Item's Name. The Item's Name needs to change color based on the Item status.

Since the object is from a collection, it wasn't as easy as setting the object's Foreground color in the code-behind class. I needed to have the Item class contain the color that was associated with Item's status.

Steps to Complete
1) Create new Visual Studio Project for Windows Phone Pivot Application


2) Edit \ViewModels\ItemViewModel.cs for new property of LineColor

        public string LineColor
        {
            get
            {
                switch (LineOne)
                {
                    //case "design one":
                    //    return "#EA5200";
                    case "runtime on":
                        return "#0060BF";
                    case "runtime two":
                        return "#359AFF";
                    default:
                        return "#EA5200";
                }
            }
        }


The value of the LineOne property determines the LineColor. Notice there is no special markup for property declaration and that return type is string (not Colors, Color, or PaintColorBrush). 


3) Edit the same file, for the LineOne property, adding a NotifyPropertyChanged("LineColor"):

        public string LineOne
        {
            get
            {
                return _lineOne;
            }
            set
            {
                if (value != _lineOne)
                {
                    _lineOne = value;
                    NotifyPropertyChanged("LineOne");
                    NotifyPropertyChanged("LineColor");
                }
            }
        }
The NotifyPropertyChanged code is already provided as part of the project created by Visual Studio. 


4) Change \MainPage.xaml, find the markup for the LineOne Property to bind to the LineColor Property. The   markup provided by the project looked like:



<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Foreground="{Binding LineColor}"/>

The image below shows the color change from the first item's LineOne to the second item's LineOne.






Comments

  1. I am having this problem as well. Thank you for sharing. Will try it today.

    ReplyDelete

Post a Comment

Popular posts from this blog

Yet once more into the breech (of altered programming logic)

Simple WP7 Mango App for Background Tasks, Toast, and Tiles: Code Explanation

How to convert SVG data to a Png Image file Using InkScape