Windows Phone 7 控件重写之TextBox 圆角输入框

Window Phone 7 默认的长方形的输入框有时候不能满足项目或者个人的需求。

这次分享的代码是：“圆角”输入框，之所以加引号，是因为，这个圆角是用两张图片来实现的！默认状态的灰色圆角背景图和获得焦点时候的橙色圆角背景图，来看截图吧。

浅色主题下的截图

 

 

深色主题下的截图

 

 

废话不多说，直接上代码

view source

print ?

01	<phone:PhoneApplicationPage

02	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

03	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

04	xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

05	xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

06	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

07	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

08	mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

09	x:Class="WindowsPhoneApplication2.MainPage"

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="TextBoxStyle1" TargetType="TextBox">

17	<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>

18	<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>

19	<Setter Property="Background" Value="{StaticResource PhoneTextBoxBrush}"/>

20	<Setter Property="Foreground" Value="{StaticResource PhoneTextBoxForegroundBrush}"/>

21	<Setter Property="BorderBrush" Value="{StaticResource PhoneTextBoxBrush}"/>

22	<Setter Property="SelectionBackground" Value="{StaticResource PhoneAccentBrush}"/>

23	<Setter Property="SelectionForeground" Value="{StaticResource PhoneTextBoxSelectionForegroundBrush}"/>

24	<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>

25	<Setter Property="Padding" Value="2"/>

26	<Setter Property="Template">

27	<Setter.Value>

28	<ControlTemplate TargetType="TextBox">

29	<Grid Background="Transparent">

30	<VisualStateManager.VisualStateGroups>

31	<VisualStateGroup x:Name="FocusStates">

32	<VisualState x:Name="Focused">

33	<Storyboard>

34	<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="ImageSource" Storyboard.TargetName="SeanBackground">

35	<DiscreteObjectKeyFrame KeyTime="0" Value="Images/input_focus.png"/>

36	</ObjectAnimationUsingKeyFrames>

37	</Storyboard>

38	</VisualState>

39	<VisualState x:Name="Unfocused"/>

40	</VisualStateGroup>

41	</VisualStateManager.VisualStateGroups>

42	<StackPanel Height="67" Margin="0,0,0,20" Width="420">

43	<StackPanel.Background>

44	<ImageBrush x:Name="SeanBackground" ImageSource="Images/input_normal.png" />

45	</StackPanel.Background>

46	<ContentControl x:Name="ContentElement" BorderThickness="0" HorizontalContentAlignment="Stretch" Margin="20,15,20,0" Padding="0,0,0,0" VerticalContentAlignment="Stretch"/>

47	</StackPanel>

48

</Grid>

49	</ControlTemplate>

50	</Setter.Value>

51

</Setter>

52

</Style>

53	</phone:PhoneApplicationPage.Resources>

54

55	<!--LayoutRoot 是放置所有页面内容的根网格-->

56	<Grid x:Name="LayoutRoot" Background="Transparent">

57	<Grid.RowDefinitions>

58	<RowDefinition Height="Auto"/>

59	<RowDefinition Height="*"/>

60	</Grid.RowDefinitions>

61

62	<!--TitlePanel 包含应用程序名称和页面标题-->

63	<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

64	<TextBlock x:Name="ApplicationTitle" Text="自定义控件样式" Style="{StaticResource PhoneTextNormalStyle}"/>

65	<TextBlock x:Name="PageTitle" Text="TextBox" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

66	</StackPanel>

67

68	<!--ContentPanel - 在此放置附加内容-->

69	<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

70	<TextBox Name="MyText" HorizontalAlignment="Left" Margin="28,15,0,0" VerticalAlignment="Top" Text="你好色彩"  Style="{StaticResource TextBoxStyle1}"/>

71	<Button Content="显示文字" Height="72" HorizontalAlignment="Left" Margin="28,108,0,0" Name="button1" VerticalAlignment="Top" Width="160" Click="button1_Click" />

72

</Grid>

73

</Grid>

74	</phone:PhoneApplicationPage>