Silverlight Tookit控件集

Silverlight Tookit控件集,第1张

概述工具(控件集): 1.Contextmenu;2.ToggleSwitch;3.WrapPanel;4.DataPicker; 5.TimePicker;6.AutoCompleteBox;7.NavigationTransition; 8.ListPicker;9.LongListSelector 1.Contextmenu:长按d出菜单;不能在容器控件中使用 <toolkit:ContextM

工具(控件集):
1.Contextmenu;2.ToggleSwitch;3.WrapPanel;4.DatAPIcker;
5.TimePicker;6.autocompletebox;7.NavigationTransition;
8.ListPicker;9.LongListSelector

1.Contextmenu:长按d出菜单;不能在容器控件中使用
<toolkit:ContextMenuService.ContextMenu>(需额外添加代码)
 <toolkit:ContentMenu Height="400" margin="123,168,0"   HorizontalAlignment="left" VerticalAlignment="top"   WIDth="200" borderBrush="Red" borderThickness="5">
  <toolkit:MenuItem header="Test1"    Click="MenuItem_Click"/>
  <toolkit:MenuItem header="Test2"       Click="MenuItem_Click"/>
  <toolkit:Separator/>//分隔符控件
  <toolkit:MenuItem header="Test3"          Click="MenuItem_Click"/>
 </toolkit:ContentMenu>
</toolkit:ContextMenuService.ContextMenu>

---菜单增加图片---
<toolkit:ContextMenuService.ContextMenu>
 <toolkit:ContextMenu Height="400" margin="123,0"
  HorizontalAlignment="left" name="contextMenu1"   VerticalAlignment="top" WIDth="200" borderBrush="Red"   borderThickness="5">
  <toolkit:MenuItem header="Test1"    Click="MenuItem_Click"/>
  <toolkit:MenuItem header="Test2"          Click="MenuItem_Click"/>
  <toolkit:Separator/>
   <toolkit:MenuItem Click="MenuItem_Click">
    <toolkit:MenuItem.header>
     <StackPanel OrIEntation="Horizontal">
      <Image WIDth="50" Height="50"        Source="ApplicationIcon.png"/>
      <TextBlock Text="Test3"/>
     </StackPanel>
    </toolkit:MenuItem.header>
   </toolkit:MenuItem>
  </toolkit:ContextMenu>
</toolkit:ContextMenuSeervice.ContextMenu>

2.ToggleSwitch:有两种状态Checked和UnChecked
<toolkit:ToggleSwitch header="ToggleSwitch" Content="是"
 HorizontalAlignment="left" margin="74,106,0" name="toggleSwitch1"  Height="116"VeiticalAlignment="top"
WIDth="271" Checked="toggleSwitch1_Checked" UnChecked="toggleSwitch1_UnChecked"/>
<toolkit:ToggleSwitch header="ToggleSwitch" Height="116" HorizontalAlignment="left" margin="74,0,0" name="toggleSwitch2" VerticalAllignment="top" WIDth="271" Checked="toggleSwitch2_Checked" UnChecked="toggleSwitch2_UnChecked"/>

(对于中文文字需代码改写)在代码中:
在Checked事件中:toggleSwitch2.Content="是";
在UnChecked事件中:toggleSwitch2.Content="否";

3.WrapPanel:包含在控件里的元素从左到右或从上到下一次安排位置,并会自动换行(子控件自动排列,如:颜色、日历)
<controlsToolkit:WrapPanel x:name="wp1" WIDth="35"
margin="15,15,201" Height="300" VerticalAlignment="Bottom" OrIEntation="Horizontal"/>

在页面加载时,代码:
for(int i=0;i<30;i++)
{
wp1.Children.Add(new Rectangle({Height=50,WIDth=50, 
Fill=new SolIDcolorBrush(color.Yellow)});
wp1.Children.Add(new Rectangle({Height=50, 
Fill=new SolIDcolorBrush(color.Purple)});
wp1.Children.Add(new Rectangle({Height=50, 
Fill=new SolIDcolorBrush(color.Red)});
wp1.Children.Add(new Rectangle({Height=50, 
Fill=new SolIDcolorBrush(color.Black)});
wp1.Children.Add(new Rectangle({Height=50, 
Fill=new SolIDcolorBrush(color.brown)});
wp1.Children.Add(new Rectangle({Height=50, 
Fill=new SolIDcolorBrush(color.Cyan)});
wp1.Children.Add(new Rectangle({Height=50, 
Fill=new SolIDcolorBrush(color.Green)});
wp1.Children.Add(new Rectangle({Height=50, 
Fill=new SolIDcolorBrush(color.Gray)});
}

4.DatAPIcker:日期控件
<toolkit:DatAPIcker margin="41,121,0" Height="77"
name="datAPIaker1" VerticalAlignment="top" Foreground="White" HorizontalContentAlignment="Center"
ValueCahnge="datAPIcker1_ValueChanged">
<toolkit:DatAPIcker.Backgroung>
 <ImageBrush ImageSource="Image/hkd16.jpg"/>
</toolkit:DatAPIcker.Background>
</toolkit:DatAPIcker>

属性:ValueStringFormat:设置显示时间格式
Description:Short data format(DatAPIcker default)
XAML:"{}{0:d}"             Sample:9/20/2010
Description:Short data format(TimePicker default)
XAML:"{}{0:t}"             Sample:4:00 PM
Description:Long data format
XAML:"{}{0:D}"             Sample:Monday,September 20,2010
Description:Long time format
XAML:"{}{0:T}"             Sample:4:00:00 PM
Description:Explicit month/day/year fromat
XAML:"{}{0:MM-dd-yyyy}"    Sample:09-20-2010
Description:Explicit 24-hour time fromat with text
XAML:"{}The 24-hour time is {0:HH:mm}."      
Sample:The 24-hour time is 16:00

对于日期下的两个按钮设置图片:
(1).需先添加一个文件夹,命名为:Toolkit.Content
(2).加载图片:对应的系统目录(注意对图片的属性的修改)
(3).Content/copy if New

5.TimePicker
<toolkit:TimePicker HorizontalAlignment="left" margin="92,275,0" name="timePicker1"  WIDth="302" VerticalAlignment="top" ValueStringFormat="{}12小时{0:d}"
ValueCahnged="timePicker1_ValueChanged"/>

(工程中新建文件夹:Toolkit.Content,将两个ApplicationbarIconbutton的图片放进去,并加入到工程中)

在对应的事件的代码:(年月日和时间)
this.PageTitle.Text=e.NewDataTime.ToString();

6.autocompletebox:输入文字时,可以列出联想词
(不过需后台,加入词库!)
<phone:PhoneApplicationPage.Resources>//字库以资源方式载入
 <data:LoremIpsum x:Key="words"/>     //自定义资源
</phone:PhoneApplicationPage.Resources>
<toolkit:autoCompeleteBox HorizontalAlignment="left" margin="82,32,0" name="autocompletebox1" VerticalAlignment="top" WIDth="291" Height="72"
ItemSource="{StaticResourcewords}"/>
 
属性:
1.FilterMode:匹配方式
2.IsDropDownopen:下拉列表是否打开
3.IsTextCompletionEnable:自动完成匹配填写
4.MaxDropDownHeight:下拉列表的最大高度
5.MinimumPopulateDelay:最小匹配时间
6.MinimumPrefixLength:最短匹配长度
事件:
DropDownClosed/DropDownCloseing
DropDownopened/DropDownopening

在项目中,加一个文本,写入你的词库

7.NavigationTransition:实现页面的切换效果
将App.xaml.cs中InitializePhoneAppliction()函数里的RootFrame进行修改:RootFrame=new TransitionFrame();(注意)
五种动画效果:
-RollTransition
-RotateTransition
-SlIDeTransition
-SwivelTransition
-TurnstileTransition

//进入页面动画效果
<toolkit:TransitionService.NavigationInTransition>
 <toolkit:NavigationInTransition>
  <toolkit:NavigationInTransition.Backward>
   //这是旋转动画效果
   <toolkit:RotateTransition Mode="In180Clockwise"/>
  </toolkit:NavigationInTransition.Backward>
  <toolkit:NavigationInTransition.Forward>
   <toolkit:RotateTransition Mode="In180Clockwise"/>
  <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>

8.ListPicker:简单列表框
  属性:Full Mode 完整页面的列表框
  属性:ListPickerMode的使用
(对于本题的字符串需要一个字符串的命名空间:
  xmlns:sys="clr-namespace:System;assembly=mscorlib")
<toolkit:ListPicker Height="220" name="ListPicker1"
HorizontalAlignment="left" margin="12,381,0" WIDth="438"
VerticalAlignment="top" header="Test1" SelectionChanged="ListPicker1_SelectionChanged">
 <sys:String>Red</sys:String>
 <sys:String>Green</sys:String>
 <sys:String>Blue</sys:String>
</toolkit:ListPicker>

<toolkit:ListPicker ItemsSource="{Binding}" Height="88" name="ListPicker2" HorizontalAlignment="left" margin="6,513,0" VerticalAlignment="top" WIDth="444"
header="Test2" FellModeheader="colors">
 <toolkit:ListPicker.ItemTemplate>
  <DataTemplate> 
   <StackPanel OrIEntation="Horizontal">
    <Rectangle Fill="{Binding}" WIDth="24" Height="24"/>
    <TextBlock Text="{Binding}" margin="12 0 0 0"/>
   </StackPanle>
  </DataTemplate>
 </toolkit:ListPicker.ItemTemplate>
<toolkit:ListPicker.FullModeItemTemplate>
  <DataTemplate> 
   <StackPanel OrIEntation="Horizontal">
    <Rectangle Fill="{Binding}" WIDth="24" Height="24"/>
    <TextBlock Text="{Binding}" margin="12 0 0 0"/>
   </StackPanle>
  </DataTemplate>
 </toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>

对于数据绑定:后台代码;
static Readonly string[] Accentcolors={"purple","blue","park","teal","red","dark"};
在构造函数中:this.DataContent=Accentcolors;

9.LongListSelector:是一个归类列表;把数据进行绑定和分类
<toolkit:LongListSelector HorizontalAlignment="left" margin="12,162,0" name="longListSelector1" Height="213"
VerticalAlignment="top" WIDth="438" ItemsSource="{StaticResource people}">

//设置以什么样的方式显示分类列表,如果没有这个设置,分类列表以直列显示
<toolkit:LongListSelector.GroupItemsPanel>
//分类列表内的item显示内容和方式
<toolkit:LongListSelector.GroupItemTemplate>
//设置列表分类的头的显示内容和方式
<toolkit:LongListSelector.GroupheaderTemplate>
//设置列表里的内容的显示方式
<toolkit:LongListSelector.ItemTemplate>

UserControl:UserControl类;同样基于UIElement
对于便于打开和关闭使用Popup控件,放在最外面
<Popup x:name="WaitingWnd" IsOpen="Falsh">
 <GrID x:name="LayoutRoot" Background="transparent">
  <TextBlock Height="44" HorizontalAlignment="left" margin="0,144,0" name="textBlock1" Text="请等待。。。"
VerticalAlignment="top" Foreground="Gray" WIDth="200" FontSize="32" TextAlignment="Center"/>
<Image Height="150" HorizontalAlignment="left" margin="22,6,0" name="image1" Stretch="Fill" WIDth="150"
VerticalAlignment="top"/>
 </GrID>
</Popup>

后台代码:声明变量
dispatcherTimer Timer=null;//定时器
int Count=1;
public double Speed{get;set;}

在load事件中:
Timer=new dispatcherTimer();
Timer.Interval=Timspan.FranFillireconds(Speed);
Timer.Tick=new EventHndler(Timer_Tick);

在Timer_Tick事件中://动态加载
this.image1.source=new BitmAPImage(new Uri("Arrets/Loading00"+Count+".png",UriKind.relative));
Count=(Count==0?1:Count+1);

public voID WaitingBegin()
{
 Timer.Start();
 WaitingWnd.IsOpen=true;
}
public voID WaitingEnd()
{
 Timer.Stop();
 WaitingWnd.IsOpen=false;
}

写好后,就可使用,直接放到窗体上 在页面加载时; 调用WaitingBegin()方法

总结

以上是内存溢出为你收集整理的Silverlight Tookit控件集全部内容,希望文章能够帮你解决Silverlight Tookit控件集所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/1068794.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-26
下一篇2022-05-26

发表评论

登录后才能评论

评论列表(0条)

    保存