17:32
Tomek
1. Introduction
Hi 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 keyword which is a basic tool for making skins in WPF. In order to overcome this inconvenience I decided to write a SkinManager for WindowsPhone.
2. Base view
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.
public class ViewsEnumerator : IEnumerator<FrameworkElement>
{
private Stack<FrameworkElement> _frameworkElementsStack = new Stack<FrameworkElement>();
private FrameworkElement _current;
private readonly FrameworkElement _startingElement;
public ViewsEnumerator(FrameworkElement stargingElement)
{
_startingElement = stargingElement;
}
public void Dispose()
{
_current = null;
_frameworkElementsStack.Clear();
_frameworkElementsStack = null;
}
#region Implementation of IEnumerator
public bool MoveNext()
{
if (_current == null)
{
_current = _startingElement;
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(_current); i++)
_frameworkElementsStack.Push((FrameworkElement)VisualTreeHelper.GetChild(_current, i));
}
else
{
if (_frameworkElementsStack.Count == 0) return false;
_current = _frameworkElementsStack.Pop();
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(_current); i++)
_frameworkElementsStack.Push((FrameworkElement)VisualTreeHelper.GetChild(_current, i));
return true;
}
return true;
}
public void Reset()
{
_current = null;
_frameworkElementsStack.Clear();
_frameworkElementsStack = null;
}
public FrameworkElement Current
{
get { return _current; }
}
object IEnumerator.Current
{
get { return Current; }
}
#endregion
}
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.
public interface IViewBase : IEnumerable<FrameworkElement>
{
}
public class ViewBase : UserControl, IViewBase
{
#region Implementation of IEnumerable
/// <summary>
/// Returns an enumerator that iterates through the collection.
/// </summary>
/// <returns>
/// A <see cref="T:System.Collections.Generic.IEnumerator`1"/> that can be used to iterate through the collection.
/// </returns>
public IEnumerator<FrameworkElement> GetEnumerator()
{
return new ViewsEnumerator(this);
}
/// <summary>
/// Returns an enumerator that iterates through a collection.
/// </summary>
/// <returns>
/// An <see cref="T:System.Collections.IEnumerator"/> object that can be used to iterate through the collection.
/// </returns>
IEnumerator IEnumerable.GetEnumerator()
{
return GetEnumerator();
}
#endregion
}
3. SkinManager class
Having prepared basis for skinnable control, let me introduce a custom attribute called the SkinnablePartAttribute
[AttributeUsage(AttributeTargets.Class)]
public class SkinnablePartAttribute : Attribute
{
public string ThemePartName { get; set; }
}
This attribute should decorate custom controls which should have an ability to change theme/skin. As you can see, the SkinnablePartAttribute has a ThemePartName property which holds information about a name of ResourceDictionary where styles for the given control ought to be searched. Now, it is time to take a look at a SkinManager class. The SkinManager class has one public function - ApplySkin
public static void ApplySkin<TView>(TView view, string skinName)
where TView : FrameworkElement, IViewBase
{
foreach (IViewBase control in view.Where(val => val.ImplementsInterfaceOf<IViewBase>()))
{
var assemblyName = control.GetType().Assembly.FullName;
Uri parsedUri;
var attribute = control.GetType().GetCustomAttributes(typeof(SkinnablePartAttribute), true).SingleOrDefault();
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))
ApplySkin(control, parsedUri);
else
Debug.WriteLine(string.Format("Could not find {0}/{1}", skinName,(attribute as SkinnablePartAttribute).ThemePartName));
}
}
This function iterates through all controls which implement a IViewBase interface - in other words, the function iterates through our custom controls. If a control is decorated with the SkinnablePartAttribue, a new Uri is created based on the information from the ThemePartName 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 function is called. This function looks this way:
private static void ApplySkin<TView>(TView view, Uri uri, int mergedDictionaryIndex = 0)
where TView : IViewBase
{
var castedView = view as FrameworkElement;
if(castedView == null) return;
var resourceMergedDictionary = castedView.Resources.MergedDictionaries[mergedDictionaryIndex];
var beforeClearDictionary = resourceMergedDictionary.ToDictionary(key => key.Value, val => new { key = val.Key, value = val.Value });
castedView.Resources.MergedDictionaries.Remove(resourceMergedDictionary);
resourceMergedDictionary.Clear();
var newStyleDictionary = new ResourceDictionary
{
Source = uri
};
castedView.Resources.MergedDictionaries.Insert(mergedDictionaryIndex, newStyleDictionary);
foreach (var control in view.Where(val => val.Style != null && !val.ImplementsInterfaceOf<IViewBase>()).Where(control =>
beforeClearDictionary.ContainsKey(control.Style) && newStyleDictionary[beforeClearDictionary[control.Style].key] != null))
control.Style = newStyleDictionary[beforeClearDictionary[control.Style].key] as Style;
beforeClearDictionary.Clear();
}
Here, all the magic begins. In the first step, current ResourceDictionary is transformed into the standard dictionary. The key of this dictionary is a value of style – a reference to the style object. In the next step, I created a new ResourceDictionary 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 property are taken into consideration. Then, if the newStyleDictionary contains a key of given control style we are ready to swap styles.
control.Style = newStyleDictionary[beforeClearDictionary[control.Style].key] as Style;Entire listing of SkinManager is presented below
public static class SkinManager
{
private static void ApplySkin<TView>(TView view, Uri uri, int mergedDictionaryIndex = 0)
where TView : IViewBase
{
var castedView = view as FrameworkElement;
if(castedView == null) return;
var resourceMergedDictionary = castedView.Resources.MergedDictionaries[mergedDictionaryIndex];
var beforeClearDictionary = resourceMergedDictionary.ToDictionary(key => key.Value, val => new { key = val.Key, value = val.Value });
castedView.Resources.MergedDictionaries.Remove(resourceMergedDictionary);
resourceMergedDictionary.Clear();
var newStyleDictionary = new ResourceDictionary
{
Source = uri
};
castedView.Resources.MergedDictionaries.Insert(mergedDictionaryIndex, newStyleDictionary);
foreach (var control in view.Where(val => val.Style != null && !val.ImplementsInterfaceOf<IViewBase>()).Where(control =>
beforeClearDictionary.ContainsKey(control.Style) && newStyleDictionary[beforeClearDictionary[control.Style].key] != null))
control.Style = newStyleDictionary[beforeClearDictionary[control.Style].key] as Style;
beforeClearDictionary.Clear();
}
public static void ApplySkin<TView>(TView view, string skinName)
where TView : FrameworkElement, IViewBase
{
foreach (IViewBase control in view.Where(val => val.ImplementsInterfaceOf<IViewBase>()))
{
var assemblyName = control.GetType().Assembly.FullName;
Uri parsedUri;
var attribute = control.GetType().GetCustomAttributes(typeof(SkinnablePartAttribute), true).SingleOrDefault();
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))
ApplySkin(control, parsedUri);
else
Debug.WriteLine(string.Format("Could not find {0}/{1}", skinName,(attribute as SkinnablePartAttribute).ThemePartName));
}
}
4. Example of usage
In order to use the SkinManager it is essential to make some preparation. First of all, you have to create Themes 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 specified in the SkinnablePartAttribute. A sample directory structure is shown in the picture below:
namespace Joomanji.Chat.Client.Views
{
[SkinnablePart(ThemePartName = "ChatWindowSkin")]
public partial class ChatWindowView : ViewBase
{
public ChatWindowView()
{
SkinManager.ApplySkin(this, "Red"); // change skin
}
}
}
and screenshots of the same view with different skin
5. Controls with dynamically changing content
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 listboxitem 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:
<Style TargetType="ListBox">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="ItemTemplate" Value="{StaticResource GeneralChatMessageTemplate}"/>
</Style>
Posted in: c#,Silverlight,Skins,Themes,Windows-Phone
0 komentarze:
Prześlij komentarz