• 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" };

  • 相关阅读:
    https://leetcode-cn.com/problems/binary-search/solution/er-fen-cha-zhao-by-leetcode/
    Question_add-two-numbers
    leetcode merge-two-sorted-lists
    leetcode 1108
    leetcode 1107
    git
    sql 语句
    cas
    OMP 算法
    OC----预处理器
  • 原文地址:https://www.cnblogs.com/zhangran/p/2427845.html
Copyright © 2020-2023  润新知