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