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