WP7中，修改button樣式並重用

原創 matrixcl 2020-02-23 05:27



在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了。














發表評論














所有評論



還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.







相關文章








Name與x:Name的關係






=============
本文轉自 
水之真諦
http://blog.csdn.net/fantasiax/article/details/3499767
作者很多文章都寫地很好。在此表示感謝。
============
 






 程静涛

2020-06-28 05:17:27









android Button設置text屬性爲字母時，字母自動變成大寫






       字母字動變大寫是在做項目是偶然發現的，我以前記得沒有這種情況出現呀，很多人沒注意也不信，剛開始我也不信，但是事實就是如此，先上效果圖，如下：
1.出現原因：
     我在網上找到了的原因：android 5.0後，and






 zhang106209

2020-07-04 10:39:09









Android控件複習:按鈕(Button)






主要內容：
1.按鈕監聽和長按按鈕監聽
2.“.9圖片文件的使用”
3.自定義點擊按鈕效果
-圖片模式
-顏色模式
實代碼例：
1.部分代碼
先來看佈局文件main.xml<?xml version="1.0" encoding="utf






 無名無

2020-06-29 04:24:40









經典左右佈局的樣式






---------X軸可帶滾動條三段身佈局------------------------------*{margin: 0; padding: 0;}html,body{width: 100%;height: 100%;}.header






 荷兰豆叶子上的水熊

2020-07-04 20:02:27









簡單導航欄hover時候下拉菜單 邊框覆蓋border






<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8">        <style type="text/css">            *{mar






 荷兰豆叶子上的水熊

2020-07-04 20:02:27









Python-docx 讀寫 Word 文檔：插入圖片、表格，設置表格樣式，章節，頁眉頁腳等






Python-docx 模塊讀寫 Word 文檔基礎（二）：圖片、表格，表格樣式，章節設置，頁眉頁腳等前言：1、插入圖片、設置大小：2、插入表格、設置格式：3、設置章節、頁面設置等：4、設置頁眉頁腳結尾：【Python與Offic






 三年二班__小小明

2020-07-03 17:09:57









css設置 '默認' background背景圖






css設置 '默認' background背景圖
有時需要給容器設置一個默認背景圖片
比如需求：服務器上的背景圖文件不一定存在，存在的話顯示服務器上的圖片，不存在的話則顯示‘’默認‘’背景圖（補位圖片）
寫法：
backgro






 楠辞琦咎

2020-07-03 11:39:19









Android主題和樣式之系統篇（上）-by TomHawk






轉自：http://www.cnblogs.com/qianxudetianxia/p/3725466.html
【基於最新的Android4.4的源碼分析】
每家公司或者每個移動團隊無不想開發出一套自己的UI框架，融入自己的設






 GSH_Android_Bar

2020-07-02 22:05:58









微信小程序 不使用wx.getuserinfo 展示用戶微信信息的方式 及 樣式修改~






 在微信小程序開發過程，我們都會獲取當前登錄用戶微信信息作爲個人中心展示信息，例如頭像、暱稱等。在這個時候，一般處理的方式都是調用API   wx.getUserInfo 來獲取，此時，便需要彈出用戶授權後方可使用，在某方面來說，過於繁瑣






 初学的小白一枚

2020-06-29 21:59:37









CSS3的佈局樣式相關






（1）CSS3 多列布局——Columns
爲了能在Web頁面中方便實現類似報紙、雜誌那種多列排版的佈局，W3C特意給CSS3增加了一個多列布局模塊（CSS Multi Column Layout Module）。它主要應用在文本的多列布






 leejj_520

2020-06-28 06:14:33









flex佈局中 子元素寬度超出父元素導致樣式問題






    近段時間，由於公司工作安排，一直沒有時間更新博客，今天在寫頁面的時候，遇到了一些問題，做一下記錄，話不多說開始。
 
在現在的前端樣式開發中，相信大家已經對flex佈局不陌生了吧，在頁面佈局中，所謂方便快捷，但是在開發中，我遇到一






 初学的小白一枚

2020-06-27 23:48:09









搜索樣式的設定






 <RelativeLayout
        android:layout_width="match_parent"
        andro






 泪堤

2020-06-27 08:27:35









兼容ie的多行文本溢出隱藏，並顯示省略號






簡單說明：在文本最後一行結尾添加一個遮罩（透明 → 白）遮罩上放省略號。
效果如下↓
html部分
<div class="text"> 你的文本內容吧啦吧啦，多寫點方便測試 </div>
css部分
text {
word






 zoesama

2020-06-26 19:55:27









樣式設置 /deep/






樣式設置scoped屬性帶來的問題
通常我們在寫樣式的時候會在style標籤中加上scoped屬性，相信這個屬性的作用大家都很清楚（Scoped CSS規範是Web組件產生不污染其他組件，也不被其他組件污染的CSS規範），但是這樣






 佩琪福

2020-06-26 18:40:59









css遇到的那些坑——瀏覽器默認樣式設置






css遇到的那些坑——瀏覽器默認樣式設置
css在引入頭部之前少加了這個 rel=“stylesheet” 在運行結果是不會報錯，在百度搜素答案顯示瀏覽器默認樣式，在找出問題後發現css有很多坑！再次我將會一次總結，






 Goddess_liangyanli

2020-06-26 04:03:31