微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Silverlight 创建自定义外观的按钮

前面一篇博客WPF/Silverlight 控件的基本组成” 介绍了创建控件模板的一些基础知识,这篇是一个简单演示,演示一个不规则的按钮。

为了简单期间,我们只定义了按钮的鼠标移动到上面以及鼠标点击两个特效。其他特效没有定义。

演示效果如下:

对应Xaml代码代码中已经增加了注释,如果前一篇博客阅读过,对代码的阅读就没有难度,代码如下:

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	x:Class="SilverlightApplication_IrregularButton.MainPage"
	Width="250" Height="150" mc:Ignorable="d">
	<UserControl.Resources>
		
  
  
		<ControlTemplate x:Key="ButtonControlTemplate1" 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">
							 
   
							<Storyboard>
								<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="path" 
								Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
									<EasingDoubleKeyFrame KeyTime="00:00:00" Value="1.1"/>
								 
   DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="path" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"> <EasingDoubleKeyFrame KeyTime="00:00:00" Value="1.1"/>  
    DoubleAnimationUsingKeyFrames>  
     Storyboard>  
      VisualState> <VisualState x:Name="pressed">  
        <Storyboard> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="path" Storyboard.TargetProperty="(UIElement.OpacityMask).(GradientBrush.GradientStops)[0].(GradientStop.Offset)"> <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.4"/>  
       DoubleAnimationUsingKeyFrames>  
        Storyboard>  
         VisualState> <VisualState x:Name="disabled"/>  
          VisualStateGroup>  
           visualstatemanager.VisualStateGroups> <Path x:Name="path" Stretch="Fill" stroke="{TemplateBinding BorderBrush}" strokeThickness="2" Margin="10.652,1.073,8,0" UseLayoutRounding="False" Data="M36.891956,9.7781897 C64.593346,-11.270991 79.772194,-3.6822519 95.642052,17.778385 C176.95827,15.002772 153.51022,23.269783 98.359367,44.312874 C81.101433,49.818928 46.730473,42.151268 47.980583,38.40152 C28.298779,43.241684 7.1613593,35.330677 36.891956,9.7781897 z" RenderTransformOrigin="0.5,0.5" Fill="{TemplateBinding Background}" > <Path.OpacityMask> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="White" Offset="1"/> <GradientStop Color="#26FFFFFF"/>  
            LinearGradientBrush>  
             Path.OpacityMask> <Path.RenderTransform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform/> <TranslateTransform/>  
              TransformGroup>  
               Path.RenderTransform>  
                Path> <ContentPresenter Margin="33,18,72,18"/>  
                 Grid>  
                  ControlTemplate>  
                    <Style x:Key="IrregularButton" targettype="Button"> <Setter Property="Template" Value="{StaticResource ButtonControlTemplate1}"/> <Setter Property="Background" Value="#FFA56B16"/> <Setter Property="Foreground" Value="#FF000000"/>  
                   Style>  
                    UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White">  
                      <Button Style="{StaticResource IrregularButton}" Content="Button1" Foreground="#FF2431C2" Background="#FFBA730A" BorderBrush="#FF111695" Height="70" Width="180"/>  
                     Grid>  
                      UserControl>

 

参考资料:

Silverlight2 边学边练 之七 模板与状态
http://www.cnblogs.com/gnielee/archive/2009/08/03/1537929.html

一步一步学Silverlight 2系列(9):使用控件模板
http://www.cnblogs.com/Terrylee/archive/2008/03/08/Silverlight2-step-by-step-part9-using-control-template.html

理解silverlight 2.0中的Templated Control
http://silverlight.cn/index.php?q=node/597

演练:使用 ControlTemplate 自定义按钮的外观
http://msdn.microsoft.com/zh-cn/library/cc903963(VS.95).aspx

Control Templates
http://silverlight.net/learn/quickstarts/controltemplates/

通过使用 ControlTemplate 自定义现有控件的外观
http://msdn.microsoft.com/zh-cn/library/cc189093(VS.95).aspx

创建系统控件的可重用模板
http://msdn.microsoft.com/zh-cn/library/dd185509.aspx

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

相关推荐