WP7的控件开发入门（四）

ToolKit控件是微软开发的wp7之外的控件集，它不属于wp7自带的控件，所以你需要提前所以写设置才能成功使用该控件

这一步就让我花费了不少的时间去查资料：加载一个Windows.Phone.Controls.Toolkit.dll,在工程里选择add reference

然后浏览本机文件定位到C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Toolkit\Oct11\Bin

这里面就有我们所需要的文件（郁闷的是我的竟然没有Toolkit这个文件夹，最后还是拷贝同学的）

在xaml文件里加上xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

这样就能顺利的使用toolkit了

ContextMenu控件

<TextBlock Height="81"

HorizontalAlignment="Left"

Margin="45,109,0,0"

Name="textBlock1"

VerticalAlignment="Top"

Width="373"

Foreground="DarkGray"

Text="LongTouch"

<toolkit:ContextMenuService.ContextMenu>

<toolkit:ContextMenu

Width="200"

Height="600"

VerticalAlignment="Top"

HorizontalAlignment="Left"

Margin="20,20,0,0">

<toolkit:MenuItem Header="this is menu item 1" />

<toolkit:MenuItem Header="this is menu item 2" />

<toolkit:MenuItem>

<toolkit:MenuItem.Header>

</StackPanel>

</toolkit:MenuItem.Header>

</toolkit:MenuItem>

</toolkit:ContextMenu>

</toolkit:ContextMenuService.ContextMenu>

</TextBlock>

上面控件是长按弹出的提示效果，不能放在容器控件内。

ToggleSwitch 控件

<toolkit:ToggleSwitch

Width="200"

Height="200"

VerticalAlignment="Top"

HorizontalAlignment="Left"

Margin="120,50,0,0"

Header="开关"

Content="开"

Checked="ToggleSwitch_Checked"

Unchecked="ToggleSwitch_Unchecked">

</toolkit:ToggleSwitch>

可以在实现Checked和Unchecked事件里面调整开关的显示状态，详细的实现不再写了，前面类似的操作做过好多了

WrapPanel控件

这个控件我看视频上明明是<controlsToolkit:开头的，结果我的机子就是不行，后来还是改成<toolkit:

<toolkit:WrapPanel

Height="300"

HorizontalAlignment="Left"

Margin="58,152,0,0"

Name="myWrap"

VerticalAlignment="Top"

Width="300"

Orientation="Horizontal"/>

接下来是用代码实现多个方框放在里面

for (int i = 0; i < 50; i++)

{

myWrap.Children.Add(new Rectangle() { Width = 50, Height = 50, Fill = new SolidColorBrush(Colors.DarkGray) });

myWrap.Children.Add(new Rectangle() { Width = 50, Height = 50, Fill = new SolidColorBrush(Colors.Yellow) });

myWrap.Children.Add(new Rectangle() { Width = 50, Height = 50, Fill = new SolidColorBrush(Colors.Red) });

myWrap.Children.Add(new Rectangle() { Width = 50, Height = 50, Fill = new SolidColorBrush(Colors.Green) });

myWrap.Children.Add(new Rectangle() { Width = 50, Height = 50, Fill = new SolidColorBrush(Colors.White) });

myWrap.Children.Add(new Rectangle() { Width = 50, Height = 50, Fill = new SolidColorBrush(Colors.Orange) });

myWrap.Children.Add(new Rectangle() { Width = 50, Height = 50, Fill = new SolidColorBrush(Colors.Magenta) });

}

当然如果是做软件，可以不把方块换成按钮，然后再添加事件

模拟机效果图：

DatePicker 控件是控制日期格式的

<toolkit:DatePicker

VerticalAlignment="Top"

HorizontalAlignment="Left"

Width="450"

Height="63"

Foreground="Red"

Name="datePicker1"

ValueChanged="datePicker1_ValueChanged"

ValueStringFormat="{}{0:D}">//这里是重点要说的，这里有n种可用组合，显示你想要的日期格式，如下图

<toolkit:DatePicker.Background>

<ImageBrush//此处简单提一下它跟Image控件的区别，Image控件是可以单独出现的，该控件是作为某控件的图片填充

ImageSource="Applicationicon.png"

Stretch="Fill">

</ImageBrush>

</toolkit:DatePicker.Background>

</toolkit:DatePicker>

另外在显示日期的这一页面，默认情况下，是不会显示正常的applicationbar的，需要自己的设置，方法为在工程根目录下添加文件夹名为Toolkit.Content,在里面把小对号跟小错号图片添加进去并改为content,就大功告成，如下图

TimePicker 由于该控件与DatePicker控件极为相似就不再废话了

<toolkit:TimePicker VerticalAlignment="Top"

HorizontalAlignment="Left"

Width="450"

Height="63"

Foreground="Red"

Name="datePicker1"

ValueChanged="timePicker1_ValueChanged"

ValueStringFormat="{}{0:D}">

<toolkit:TimePicker.Background>

<ImageBrush

ImageSource="Applicationicon.png"

Stretch="Fill">

</ImageBrush>

</toolkit:TimePicker.Background>

</toolkit:TimePicker>

private void timePicker1_ValueChanged(object sender, DateTimeValueChangedEventArgs e)

{

PageTitle.Text = e.NewDateTime.ToString();

}

NavigationTransition控件，作用是设置页面进入或者是退出的效果

挺简单的，好多效果自己去尝试，想实现这个控件的前提是在App.xaml.cs文件中做这样的修改

// RootFrame = new PhoneApplicationFrame();

RootFrame = new TransitionFrame();

详细代码如下

<toolkit:TransitionService.NavigationInTransition>

<toolkit:NavigationInTransition>

<toolkit:NavigationInTransition.Backward>

<toolkit:RotateTransition Mode="Out180Clockwise"/>

</toolkit:NavigationInTransition.Backward>

<toolkit:NavigationInTransition.Forward>

<toolkit:RotateTransition Mode="Out180Clockwise"/>

</toolkit:NavigationInTransition.Forward>

</toolkit:NavigationInTransition>

</toolkit:TransitionService.NavigationInTransition>

<toolkit:TransitionService.NavigationOutTransition>

<toolkit:NavigationOutTransition>

<toolkit:NavigationOutTransition.Backward>

<toolkit:RotateTransition Mode="Out180Clockwise"/>

</toolkit:NavigationOutTransition.Backward>

<toolkit:NavigationOutTransition.Forward>

<toolkit:RotateTransition Mode="Out180Clockwise"/>

</toolkit:NavigationOutTransition.Forward>

</toolkit:NavigationOutTransition>

</toolkit:TransitionService.NavigationOutTransition>

ListPicker控件，该控件真是有的说了，纠结了我好长时间才弄明白

该控件的作用主要是实现一个类似下拉列表框的作用，但是功能比简单的列表框多就是了

首先讲一下这个最简单的实现效果，

代码：

<toolkit:ListPicker

Name="listPicker1"

Width="400"

Height="360"

VerticalAlignment="Top"

HorizontalAlignment="Left"

Margin="20,20,0,0">

<sys:String>Red</sys:String>//使用这种方式切入字符串就得进入这个命名空间

<sys:String>Green</sys:String>// xmlns:sys="clr-namespace:System;assembly=mscorlib"

<sys:String>Blue</sys:String>

</toolkit:ListPicker>

图示：

接下来就是点击详细的列表在另外一张页面中现实的那种情况

这是目标效果图：

点击后：

我是这样写的：

<toolkit:ListPicker Header="Full ListPicker"

Name="listPicker2"

Width="410"

ItemsSource="{Binding}"

Margin="20,0,26,155" Height="325" VerticalAlignment="Bottom">

<toolkit:ListPicker.FullModeItemTemplate>

</StackPanel>

</DataTemplate>

</toolkit:ListPicker.FullModeItemTemplate>

<toolkit:ListPicker.ItemTemplate>

</StackPanel>

</DataTemplate>

</toolkit:ListPicker.ItemTemplate>

</toolkit:ListPicker>

后台代码：

static readonly String[] str = { "magenta", "purple", "teal", "lime"};

DataContext = str;

按照视频的知道满怀期待得等到该控件会弹出新的展现界面，来罗列详细选项的

结果是这样的：

故百思不得其解，最后捉摸了半天才发现真是个蛋疼的问题啊，这个小问题好多博主也练过这个控件的竟然没人指出来，看来大家都是比着视频一点也不改的照打啊。

此处是我的填充内容过于少的问题，如果改成这样，再运行OK了

static readonly String[] str = { "magenta", "purple", "teal", "lime", "brown", "pink", "orange", "blue", "red", "green" };

posted @ 2012-04-01 00:15 张小然阅读(486) 评论(0) 收藏举报

刷新页面返回顶部

WP7的控件开发入门（四）

公告