zoukankan      html  css  js  c++  java
  • 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 Orientation="Horizontal">
                                        <Image Source="ApplicationIcon.png"/>
                                        <TextBlock Text="hello"/>
                                    </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>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <Rectangle Fill="{Binding}" Width="40" Height="40" Margin="10, 10, 10, 10"/>
                                <TextBlock Text="{Binding}" VerticalAlignment="Center"/>
                            </StackPanel>
                        </DataTemplate>
                    </toolkit:ListPicker.FullModeItemTemplate>
                    <toolkit:ListPicker.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <Rectangle Fill="{Binding}" Width="40" Height="40" Margin="10, 10, 10, 10"/>
                                <TextBlock Text="{Binding}" VerticalAlignment="Center"/>
                            </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" };

  • 相关阅读:
    网络七层
    微信小程序开发工具 常用快捷键
    BZOJ 1026 windy数 (数位DP)
    BZOJ 1026 windy数 (数位DP)
    CodeForces 55D Beautiful numbers (SPOJ JZPEXT 数位DP)
    CodeForces 55D Beautiful numbers (SPOJ JZPEXT 数位DP)
    HDU 3709 Balanced Number (数位DP)
    HDU 3709 Balanced Number (数位DP)
    UVA 11361 Investigating Div-Sum Property (数位DP)
    UVA 11361 Investigating Div-Sum Property (数位DP)
  • 原文地址:https://www.cnblogs.com/zhangran/p/2427845.html
Copyright © 2011-2022 走看看