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>

找不到放压缩包的地方，需要的留邮箱吧！