{"id":45,"date":"2012-07-20T08:38:00","date_gmt":"2012-07-20T08:38:00","guid":{"rendered":"http:\/\/tpodolak.com.hostingasp.pl\/blog\/2012\/07\/20\/windows-phone-skinnable-application\/"},"modified":"2016-01-31T00:12:25","modified_gmt":"2016-01-31T00:12:25","slug":"windows-phone-skinnable-application","status":"publish","type":"post","link":"https:\/\/tpodolak.com\/blog\/2012\/07\/20\/windows-phone-skinnable-application\/","title":{"rendered":"Windows Phone – skinnable application"},"content":{"rendered":"

1. Introduction<\/h3>\n

Today, I would like to present my concept of making skinnable application in Windows Phone 7.1. Making a skinnable application in Windows Phone might be a little bit tricky. Unfortunately, WP7 doesn’t support DynamicResource<\/i> keyword which is a basic tool for making skins in WPF. In order to overcome this inconvenience I decided to write a SkinManager<\/i> for WindowsPhone.<\/p>\n

2. Base view <\/h3>\n

As I mentioned before, there is no support for using dynamic resources in WP7, therefore, in order to force a control to change style, we have to assign this style in code behind. It is rather obvious that in a single window\/control there might be quite a lot of other controls whose style also should be changed. That is why, I decided to write controls iterator first.<\/p>\n

\r\npublic class ViewsEnumerator : IEnumerator\r\n{\r\n    private Stack _frameworkElementsStack = new Stack();\r\n    private FrameworkElement _current;\r\n    private readonly FrameworkElement _startingElement;\r\n    \r\n    public ViewsEnumerator(FrameworkElement stargingElement)\r\n    {\r\n        _startingElement = stargingElement;\r\n    }\r\n    \r\n    public void Dispose()\r\n    {\r\n        _current = null;\r\n        _frameworkElementsStack.Clear();\r\n        _frameworkElementsStack = null;\r\n    }\r\n \r\n    #region Implementation of IEnumerator\r\n\r\n    public bool MoveNext()\r\n    {\r\n        if (_current == null)\r\n        {\r\n            _current = _startingElement;\r\n            for (int i = 0; i < VisualTreeHelper.GetChildrenCount(_current); i++)\r\n                _frameworkElementsStack.Push((FrameworkElement)VisualTreeHelper.GetChild(_current, i));\r\n        }\r\n        else\r\n        {\r\n            if (_frameworkElementsStack.Count == 0) return false;\r\n            _current = _frameworkElementsStack.Pop();\r\n\r\n            for (int i = 0; i < VisualTreeHelper.GetChildrenCount(_current); i++)\r\n                _frameworkElementsStack.Push((FrameworkElement)VisualTreeHelper.GetChild(_current, i));\r\n            return true;\r\n        }\r\n        return true;\r\n    }\r\n\r\n    public void Reset()\r\n    {\r\n        _current = null;\r\n        _frameworkElementsStack.Clear();\r\n        _frameworkElementsStack = null;\r\n    }\r\n\r\n    public FrameworkElement Current\r\n    {\r\n        get { return _current; }\r\n    }\r\n\r\n    object IEnumerator.Current\r\n    {\r\n        get { return Current; }\r\n    }\r\n\r\n    #endregion\r\n}\r\n<\/pre>\n
In this iterator I used DFS algorithm for searching elements in a tree. Thanks to this piece of code I can take advantage of LINQ's benefits. In the next step I created base classes for views.<\/p>\n
\r\npublic interface IViewBase : IEnumerable\r\n{\r\n}\r\n\r\npublic class ViewBase : UserControl, IViewBase\r\n{\r\n   #region Implementation of IEnumerable\r\n\r\n    \/\/\/ \r\n    \/\/\/ Returns an enumerator that iterates through the collection.\r\n    \/\/\/ <\/summary>\r\n    \/\/\/ \r\n    \/\/\/ A  that can be used to iterate through the collection.\r\n    \/\/\/ <\/returns>\r\n    public IEnumerator GetEnumerator()\r\n    {\r\n        return new ViewsEnumerator(this);\r\n    }\r\n\r\n    \/\/\/ \r\n    \/\/\/ Returns an enumerator that iterates through a collection.\r\n    \/\/\/ <\/summary>\r\n    \/\/\/ \r\n    \/\/\/ An  object that can be used to iterate through the collection.\r\n    \/\/\/ <\/returns>\r\n    IEnumerator IEnumerable.GetEnumerator()\r\n    {\r\n        return GetEnumerator();\r\n    }\r\n\r\n    #endregion\r\n}\r\n<\/pre>\n
3. SkinManager class<\/h3>\n
Having prepared basis for skinnable control, let me introduce a custom attribute called the SkinnablePartAttribute<\/i><\/p>\n
\r\n[AttributeUsage(AttributeTargets.Class)]\r\npublic class SkinnablePartAttribute : Attribute\r\n{\r\n    public string ThemePartName { get; set; }\r\n}\r\n<\/pre>\n
This attribute should decorate custom controls which should have an ability to change theme\/skin. As you can see, the SkinnablePartAttribute<\/i> has a ThemePartName<\/i> property which holds information about a name of ResourceDictionary<\/i> where styles for the given control ought to be searched. Now, it is time to take a look at a SkinManager<\/i> class. The SkinManager<\/i> class has one public function - ApplySkin<\/i><\/p>\n
\r\npublic static void ApplySkin(TView view, string skinName)\r\n           where TView : FrameworkElement, IViewBase\r\n{\r\n    foreach (IViewBase control in view.Where(val => val.ImplementsInterfaceOf()))\r\n    {\r\n        var assemblyName = control.GetType().Assembly.FullName;\r\n        Uri parsedUri;\r\n        var attribute = control.GetType().GetCustomAttributes(typeof(SkinnablePartAttribute), true).SingleOrDefault();\r\n        if (attribute != null && Uri.TryCreate(string.Format(\"\/{0};component\/Themes\/{1}\/{2}.xaml\",assemblyName.Substring(0, assemblyName.IndexOf(\",\", StringComparison.Ordinal)), skinName,(attribute as SkinnablePartAttribute).ThemePartName), UriKind.Relative, out parsedUri))\r\n            ApplySkin(control, parsedUri);\r\n        else\r\n            Debug.WriteLine(string.Format(\"Could not find {0}\/{1}\", skinName,(attribute as SkinnablePartAttribute).ThemePartName));\r\n    }\r\n}\r\n<\/pre>\n
This function iterates through all controls which implement a IViewBase<\/i> interface - in other words, the function iterates through our custom controls. If a control is decorated with the SkinnablePartAttribue<\/i>, a new Uri<\/i> is created based on the information from the ThemePartName<\/i> property and from the skinName parameter(I assumed that all dictionaries are located in the Themes directory). In the final step, private function also known as the AppySkin<\/i> function is called. This function looks this way:<\/p>\n
\r\nprivate static void ApplySkin(TView view, Uri uri, int mergedDictionaryIndex = 0)\r\n            where TView :  IViewBase\r\n{\r\n    var castedView = view as FrameworkElement;\r\n    if(castedView == null) return;\r\n\r\n    var resourceMergedDictionary = castedView.Resources.MergedDictionaries[mergedDictionaryIndex];\r\n    var beforeClearDictionary = resourceMergedDictionary.ToDictionary(key => key.Value, val => new { key = val.Key, value = val.Value });\r\n    castedView.Resources.MergedDictionaries.Remove(resourceMergedDictionary);\r\n    resourceMergedDictionary.Clear();\r\n\r\n    var newStyleDictionary = new ResourceDictionary\r\n    {\r\n        Source = uri\r\n    };\r\n\r\n    castedView.Resources.MergedDictionaries.Insert(mergedDictionaryIndex, newStyleDictionary);\r\n    foreach (var control in view.Where(val => val.Style != null && !val.ImplementsInterfaceOf()).Where(control =>\r\n        beforeClearDictionary.ContainsKey(control.Style) && newStyleDictionary[beforeClearDictionary[control.Style].key] != null))\r\n        control.Style = newStyleDictionary[beforeClearDictionary[control.Style].key] as Style;\r\n\r\n    beforeClearDictionary.Clear();\r\n}\r\n<\/pre>\n
Here, all the magic begins. In the first step, current ResourceDictionary<\/i> is transformed into the standard dictionary. The key of this dictionary is a value of style \u2013 a reference to the style object. In the next step, I created a new ResourceDictionary<\/i> based on the Uri parameter passed to this function. In the last step, another loop over controls is performed. However, this time only controls with the assigned Style<\/i> property are taken into consideration. Then, if the newStyleDictionary<\/i> contains a key of given control style we are ready to swap styles.<\/p>\n
\r\ncontrol.Style = newStyleDictionary[beforeClearDictionary[control.Style].key] as Style;\r\n<\/pre>\n
Entire listing of SkinManager<\/i> is presented below<\/p>\n
\r\npublic static class SkinManager\r\n{\r\n    private static void ApplySkin(TView view, Uri uri, int mergedDictionaryIndex = 0)\r\n        where TView :  IViewBase\r\n    {\r\n        var castedView = view as FrameworkElement;\r\n        if(castedView == null) return;\r\n\r\n        var resourceMergedDictionary = castedView.Resources.MergedDictionaries[mergedDictionaryIndex];\r\n        var beforeClearDictionary = resourceMergedDictionary.ToDictionary(key => key.Value, val => new { key = val.Key, value = val.Value });\r\n        castedView.Resources.MergedDictionaries.Remove(resourceMergedDictionary);\r\n        resourceMergedDictionary.Clear();\r\n\r\n        var newStyleDictionary = new ResourceDictionary\r\n        {\r\n            Source = uri\r\n        };\r\n\r\n        castedView.Resources.MergedDictionaries.Insert(mergedDictionaryIndex, newStyleDictionary);\r\n        foreach (var control in view.Where(val => val.Style != null && !val.ImplementsInterfaceOf()).Where(control =>\r\n            beforeClearDictionary.ContainsKey(control.Style) && newStyleDictionary[beforeClearDictionary[control.Style].key] != null))\r\n            control.Style = newStyleDictionary[beforeClearDictionary[control.Style].key] as Style;\r\n\r\n        beforeClearDictionary.Clear();\r\n\r\n    }\r\n    \r\n    public static void ApplySkin(TView view, string skinName)\r\n       where TView : FrameworkElement, IViewBase\r\n    {\r\n\r\n        foreach (IViewBase control in view.Where(val => val.ImplementsInterfaceOf()))\r\n        {\r\n            var assemblyName = control.GetType().Assembly.FullName;\r\n            Uri parsedUri;\r\n            var attribute = control.GetType().GetCustomAttributes(typeof(SkinnablePartAttribute), true).SingleOrDefault();\r\n            if (attribute != null && Uri.TryCreate(string.Format(\"\/{0};component\/Themes\/{1}\/{2}.xaml\",assemblyName.Substring(0, assemblyName.IndexOf(\",\", StringComparison.Ordinal)), skinName,(attribute as SkinnablePartAttribute).ThemePartName), UriKind.Relative, out parsedUri))\r\n                ApplySkin(control, parsedUri);\r\n            else\r\n                Debug.WriteLine(string.Format(\"Could not find {0}\/{1}\", skinName,(attribute as SkinnablePartAttribute).ThemePartName));\r\n            \r\n        }\r\n    }\r\n}\r\n<\/pre>\n
4. Example of usage<\/h3>\n
In order to use the SkinManager<\/i> it is essential to make some preparation. First of all, you have to create Themes<\/i> directory in a project. In this directory there must be separate subdirectories for every skin you would like to use. What is more, in these subdirectories you should place all ResourceDictionaries<\/i> specified in the SkinnablePartAttribute<\/i>. A sample directory structure is shown in the picture below:
\n\"DirectoryStructure\"<\/a>
\nThe very last step is to make controls (which should be skinnable) inherit from ViewBase<\/i>. Here is example of usage<\/p>\n
\r\nnamespace Joomanji.Chat.Client.Views\r\n{\r\n    [SkinnablePart(ThemePartName = \"ChatWindowSkin\")]\r\n    public partial class ChatWindowView : ViewBase\r\n    {\r\n        public ChatWindowView()\r\n        {\r\n            SkinManager.ApplySkin(this, \"Red\"); \/\/ change skin\r\n        }\r\n    }   \r\n}\r\n<\/pre>\n
and screenshots of the same view with different skin<\/p>\n
\n
\n\"skinnable<\/a>\n<\/div>\n
\n\"skinnable<\/a>\n<\/div>\n<\/div>\n
<\/div>\n
5. Controls with dynamically changing content<\/h3>\n
After some test, it turned out that the mechanism presented above has problems with controls which change their content dynamically. Let me clarify - styling grids, list boxes etc. work fine, however changing row styles and\u3000listboxitem styles are not working properly. In order to overcome this problem you must define a style for a specific target type. Here is an example of usage with the listbox:<\/p>\n
\r\n