零基础学通Silverlight47:控件模板

控件可以包含一幅图像、一段视频、一个动画,甚至一个文本框。此外还有风格、模板以及触发器等,这些功能进一步加强了控件的扩展能力。开发人员还可以修改已经存在的控件的外观,以增强它的可视化功能,而且还可以保留用户已经熟悉的控件预期行为,还可以根据特定数据输入和检查的需要,为应用程序定制自定义控件。提供的用于扩展和创建控件的基础类,为设计控件的可视化外观提供了巨大的灵活性。
一个新的控件需要先选择一个基类。可以基于许多基类来创建自定义控件,包括ControlUserControl等,当创建一个新控件时,可根据自定义控件的定制和灵活性来选择所要继承的基类,可能还需要考虑以下问题:
1)自定义控件是否由已存在的控件组成?
2)自定义控件需要定制哪些可视化外观?
3)自定义控件需要提供什么行为或功能?
作用UserControl作为基类是创建一个新控件最简单的方法,自定义控件由一引起标准控件组合在一起,来完成一个特定的用户接口功能,自定义控件可以为单个元素应用样式,并使其处理一些特定的事件,或者为控件引发特定的自定义事件。
模板的方式与样式非常类似,也可作为资源,并通过Setter来定义模板的内容。要定义模板,需要设置SetterPropertyTemplate,并使用<Setter.Value>来定义ControlTemplate来指定模板的目标类型。
模板还能保持控件的众多功能,并且可直接定义鼠标指针移入、移出以及单击的统一的变化效果。每个模板必须有一个根元素,为了方便容纳多个 UI 元素,根据元素通常是 Panel Grid

范例象棋棋子按钮

   项目 利用模板生成统一外观的立体棋子按扭。当鼠标单击时,外观都会有变化,如移到上面时增加阴影,单击棋子会改变效果,如图 7-1

7-1
1 )打开 Microsoft Expression Blend ,新建项目中,选择“ Silverlight Application ”。
2 )设置二个圆形,其中一个具有渐变效果作为棋的外形,另一个带来阴影立体效果,加上“车”字,模板的外观如图 7-2

7-2
3 )将它们分成一组。选中二圆和字块后右健菜单中分成一个 Grid 组,如图图 7-3

                     
7-3
对应的主要 XAML 如下:
<Grid x:Name="LayoutRoot" Background="White" Margin="56,37">
           <Grid Margin="126,96,0" HorizontalAlignment="Left" Width="108" Height="108" VerticalAlignment="Top">
                  <Ellipse Stroke="Black" Margin="4,6,4,2" StrokeThickness="0" Height="100" Width="100" Fill="#FFA 7A 1A 1"/>
                  <Ellipse Stroke="Black" StrokeThickness="0" Width="100" Height="100" VerticalAlignment="Top" Margin="2,0">
                         <Ellipse.Fill>
           <LinearGradientBrush EndPoint="0.795,0.998" StartPoint="0.227,-0.092">
                                       <GradientStop Color="#FF2CC017" Offset="0.032"/>
                                       <GradientStop Color="#FFC6E 2C 3" Offset="1"/>
                                </LinearGradientBrush>
                         </Ellipse.Fill>
                  </Ellipse>
           <TextBlock Margin="22,14,28,14" Text="" TextWrapping="Wrap" FontSize="66.667" FontWeight="Bold" Foreground="#FF 17181C " FontFamily="Arial"/>
           </Grid>
    </Grid>
</UserControl>
4 )将所绘制图案转换成模板。选择上面的 Grid 容器,即变成绘制图案的最外层对象,然后从“工具”菜单中选择“生成按扭”命令,见图 7-4

7-4

 

5 )出现“构成控件”对话框,选择 Button ,位置定义在资源字典中,可新建一个字典文件中,见图图 7-5

                                    
         
7-5
生成了一个字典文件,代码如下:
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="ButtonStyle1" TargetType="Button">
           <Setter Property="Template">
                  <Setter.Value>
                         <ControlTemplate TargetType="Button">
                                <Grid>
                                       <VisualStateManager.VisualStateGroups>
                                              <VisualStateGroup x:Name="FocusStates">
                                                     <VisualState x:Name="Focused"/>
                                                     <VisualState x:Name="Unfocused"/>
                                              </VisualStateGroup>
                                              <VisualStateGroup x:Name="CommonStates">
                                                     <VisualState x:Name=" Normal "/>
                                                     <VisualState x:Name="MouseOver"/>
                                                     <VisualState x:Name="Pressed"/>
                                                     <VisualState x:Name="Disabled"/>
                                              </VisualStateGroup>
                                       </VisualStateManager.VisualStateGroups>
                                       <Ellipse Stroke="Black" Margin="4,2" StrokeThickness="0" Height="100" Width="100" Fill="#FFA 7A 1A 1"/>
                                       <Ellipse Stroke="Black" StrokeThickness="0" Width="100" Height="100" VerticalAlignment="Top" Margin="2,0">
                                              <Ellipse.Fill>
    <LinearGradientBrush EndPoint="0.795,-0.092">
                         <GradientStop Color="#FF2CC017" Offset="0.032"/>
                                <GradientStop Color="#FFC6E 2C 3" Offset="1"/>
                                                     </LinearGradientBrush>
                                              </Ellipse.Fill>
                                       </Ellipse>
                                       <ContentPresenter Margin="22,14"/>
                                </Grid>
                         </ControlTemplate>
                  </Setter.Value>
           </Setter>
           <Setter Property="FontFamily" Value="Arial"/>
           <Setter Property="FontWeight" Value="Bold"/>
           <Setter Property="FontSize" Value="66.667"/>
           <Setter Property="Foreground" Value="#FF 17181C "/>
    </Style>
</ResourceDictionary>

 

6 )现已创建了一个模板,而且也创建了一个棋子按钮,并已经将模板应用于此棋子按钮了,打开 MainPage.xaml 文件,可见 XAML 文件内容如下:
    <Grid x:Name="LayoutRoot" Background="White" Margin="56,37">
           <Button Height="108" HorizontalAlignment="Left" Margin="126,0" Style="{StaticResource ButtonStyle1}" VerticalAlignment="Top" Width="108" Content=""/>
    </Grid>
</UserControl>
7 )继续编辑模板,使其具备鼠标单击的外观变换效果,双击字典文件,进入到模板编辑状态,也可从所创建的棋子控件,从级联菜单中按照顺序选择“编辑控件”、“编辑模板“、“编辑当前模板“进入,如图 7-6

7-6

 

8 )定义鼠标单击的外观变换效果,在左侧“状态”面板的 CommonStates 区域中选择 Pressed 状态,接着选择 Ellipse 的标志 ( 棋子最外层 ) ,如图图 7-7

7-7
9 )使用渐变工具,修改渐变的方向,转动约 180 度。颜色变为从淡到深的渐变,与原来的相反,如图 7-8

 

            
如图 7-8
10 )继续编辑模板,选择 MouseOver 状态,背景色设为绿色到红色的渐变, 11 )模板已修改完成,保存,可安 F5 运行试看点击的效果。打开对应资源文件,可看到对应的 XAML 代码:
<VisualState x:Name="MouseOver">
    <Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                  <EasingColorKeyFrame KeyTime="00:00:00" Value="#FFE 85C 26"/>
    </ColorAnimationUsingKeyFrames>
           </Storyboard>
    </VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
           <PointAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(Shape.Fill).(LinearGradientBrush.StartPoint)">
                  <EasingPointKeyFrame KeyTime="00:00:00" Value="0.88,0.944"/>
    </PointAnimationUsingKeyFrames>
                         <PointAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(Shape.Fill).(LinearGradientBrush.EndPoint)">
           <EasingPointKeyFrame KeyTime="00:00:00" Value="0.142,-0.038"/>
    </PointAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
12 )在设计画面中的 MainPage.xaml 中,拖放方式创建更多的 Button 控件,如图 7-10

                         
7-10
      
12 )要将模板应用于 Button 控件,单击画面右上角的“资源”选项卡,然后找到资源文件中的模板,将模板拖放至应用的 Button 控件上,并且选择 Style 选项。这样一个个方形按钮变成了统一样式的棋子,并调整修改文字、大小等,如图 7-11

7-11
13 F5 运行,鼠标移移到“马”上,并点击“马”后可看到会有明显的变化效果。
更详细内容及源代码下载:
http://www.amazon.cn/mn/detailApp/ref=sr_1_1?_encoding=UTF8&s=books&qid=1287058088&asin=B0043RT7I2&sr=8-1

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


如何在Silverlight4(XAML)中绑定IsEnabled属性?我试过简单的IsEnabled=“{BindingABC}”,但这不起作用–MenuItem总是启用.提前感谢您的线索!干杯编辑:有趣的是,当设置Mode=TwoWay时,绑定似乎有效.但是,在菜单项上移动鼠标后,将更新上下文菜单的外观.这是异步工作吗?右键
我正在编写我的第一个vb.net应用程序(但我也会在这里标记c#,因为我确信即使是一个c#人也可以使用类似的.net实现来回答这个问题).我申请的简短说明:我的桌面应用程序将仅在win平台上运行,使用vb.net,它是一个简单的网吧管理软件,在服务器上运行服务器gui,在工作站上运行客户端gui,
ProcessFile()是在UIThread上运行还是在单独的线程上运行.如果它在UIThread上,如何将文件请求和ProcessFile()移动到单独的线程?varxClient=newServiceReference1.Service1SoapClient();xClient.Retrieve_File_Completed+=newEventHandler<ServiceReference1.Retrieve_Fi
我从同行那里听说,对sharepoint的了解对职业生涯有益.我们不在办公室使用sharepoint.所以不知道如何开始.这些是我的新手问题>学习共享点值得努力吗?>学习sharepoint的资源在哪里?>我是否应该考虑开发哪些参考项目?感谢您的意见.解决方法:SharePoint以如此积极的方式改变了我的职业
我正在尝试保存一个类我的类对象的集合.我收到一个错误说明:Thecollectiondatacontracttype‘System.Collections.Generic.Listcannotbedeserializedbecauseitdoesnothaveapublicparameterlessconstructor.Addingapublicparameterlessconstructorwillf
我需要根据Silverlight中的某些配置值设置给定控件的Style.我想有可能从两种可用的样式(静态资源)中选择一个控件样式.我试图做一些像:<TextBoxStyle="{BindingABC}"/>哪里publicstringABC{get{return"{StaticResourceMyStyle}";}}不幸的是,这不起作用.你有
我刚买了第一台Android设备,我喜欢它…我也很喜欢你可以创建自己的应用程序并随意分发它们.我已经阅读了一些关于Monodroid的内容,而且显然微软希望将Silverlight放在这些设备上,尽管没有太多关于它们的信息……但是Moonlight呢?如果Monodroid就像Mono……为什么我们需要它呢?相反
我们的ASP.NET网站允许用户执行各种查询,并根据从数据库查询的结果显示网络图(如UML图).目前,我们正在生成一个位图并显示它.但由于我们需要支持允许用户以交互方式显示/隐藏某些块的功能,因此我们计划使用Silverlight来渲染图形.我们还计划在未来添加更多互动.我有两个问题:>ASP
我正在开发一个Silverlight4应用程序,我已经创建了一个自定义的启动画面.乍一看,自定义启动画面运行良好–非常好.几天后,我开始注意到闪屏不再显示,屏幕仍然是空白.这似乎只发生在我打开多个指向同一个应用程序的IE选项卡/窗口时.前几个将加载正常,而以下选项卡/窗口将保持“白
这是我的XAML:<ImageVerticalAlignment="Center"HorizontalAlignment="Center"Source="{BindingInput,Converter={StaticResourceByteArrayToBitmapConverter}}"><Image.Rend
问候,我有一个ItemsControl,我更改了模板,为绑定的ItemsSource中的每个对象显示一个RadioButton.但是ItemsSource可以为空,当它为空时我想显示默认值.像“绑定列表中没有可供您选择的项目”……我想到的一种方法是将ItemsControl.Visibility设置为Collapsed,并将TextBlock.Vsibi
堆栈溢出的第一个问题……我是C#的新手,但在学习它时却非常直接.几分钟前我才看到这个tutorial.通过各种c#技术阅读WCF,WPF,Silverlight,c#和asp.net,这是很多技术都可以用c#来实现.我将创建一个Web应用程序c#.我认为SilverLight似乎是我最好的选择.该应用程序将拥有一个数
我正在使用MVVM(Model-View-ViewModel)模式编写应用程序,并利用MicrosoftP&P团队的Prism和Unity位.我有一个包含项目列表的视图.这些项包含在ViewModel中的ObservableCollection中,View中的列表框是数据绑定的(ViewModel设置为View的DataContext).在ViewModel中,我有一个运行的
我有一个应用程序,它在首次运行时显示免责声明页面.选择“接受”或“拒绝”后,您再也看不到该页面了.但是,当您在第一次运行后按后退键尝试关闭应用程序时,您将返回免责声明页面,然后再次点击该页面,返回主页面,然后再次退出.这仅在应用程序第一次运行时发生,但我希望应用程序在
我正在尝试在SilverlightforWindowsPhone中使用异步HttpWebRequest.一切都很完美,直到我到达我应该打电话的地方privatestaticManualResetEventallDone=newManualResetEvent(false);...request.BeginGetResponse(newAsyncCallback(GetResponseCallback),request);a
嗨,我有两个Writablebitmap,一个来自jpg,另一个来自png,并使用此方法在循环中混合颜色:privatestaticColorMix(Colorfrom,Colorto,floatpercent){floatamountFrom=1.0f-percent;returnColor.FromArgb((byte)(from.A*amountFrom+to.A*perc
我需要开发一个程序,它包含一个图像(png),中心有一个洞.在这个图像下将有一个框架,我想点击图像的透明孔我可以点击框架内的按钮.我不知道是否有一种方法可以通过图像或其他方式传播点击.谢谢你的帮助解决方法:你在图像上将IsHitTestVisible设置为false,然后点击浏览.
我正在研究一个silverlight应用程序,我发现List没有Find扩展方法说,List<Something>list=newList<Something>(something);list.Remove(list.Find(e=>e.id==10));没有查找扩展方法我错过了什么?解决方法:它不包括在内以减小运行时的大小.建议您使用LINQ扩展,例如First
我试图弄清楚如何设置Path元素的Data属性来获得此类型的软角:alttexthttp://i42.tinypic.com/1rzu6w.jpg现在我只有这样的尖角:alttexthttp://i42.tinypic.com/2eeleah.jpg我尝试用椭圆玩,但我无法得到我想要的东西.谢谢最佳答案:路径的段具有IsSmoothJoin属性,默认为false.
问题我有一个在远程服务器上运行的restfulWeb服务.我已经制作了一个使用它的WP7应用程序,所以我知道它有效.我正在将应用程序移植到SilverlightWeb应用程序并遇到问题.我已经包含了代码的简化版本以及引发的错误.EndGetResponse方法抛出错误.随意询问更多信息.我一直在寻找解