Windows Phone 7 控件重寫之Button 圖片按鈕

Windows Phone 自帶的Button樣式很優雅很大氣，並且和總體的風格也很一致。可是，個性化定製的界面有時候須要其餘的「特殊」要求。好比圖片按鈕，因爲個性化程度較高，直接套用如今的Button的樣式的話會致使UI風格不統一，可是咱們又不想用其餘好比「Image」來代替如今的Button。那麼，咱們能夠本身去自定義Button，重寫它！

先來看，素材圖片吧。

第一張是普通狀況下的Button顯示效果      第二張是Button按下的時候的顯示效果

因此我只能用兩張圖來重寫這個按鈕了。

先來看效果圖吧

廢話很少說，直接上代碼

<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"
	mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
	x:Class="WindowsPhoneApplication3.MainPage"
	FontFamily="{StaticResource PhoneFontFamilyNormal}"
	FontSize="{StaticResource PhoneFontSizeNormal}"
	Foreground="{StaticResource PhoneForegroundBrush}"
	SupportedOrientations="Portrait" Orientation="Portrait"
	shell:SystemTray.IsVisible="True">
	<phone:PhoneApplicationPage.Resources>
		<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="ImageSource" Storyboard.TargetName="SeanBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Images/login_click.png"/>
                                            </ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
							 <StackPanel Margin="0,0,0,0">
                                <StackPanel.Background>
                                    <ImageBrush x:Name="SeanBackground" ImageSource="Images/login.png" />
                                </StackPanel.Background>
								<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
							</StackPanel>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</phone:PhoneApplicationPage.Resources>

	<!--LayoutRoot 是放置全部頁面內容的根網格-->
	<Grid x:Name="LayoutRoot" Background="Transparent">
		<Grid.RowDefinitions>
			<RowDefinition Height="Auto"/>
			<RowDefinition Height="*"/>
		</Grid.RowDefinitions>

		<!--TitlePanel 包含應用程序名稱和頁面標題-->
		<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
			<TextBlock x:Name="ApplicationTitle" Text="自定義控件" Style="{StaticResource PhoneTextNormalStyle}"/>
			<TextBlock x:Name="PageTitle" Text="Button" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
		</StackPanel>

		<!--ContentPanel - 在此放置附加內容-->
		<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
			<Button Width="320" Height="55" HorizontalAlignment="Left" Margin="52,47,0,0" VerticalAlignment="Top" Style="{StaticResource ButtonStyle1}" Click="Button_Click"/>
		</Grid>
	</Grid>
</phone:PhoneApplicationPage>

代碼並不長，若是您看過我以前的2篇關於控件重寫的博文，應該對控件重寫有本身的見解了，對嗎？

這篇是我，關於控件重寫的最後一篇博文。之因此說是最後一篇，是由於這三篇博文已經所有涵蓋了我手頭的一個WP項目所有關於控件重寫的部份內容。

最後，順便慶祝一下，個人WP項目順利完成。