Blend ---- 定义按钮模板
一、首先按下图创建一个Silverlight for Windows Phone应用程序.
XAML代码如下
View Code
1 <phone:PhoneApplicationPage xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:edc="clr-namespace:Microsoft.Expression.Controls;assembly=Microsoft.Expression.Drawing" 2 x:Class="BlendPro.MainPage" 3 d:DesignWidth="480" d:DesignHeight="768" 4 mc:Ignorable="d" 5 SupportedOrientations="Portrait" Orientation="Portrait" 6 shell:SystemTray.IsVisible="True"> 7 8 <!--LayoutRoot 是放置所有頁面的根資料格--> 9 <Grid x:Name="LayoutRoot" Background="Transparent"> 10 <Grid.RowDefinitions> 11 <RowDefinition Height="Auto"/> 12 <RowDefinition/> 13 </Grid.RowDefinitions> 14 15 <!--TitlePanel 包含應用程式的名稱和頁面標題--> 16 <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> 17 <TextBlock x:Name="ApplicationTitle" Text="BlendPro" Style="{StaticResource PhoneTextNormalStyle}"/> 18 <TextBlock x:Name="PageTitle" Text="Blend Pro" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> 19 </StackPanel> 20 <Button Content="Button" Grid.Row="1" Height="100" HorizontalAlignment="Left" Margin="154,216,0,0" Name="button1" VerticalAlignment="Top" Width="220" /> 21 </Grid> 22 23 </phone:PhoneApplicationPage>
二、然后打开Blend修改Button
在中间的视图区域中选中Button，接着右击按钮，选择EditTemplate|Edit a Copy。系统将提示您为新模板命名，在本例中命名为BlendButton，并选择模板的归属位置。默认是PhoneApplicationPage，如果想在整个应用程序中重用该模板，则放到App.xaml文件中。单击OK后，Blend会为已有的Button模板复制一份副本，以便对其进行调整，然后打开该模板，进行更改。如图示已经被打开并处于编辑状态，因为它已经列出在Objects and Timeline 窗口的顶部。它的下面是模板内容，其中包含一个Grid，然后是一个名为ButtonBackgroun的Border，最后是一个名为foregroundContainer的ContentControl。
本例中对ButtonBackground Border控件做简单的调整，从而为该按钮做一个圆角边框，它与添加到页面内容周围的边框类似。在Objects and Timeline窗口中，选择ButtonBackground节点，然后再Properties窗口的Brushes区域找到BorderBrush。单击BorderBrush旁的方格，从下拉列表中选择Reset，从而可以显示设置BorderBrush。
将BorderBrush改为纯色画刷，然后使用Color Editor将颜色改为#98AB0000。转到Appearance区域，重置BorderThickness属性。将BorderThickness的所有边都设为10。将ComerRadius设置为20。编辑完成保存。关闭Blend。提示重新载入程序。XAML中代码变为下面内容
View Code
1 <phone:PhoneApplicationPage 2 x:Class="BlendPro.MainPage" 3 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 4 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 5 xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" 6 xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" 7 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 8 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 9 mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768" 10 FontFamily="{StaticResource PhoneFontFamilyNormal}" 11 FontSize="{StaticResource PhoneFontSizeNormal}" 12 Foreground="{StaticResource PhoneForegroundBrush}" 13 SupportedOrientations="Portrait" Orientation="Portrait" 14 shell:SystemTray.IsVisible="True"> 15 <phone:PhoneApplicationPage.Resources> 16 <Style x:Key="BlendButton" TargetType="Button"> 17 <Setter Property="Background" Value="Transparent"/> 18 <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/> 19 <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/> 20 <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/> 21 <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/> 22 <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/> 23 <Setter Property="Padding" Value="10,3,10,5"/> 24 <Setter Property="Template"> 25 <Setter.Value> 26 <ControlTemplate TargetType="Button"> 27 <Grid Background="Transparent"> 28 <VisualStateManager.VisualStateGroups> 29 <VisualStateGroup x:Name="CommonStates"> 30 <VisualState x:Name="Normal"/> 31 <VisualState x:Name="MouseOver"/> 32 <VisualState x:Name="Pressed"> 33 <Storyboard> 34 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer"> 35 <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/> 36 </ObjectAnimationUsingKeyFrames> 37 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground"> 38 <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/> 39 </ObjectAnimationUsingKeyFrames> 40 </Storyboard> 41 </VisualState> 42 <VisualState x:Name="Disabled"> 43 <Storyboard> 44 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer"> 45 <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/> 46 </ObjectAnimationUsingKeyFrames> 47 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground"> 48 <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/> 49 </ObjectAnimationUsingKeyFrames> 50 </Storyboard> 51 </VisualState> 52 </VisualStateGroup> 53 </VisualStateManager.VisualStateGroups> 54 <Border x:Name="ButtonBackground" Background="{TemplateBinding Background}" CornerRadius="20" Margin="{StaticResource PhoneTouchTargetOverhang}" BorderBrush="#98AB0000" BorderThickness="10"> 55 <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" BorderBrush="Black"/> 56 </Border> 57 </Grid> 58 </ControlTemplate> 59 </Setter.Value> 60 </Setter> 61 </Style> 62 </phone:PhoneApplicationPage.Resources> 63 64 <!--LayoutRoot 是放置所有頁面的根資料格--> 65 <Grid x:Name="LayoutRoot" Background="Transparent"> 66 <Grid.RowDefinitions> 67 <RowDefinition Height="Auto"/> 68 <RowDefinition Height="*"/> 69 </Grid.RowDefinitions> 70 71 <!--TitlePanel 包含應用程式的名稱和頁面標題--> 72 <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> 73 <TextBlock x:Name="ApplicationTitle" Text="BlendPro" Style="{StaticResource PhoneTextNormalStyle}"/> 74 <TextBlock x:Name="PageTitle" Text="Blend Pro" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> 75 </StackPanel> 76 77 <!--ContentPanel - 其他內容置於此--> 78 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 79 <Button Content="Button" Height="100" HorizontalAlignment="Center" Name="button1" VerticalAlignment="Center" Width="220" Style="{StaticResource BlendButton}" /> 80 </Grid> 81 </Grid> 82 83 </phone:PhoneApplicationPage>
到此本示例就完成了，很简单吧。
最后效果如下
