WP7中，修改button样式并重用

最新推荐文章于 2014-09-25 16:19:00 发布
最新推荐文章于 2014-09-25 16:19:00 发布
阅读量2.5k 收藏 1
点赞数
分类专栏： Button Window Phone 7 wp7 Style 样式 文章标签： button setter binding blend null properties
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/matrixcl/article/details/7016601
版权
wp7 同时被 3 个专栏收录
19 篇文章 0 订阅
订阅专栏
Window Phone 7
9 篇文章 0 订阅
订阅专栏
样式
2 篇文章 0 订阅
订阅专栏



在Wp7中按钮的默认效果是这样的：

黑色主题普通/按下

 

白色主题普通/按下

 


普通状态的背景色前景很容已通过修改Background、Foreground、BorderBrush等属性实现

          <Button Content="Button" Height="72" HorizontalAlignment="Left" Name="button1" VerticalAlignment="Top" Width="160" 
                    Background="Red" BorderBrush="Green" Foreground="Blue"
                    Click="button1_Click" />





但是按下状态的效果并未改变，仍然是默认效果






按下效果可以通过Blend修改按钮样式来实现


默认的按钮样式是这样的




		<Style x:Key="ButtonStyle1" TargetType="Button">
			<Setter Property="Background" Value="Transparent"/>
			<Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
			<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
			<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
			<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
			<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
			<Setter Property="Padding" Value="10,3,10,5"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="Button">
						<Grid Background="Transparent">
							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="CommonStates">
									<VisualState x:Name="Normal"/>
									<VisualState x:Name="MouseOver"/>
									<VisualState x:Name="Pressed">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Disabled">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
												<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
							<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}">
								<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
							</Border>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>


将<VisualState x:Name="Pressed">下的Backgournd属性改成这样




<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">




												<DiscreteObjectKeyFrame KeyTime="0" Value="#600010"/>





按下效果如下：











如果需要加入两个按钮，他们的按下效果不完全一样，例如一个按下背景是棕色，一个是紫色就需要写两个Style。


仅仅这点差异，就需要写一个50行的style，这对代码维护显然是不利的。最终找到了一个解决方案。步骤如下


1. 创建一个Button的派生类




public class ButtonEx : Button
    {
        #region Fields

        public static readonly DependencyProperty PressedBackgroundProperty =
            DependencyProperty.Register("PressedBackground",
            typeof(Brush),
            typeof(ButtonEx),
            new PropertyMetadata(new SolidColorBrush(Colors.White), null));

        public static readonly DependencyProperty PressedForegroundProperty =
            DependencyProperty.Register("PressedForeground",
            typeof(Brush),
            typeof(ButtonEx),
            new PropertyMetadata(new SolidColorBrush(Colors.Black), null));

        public static readonly DependencyProperty PressedBorderBrushProperty =
            DependencyProperty.Register("PressedBorderBrush",
            typeof(Brush),
            typeof(ButtonEx),
            new PropertyMetadata(new SolidColorBrush(Colors.Black), null));

        public static readonly DependencyProperty InvisibleMarginProperty =
            DependencyProperty.Register("InvisibleMargin",
            typeof(Thickness),
            typeof(ButtonEx),
            new PropertyMetadata(new Thickness(12), null));

        #endregion

        #region Properties

        public Brush PressedBackground
        {
            set { SetValue(PressedBackgroundProperty, value); }
            get { return (Brush)GetValue(PressedBackgroundProperty); }
        }

        public Brush PressedForeground
        {
            set { SetValue(PressedForegroundProperty, value); }
            get { return (Brush)GetValue(PressedForegroundProperty); }
        }

        public Brush PressedBorderBrush
        {
            set { SetValue(PressedBorderBrushProperty, value); }
            get { return (Brush)GetValue(PressedBorderBrushProperty); }
        }

        public Thickness InvisibleMargin
        {
            set { SetValue(InvisibleMarginProperty, value); }
            get { return (Thickness)GetValue(InvisibleMarginProperty); }
        }
        #endregion
    }


2. 通过blend创建一个ButtonEx的默认样式，改成这样





    <Style x:Key="buttonExStyle" TargetType="my:ButtonEx">
<Setter Property="InvisibleMargin" Value="12" />
        <Setter Property="PressedBackground" Value="{StaticResource PhoneAccentBrush}" />
        <Setter Property="PressedForeground" Value="{StaticResource PhoneBackgroundBrush}" />
        <Setter Property="PressedBorderBrush" Value="{StaticResource PhoneForegroundBrush}" />
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
        <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
        <Setter Property="Padding" Value="10,3,10,5"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="my:ButtonEx">
                    <Grid Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=PressedForeground}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=PressedBackground}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=PressedBorderBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{TemplateBinding InvisibleMargin}">
                            <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>


3. UI中加入一个ButtonEx





        <my:ButtonEx Content="Button" Grid.Row="1" Height="72" HorizontalAlignment="Left" Margin="181,121,0,0" x:Name="buttonEx1" VerticalAlignment="Top" Width="160" 
                     Background="Red" PressedBackground="Green" Style="{StaticResource buttonExStyle}" />



效果如下（普通、按下）：



 









同样可以很方便地修改按钮风格，例如




            <my:ButtonEx Content="Button" Height="72" HorizontalAlignment="Left" x:Name="buttonEx1" VerticalAlignment="Top" Width="160" 
                           Style="{StaticResource buttonExStyle}" 
                         Click="button1_Click" >
                <my:ButtonEx.Background >
                    <ImageBrush ImageSource="/ListCheckBox;component/Images/Desert.jpg" />
                </my:ButtonEx.Background>
                <my:ButtonEx.PressedBackground >
                    <ImageBrush ImageSource="/ListCheckBox;component/Images/Koala.jpg" />
                </my:ButtonEx.PressedBackground>
            </my:ButtonEx>


 







PS：样式的定义可以放在./Themes/generic.xaml中。将Key去掉，编译选项设为Resource。这样这个Style就作为ButtonEx的默认Style了。




                

        

        

    




    

      

        

            

              
                
                  matrixcl
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  2
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
【UGUI】ButtonEx

				
			

			

				

					lihui061119的专栏
				

				

					04-30
					
					194
					
				

			

		

		

			
				
using UnityEngine.EventSystems;

namespace UnityEngine.UI
{
    public class ButtonEx : Button
    {
        public override void OnPointerClick(PointerEventData eventData)
        {
            if (eventData.button != PointerEventData.InputButton.Left)
 .

			
		

	



                

              
                



	

		

			

				
					
wp7样式代码

				
			

			

				

					03-30
				

			

		

		

			
				
样式可以应用于单个控件，也可以在整个应用程序中全局定义并重用。  3. 控件模板（ControlTemplate）：更进一步，控制模板定义了控件的完整视觉树，即控件的外观结构。这允许开发者完全自定义控件的显示方式，而不...

			
		

	



                


  
              

                


	

		

			

				
					
使用StaticResource给控件定义公共的样式和属性来写界面XAML

				
			

			

				

					dianpi2993的博客
				

				

					09-25
					
					243
					
				

			

		

		

			
				
一：效果图

二：定义公共的样式和属性
在MainPage.xaml中

<phone:PhoneApplicationPage.Resources>
        <SolidColorBrush x:Key="MyBrush" Color="Brown"/>
        <Style TargetType="Button" x:Key...

			
		

	





	

		

			

				
					
wp7样式的关联

				
			

			

				

					dayin3765的博客
				

				

					03-30
					
					88
					
				

			

		

		

			
				
最近几个朋友（非IT行业的朋友）要买手机，我就问了一下：有考虑买wp7的吗。朋友：不买，wp7的界面太丑了。  当时我听了之后心里一下子凉了一大半。如果用户都这样想的话，wp7的命运真是悲剧啊。希望wp7的程序员多关注一下UI吧。用户是看不到功能代码的，如果UI进入不了他们的眼，那么何谈进入他们的心呢。  siliverlight不是Winfrom，拖一个Button然后写事件的方式去做...

			
		

	



		

			
		



	

		

			

				
					
Windows phone 7中的图像控件、资源和样式

				
			

			

				

					johnneyshi1的专栏
				

				

					02-11
					
					439
					
				

			

		

		

			
				
图像控件：Image，如果在C#代码中动态更改Image的Source，那么会用到BitmapImage类，把BitmapImage赋值给Image.Source。
资源：是Silverlight中任何可重用的值。
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource Phon

			
		

	





	

		

			

				
					
wp7 官方 中文 教程

				
			

			

				

					03-07
				

			

		

		

			
				
WP7，全称为Windows Phone 7，是微软公司推出的一款智能手机操作系统，主要针对移动设备市场。这个"wp7 官方 中文 教程"是一个专门为新手设计的学习资源，旨在帮助用户快速掌握WP7系统的使用技巧和功能。下面将详细...

			
		

	





	

		

			

				
					
wp7学习非常好的一部中文书籍

				
			

			

				

					02-26
				

			

		

		

			
				
3. **UI设计**：讲解Silverlight在WP7中的应用，包括布局管理器（如Grid、StackPanel、Canvas等）、控件库（如Button、TextBox、ListBox等）的使用，以及XAML语言的基本语法。  4. **数据绑定和MVVM模式**：介绍如何...

			
		

	





	

		

			

				
					
WP7中，在后台c#代码中控制Grid

				
			

			

				

					火山灰之家
				

				

					11-25
					
					2927
					
				

			

		

		

			
				
有时候需要在后台代码中修改Grid布局，大概实现代码如下


代码很简单，如果在xmal中改过布局应该一看就明白。
操作方法：创建一个默认页面，后台代码中加如下代码

    public partial class Page3 : PhoneApplicationPage
    {
        public Page3()
        {
            Initi

			
		

	





	

		

			

				
					
windows phone 7 中 HubTile控件自定义大小。

				
			

			

				

					火山灰之家
				

				

					12-13
					
					2872
					
				

			

		

		

			
				
Toolkit(http://silverlight.codeplex.com/)中有一个不错的控件：HubTile。
但这个控件只能用于173*173的Tile，如果想放其他尺寸的的就麻烦一些了（一行并排3个显示的Tile）
下面是实现可重定义tile大小的完整代码
步骤1：写一个Converner类，用于缩放double类型的数值
需要命名空间：
using System.Globa

			
		

	





	

		

			

				
					
windows phone 7 中怎样定义和使用资源（Resource）

				
			

			

				

					火山灰之家
				

				

					12-09
					
					2768
					
				

			

		

		

			
				
1. 系统资源。
在wp7开发中可以看到很多使用系统资源（resource）的例子，例如默认的新page：



这里的PhoneTextTitle1Style便是资源。
系统的资源定义在这里：C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Design , 根据安装路径不同，这个路径有一些差异。
这个路径下有DarkBlue、D

			
		

	





	

		

			

				
					
Wp7 Applicationbar 的一些细节

				
			

			

				

					火山灰之家
				

				

					11-18
					
					1765
					
				

			

		

		

			
				
本文重点讨论竖屏状态下的appbar效果。
不过想防一个appbar的话，有必要了解一下。


1. 视觉尺寸
为展开状态，整个appbar宽480高72
每个iconbutton尺寸为48*48，icon间距为36（不论有几个icon）
...其实也是一个button，sdk的icons目录能找到这张图。这张图的尺寸是72*72，但上方有12像素的同名空白，所以视觉效果是和其他ic

			
		

	





	

		

			

				
					
关于WriteableBitmap（wp7中）

				
			

			

				

					火山灰之家
				

				

					03-06
					
					1761
					
				

			

		

		

			
				
1. WriteableBitmap.SetSource 和 WriteableBitmap.LoadJpeg是不同的。



                    
                    const int CANVAS_WIDTH = 480;

                    BitmapImage bmp = new BitmapImage();

			
		

	





	

		

			

				
					
wp7中使用adduplex

				
			

			

				

					火山灰之家
				

				

					01-16
					
					1478
					
				

			

		

		

			
				
XNA


Game1成员变量

        AdManager adDuplex;
        Vector2 adPosition = new Vector2(320, 0);


LoadContent()中

            adDuplex = new AdManager(this, "0" /* your AppId here */);

			
		

	





	

		

			

				
					
wp7 软键盘高度

				
			

			

				

					火山灰之家
				

				

					01-12
					
					1460
					
				

			

		

		

			
				
Wp7中软键盘弹起没有通知，而且高度不确定。具体高度依赖当前的InputScope类型和剪贴板有没有数据 


经过测量规则如下（仅统计了竖屏）
1. 软件盘有两个高度： 408和339. 软件盘高度与是否存在ApplicationBar无关
2. 满足以下两个条件之一，软键盘的高度为408；其他情况均为339
(1)剪贴板有数据
(2)当前有焦点Textbox的InputScope

			
		

	





	

		

			

				
					
wp7 toolkit编译错误 Xap packaging failed

				
			

			

				

					火山灰之家
				

				

					11-28
					
					1357
					
				

			

		

		

			
				
下载最新版得toolkit后 （http://silverlight.codeplex.com/SourceControl/list/changesets 71382），发现编译最后一步通不过，总是报这个错误：
Error 1
Xap packaging failed. Object reference not set to an instance of an object.
PhoneTo

			
		

	





	

		

			

				
					
wp7，程序设置为32位。实现图像流畅显示，避免水波纹

				
			

			

				

					火山灰之家
				

				

					08-10
					
					1230
					
				

			

		

		

			
				
修改很简单，WMAppManifest.xml 中加入 BitsPerPixel="32" 即可







测试代码：
页面中放了一个渐变背景

        
            
                
                
            
        
修改前：





修改后：

			
		

	





	

		

			

				
					
wp7 中使用微软AD

				
			

			

				

					火山灰之家
				

				

					01-16
					
					1003
					
				

			

		

		

			
				
在XNA中使用


1. 程序ID和广告布局
private static readonly string ApplicationId = "test_client";
private static readonly string AdUnitId = "Image480_80"; //other test values: Image480_80, Image300_50, TextAd

			
		

	





	

		

			

				
					
WP7应用设计：交互与UI策略详解（Mango版）

				
			

			

				

					
				

			

		

		

			
				
本文主要针对Windows Phone 7 (WP7) 应用开发中的交互设计和用户界面 (UI) 设计提供了一些建议。WP7作为微软推出的一款全新手机操作系统，与早期的Windows Mobile有着显著区别，标志着微软操作系统的转型。文章首先...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 2

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值