Window Phone 7 默认的长方形的输入框有时候不能满足项目或者个人的需求。
这次分享的代码是:“圆角”输入框,之所以加引号,是因为,这个圆角是用两张图片来实现的!默认状态的灰色圆角背景图和获得焦点时候的橙色圆角背景图,来看截图吧。
浅色主题下的截图
![](http://static.oschina.net/uploads/space/2012/1016/104014_H2q7_194471.png)
![](http://static.oschina.net/uploads/space/2012/1016/104025_MFev_194471.png)
深色主题下的截图
![](http://static.oschina.net/uploads/space/2012/1016/104046_gCPa_194471.png)
![](http://static.oschina.net/uploads/space/2012/1016/104059_MDpK_194471.png)
废话不多说,直接上代码
<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>
找不到放压缩包的地方,需要的留邮箱吧!