Windows Phone 7 控件重寫之TextBox 圓角輸入框

Window Phone 7 默認的長方形的輸入框有時候不能知足項目或者我的的需求。

此次分享的代碼是：「圓角」輸入框，之因此加引號，是由於，這個圓角是用兩張圖片來實現的！默認狀態的灰色圓角背景圖和得到焦點時候的橙色圓角背景圖，來看截圖吧。

淺色主題下的截圖

 

深色主題下的截圖

 

廢話很少說，直接上代碼

<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="WindowsPhoneApplication2.MainPage"
	FontFamily="{StaticResource PhoneFontFamilyNormal}"
	FontSize="{StaticResource PhoneFontSizeNormal}"
	Foreground="{StaticResource PhoneForegroundBrush}"
	SupportedOrientations="Portrait" Orientation="Portrait"
	shell:SystemTray.IsVisible="True">
	<phone:PhoneApplicationPage.Resources>
		<Style x:Key="TextBoxStyle1" TargetType="TextBox">
			<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
			<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
			<Setter Property="Background" Value="{StaticResource PhoneTextBoxBrush}"/>
			<Setter Property="Foreground" Value="{StaticResource PhoneTextBoxForegroundBrush}"/>
			<Setter Property="BorderBrush" Value="{StaticResource PhoneTextBoxBrush}"/>
			<Setter Property="SelectionBackground" Value="{StaticResource PhoneAccentBrush}"/>
			<Setter Property="SelectionForeground" Value="{StaticResource PhoneTextBoxSelectionForegroundBrush}"/>
			<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
			<Setter Property="Padding" Value="2"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="TextBox">
						<Grid Background="Transparent">
							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="FocusStates">
									<VisualState x:Name="Focused">
										<Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="ImageSource" Storyboard.TargetName="SeanBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Images/input_focus.png"/>
                                            </ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Unfocused"/>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
                            <StackPanel Height="67" Margin="0,0,0,20" Width="420">
                                <StackPanel.Background>
                                    <ImageBrush x:Name="SeanBackground" ImageSource="Images/input_normal.png" />
                                </StackPanel.Background>
                                <ContentControl x:Name="ContentElement" BorderThickness="0" HorizontalContentAlignment="Stretch" Margin="20,15,20,0" Padding="0,0,0,0" VerticalContentAlignment="Stretch"/>
                            </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="TextBox" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
		</StackPanel>

		<!--ContentPanel - 在此放置附加內容-->
		<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <TextBox Name="MyText" HorizontalAlignment="Left" Margin="28,15,0,0" VerticalAlignment="Top" Text="你好色彩"  Style="{StaticResource TextBoxStyle1}"/>
            <Button Content="顯示文字" Height="72" HorizontalAlignment="Left" Margin="28,108,0,0" Name="button1" VerticalAlignment="Top" Width="160" Click="button1_Click" />
        </Grid>
	</Grid>
</phone:PhoneApplicationPage>

找不到放壓縮包的地方，須要的留郵箱吧！