WP7中类似系统颜色选择的控件PickerBox的使用

WP7中,有时候UI有这样的需求,需要给用户一个选择项,但是这个选择项的数目很多.这时候下拉选择就不适合了.在系统中有一个很好的实现方式,就是在系统主题设置颜色的方式.这种方式可以很好的解决这个问题.不过可惜的是,不管是在SDK中还是在TOOLKIT中,都没有类似的控件.不过好在,有人已经写好了.我们直接拿来用,就不用重复造轮子了.
控件效果是这样的.





既然控件已经有人写好了,那么我们来看看怎么调用.
先看简单的,只有文字的.

private string[] data = new string[] { "erte 1", "ywfd 2", "ksdd 3", "jmas 4", "laer 5", "oper 6", "hola 7", "mora 8", "hdrf 9", "vdfe 10", "gfds 11" };
private void InitPickerBoxDialog()
{
PickerBoxDialog dialog = new PickerBoxDialog();
// Item的内容
dialog.ItemSource = data;
//标题
dialog.Title = "FIRST DAY OF THE WEEK";
// Dialog关闭的时候触发的事件
dialog.Closed += new EventHandler(dialog_Closed);
dialog.show();
}

void dialog_Closed(object sender, EventArgs e)
{
string selcontent = data[selectedIndex];
}

在强大的封装下,一切都很简单.
很明显,有时候单纯的一行文字并不能满足要求.接下来我们来看复杂的,如何自定义他.

首先,要定义一个Style

<Style TargetType="control:PickerBoxDialog" x:Key="Custom">
<Setter Property="Background" Value="{StaticResource PhoneChromeBrush}"/>
<Setter Property="Width" Value="480" />
<Setter Property="Height" Value="800" />
<Setter Property="Margin" Value="0" />

<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="control:PickerBoxDialog">
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,30,0,40">
<TextBlock x:Name="DialogTitle" Text="MY DIALOG TITLE" Style="{StaticResource PhoneTextNormalStyle}" />
</StackPanel>

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"  >
<ListBox Name="listBox" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="item" Orientation="Horizontal" Margin="5, 25, 0, 25">
<Rectangle Fill="{Binding Color, Converter={StaticResource ColorToBrushConverter}}" Width="42" Height="42" />
<TextBlock Margin="15, 0, 0, 0" Text="{Binding Text}" FontSize="40" TextWrapping="Wrap" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

这个Style就是Dialog的样式,
然后和之前一样,绑定数据源,然后把Dialog显示出来

this.customDialog = new PickerBoxDialog();
this.customDialog.Title = "ACCENTS";

// Assign our style to the dialog
this.customDialog.Style = this.Resources["Custom"] as Style;
this.customDialog.ItemSource = viewModel.Items;
this.customDialog.Closed += new EventHandler(customDialog_Closed);
this.custionDialog.show();

ViewModule 和 Converter的代码就不贴出来了,和一般绑定一个LISTVIEW的数据写法是一样的.

完整代码和控件到附件中去下载.

来自WPDevN: http://www.wpdevn.com/showtopic-109.aspx