|
In Part 50 - Windows Phone 7 - ColorPicker article I talked about how to use System.Windows.Media.Colors to create ColorPicker. The System.Windows.Media.Colors has only 15 colors to choose from. There are additional predefined named colors which does not exist in System.Windows.Media.Colors, those color exists only in XAML. Eg. when you try to set background of canvas in XAML you get option of AliceBlue, AntiqueWhite, Aqua etc.
Let's see how the colors available in XAML can be used to create colorpicker.
ListBox, WrapPanel and Button will be use to demonstrate the example of color picker. Refer my previous article Part 47 - Windows Phone 7 - WrapPanel to know about wrappanel.
Download Silverlight Windows Phone Toolkit to use WrapPanel.
Step 1: Create a silverlight for Windows Phone project.
Step 2: Add reference of Microsoft.Phone.Controls.Toolkit.dll
Step 3: Add namespace of Microsoft.Phone.Controls.Toolkit in MainPage.xaml.
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
Step 4: Place a listbox containing WrapPanel and Button inside ContentPanel of MainPage.xaml.
<ListBox x:Name="listBox">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel FlowDirection="LeftToRight" ItemWidth="60" ItemHeight="60"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Button Click="btn_Click" BorderThickness="1" VerticalAlignment="Center" HorizontalAlignment="Center"Background="{Binding Color}" Margin="-10,-10,0,0" Height="60" Width="60" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Step 5: Create a class ColorItem with property Color
public class ColorItem
{
public SolidColorBrush Color { get; set; }
}
Step 6: Create a static class ColorPicker with ColorNames as Enum.
public static class ColorPicker
{
public enum ColorNames
{
AliceBlue,
AntiqueWhite,
Aqua,
Aquamarine,
Azure,
Beige,
Bisque,
Black,
BlanchedAlmond,
Blue,
BlueViolet,
Brown,
BurlyWood,
CadetBlue,
Chartreuse,
Chocolate,
Coral,
CornflowerBlue,
Cornsilk,
Crimson,
Cyan,
DarkBlue,
DarkCyan,
DarkGoldenrod,
DarkGray,
DarkGreen,
DarkKhaki,
DarkMagenta,
DarkOliveGreen,
DarkOrange,
DarkOrchid,
DarkRed,
DarkSalmon,
DarkSeaGreen,
DarkSlateBlue,
DarkSlateGray,
DarkTurquoise,
DarkViolet,
DeepPink,
DeepSkyBlue,
DimGray,
DodgerBlue,
Firebrick,
FloralWhite,
ForestGreen,
Fuchsia,
Gainsboro,
GhostWhite,
Gold,
Goldenrod,
Gray,
Green,
GreenYellow,
Honeydew,
HotPink,
IndianRed,
Indigo,
Ivory,
Khaki,
Lavender,
LavenderBlush,
LawnGreen,
LemonChiffon,
LightBlue,
LightCoral,
LightCyan,
LightGoldenrodYellow,
LightGray,
LightGreen,
LightPink,
LightSalmon,
LightSeaGreen,
LightSkyBlue,
LightSlateGray,
LightSteelBlue,
LightYellow,
Lime,
LimeGreen,
Linen,
Magenta,
Maroon,
MediumAquamarine,
MediumBlue,
MediumOrchid,
MediumPurple,
MediumSeaGreen,
MediumSlateBlue,
MediumSpringGreen,
MediumTurquoise,
MediumVioletRed,
MidnightBlue,
MintCream,
MistyRose,
Moccasin,
NavajoWhite,
Navy,
OldLace,
Olive,
OliveDrab,
Orange,
OrangeRed,
Orchid,
PaleGoldenrod,
PaleGreen,
PaleTurquoise,
PaleVioletRed,
PapayaWhip,
PeachPuff,
Peru,
Pink,
Plum,
PowderBlue,
Purple,
Red,
RosyBrown,
RoyalBlue,
SaddleBrown,
Salmon,
SandyBrown,
SeaGreen,
SeaShell,
Sienna,
Silver,
SkyBlue,
SlateBlue,
SlateGray,
Snow,
SpringGreen,
SteelBlue,
Tan,
Teal,
Thistle,
Tomato,
Transparent,
Turquoise,
Violet,
Wheat,
White,
WhiteSmoke,
Yellow,
YellowGreen
}
}
Step 7:Place below code in the constructor of MainPage or any method from where you want to invoke color picker. I have used FieldInfo of reflection to loop through enum to get the name of color. Then I have created a xamlString of Canvas with Background property and load it using XamlReader. Now I can get the background color from the Canvas which is available only in XAML.
Type enumType = typeof(ColorPicker.ColorNames);
FieldInfo[] enumCollection = enumType.GetFields(BindingFlags.Public | BindingFlags.Static);
List<ColorItem> lst = new List<ColorItem>();
ColorItem ci;
SolidColorBrush scb;
foreach (FieldInfo enumItem in enumCollection)
{
String xamlString = "<Canvas xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\" Background=\"" + enumItem.Name + "\"/>";
Canvas canvas = (Canvas)System.Windows.Markup.XamlReader.Load(xamlString);
SolidColorBrush solidColorBrush = (SolidColorBrush)canvas.Background;
Color color = solidColorBrush.Color;
ci = new ColorItem();
scb = new SolidColorBrush(color);
ci.Color = scb;
lst.Add(ci);
}
this.listBox.ItemsSource = lst;
Step 8: Add btn_Click event handler which will change the pick the color and change the ContentPanel backgroudn color.
private void btn_Click(object sender, RoutedEventArgs e)
{
Button button = (Button)sender;
ContentPanel.Background = button.Background;
}
Now run the application and click on any of the button, the contenpanel color will be changed with the selected color.
This ends the article of advanced color picker in Windows Phone 7.
|