欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Windows Phone 7中带题头的TextBox和PasswordBox

程序员文章站 2022-03-23 11:53:01
  之前在做豆瓣电台的时候想实现一个登录界面,起初是把TextBlock和TextBox放在一起(效果如下),但是这样实现出来的效果既浪费空间,又不美观。...

 

之前在做豆瓣电台的时候想实现一个登录界面,起初是把TextBlock和TextBox放在一起(效果如下),但是这样实现出来的效果既浪费空间,又不美观。

Windows Phone 7中带题头的TextBox和PasswordBox

因为之前写WPF对自定义控件有一些基础,所以就对TextBox和Password的Template做了些手脚,让题头融合到控件里。这样既美观又节省空间,同时还可以保证不会推动系统控件风格和功能,如下图:

Windows Phone 7中带题头的TextBox和PasswordBox

实现上面的效果非常简单,只需要在Blend中创建一个新的TextBox,然后右键-Edit Template-Edit a Copy。在弹出的对话框中的Name设定一个名字,如“LabelTextBox”,然后在Define in中选择Application以在整个程序范围内都可以使用它。

操作完这些以后Blend会自动在App.xaml里创建一个新的Style资源,我们在里面搜索一下ContentControl,这就是TextBox中显示文字的元素了。剩下的就是对这个元素进行改造,如调整位置,添加新元素等等。下面是我写的TextBox和PasswordBox的资源:

        <ControlTemplate x:Key="PhoneDisabledTextBoxTemplate" TargetType="TextBox">

            <ContentControl x:Name="ContentElement" BorderThickness="0" HorizontalContentAlignment="Stretch" Margin="{StaticResource PhoneTextBoxInnerMargin}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="Stretch"/>

        </ControlTemplate>

        <Style x:Key="LabelTextBox" 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="CommonStates">

                                    <VisualState x:Name="Normal"/>

                                    <VisualState x:Name="MouseOver"/>

                                    <VisualState x:Name="Disabled">

                                        <Storyboard>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EnabledBorder">

                                                <DiscreteObjectKeyFrame KeyTime="0">

                                                    <DiscreteObjectKeyFrame.Value>

                                                        <Visibility>Collapsed</Visibility>

                                                    </DiscreteObjectKeyFrame.Value>

                                                </DiscreteObjectKeyFrame>

                                            </ObjectAnimationUsingKeyFrames>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledOrReadonlyBorder">

                                                <DiscreteObjectKeyFrame KeyTime="0">

                                                    <DiscreteObjectKeyFrame.Value>

                                                        <Visibility>Visible</Visibility>

                                                    </DiscreteObjectKeyFrame.Value>

                                                </DiscreteObjectKeyFrame>

                                            </ObjectAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </VisualState>

                                    <VisualState x:Name="ReadOnly">

                                        <Storyboard>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EnabledBorder">

                                                <DiscreteObjectKeyFrame KeyTime="0">

                                                    <DiscreteObjectKeyFrame.Value>

                                                        <Visibility>Collapsed</Visibility>

                                                    </DiscreteObjectKeyFrame.Value>

                                                </DiscreteObjectKeyFrame>

                                            </ObjectAnimationUsingKeyFrames>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledOrReadonlyBorder">

                                                <DiscreteObjectKeyFrame KeyTime="0">

                                                    <DiscreteObjectKeyFrame.Value>

                                                        <Visibility>Visible</Visibility>

                                                    </DiscreteObjectKeyFrame.Value>

                                                </DiscreteObjectKeyFrame>

                                            </ObjectAnimationUsingKeyFrames>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="DisabledOrReadonlyBorder">

                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxBrush}"/>

                                            </ObjectAnimationUsingKeyFrames>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="DisabledOrReadonlyBorder">

                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxBrush}"/>

                                            </ObjectAnimationUsingKeyFrames>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DisabledOrReadonlyContent">

                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxReadOnlyBrush}"/>

                                            </ObjectAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </VisualState>

                                </VisualStateGroup>

                                <VisualStateGroup x:Name="FocusStates">

                                    <VisualState x:Name="Focused">

                                        <Storyboard>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="EnabledBorder">

                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBackgroundBrush}"/>

                                            </ObjectAnimationUsingKeyFrames>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="EnabledBorder">

                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBorderBrush}"/>

                                            </ObjectAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </VisualState>

                                    <VisualState x:Name="Unfocused"/>

                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>

                            <Border x:Name="EnabledBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="{StaticResource PhoneTouchTargetOverhang}">

                                <Grid>

                                    <Grid.ColumnDefinitions>

                                        <ColumnDefinition Width="Auto" />

                                        <ColumnDefinition Width="*" />

                                    </Grid.ColumnDefinitions>

                                    <TextBlock Grid.Column="0" Margin="10, 0" Text="{TemplateBinding Tag}" VerticalAlignment="Center" />

                                    <ContentControl Grid.Column="1" x:Name="ContentElement" BorderThickness="0" HorizontalContentAlignment="Stretch" Margin="1,2,1,2" Padding="{TemplateBinding Padding}" VerticalContentAlignment="Stretch" VerticalAlignment="Center"/>

                                </Grid>

                            </Border>

                            <Border x:Name="DisabledOrReadonlyBorder" BorderBrush="{StaticResource PhoneDisabledBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" Margin="{StaticResource PhoneTouchTargetOverhang}" Visibility="Collapsed">

                                <Grid>

                                    <Grid.ColumnDefinitions>

                                        <ColumnDefinition Width="Auto" />

                                        <ColumnDefinition Width="*" />

                                    </Grid.ColumnDefinitions>

                                    <TextBlock Grid.Column="0" Margin="10, 0" Text="{TemplateBinding Tag}" VerticalAlignment="Center" Foreground="{StaticResource PhoneDisabledBrush}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" />

                                    <TextBox Grid.Column="1" x:Name="DisabledOrReadonlyContent" Background="Transparent" Foreground="{StaticResource PhoneDisabledBrush}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" IsReadOnly="True" SelectionForeground="{TemplateBinding SelectionForeground}" SelectionBackground="{TemplateBinding SelectionBackground}" TextAlignment="{TemplateBinding TextAlignment}" TextWrapping="{TemplateBinding TextWrapping}" Text="{TemplateBinding Text}" Template="{StaticResource PhoneDisabledTextBoxTemplate}"/>

                                </Grid>

                            </Border>

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

        <ControlTemplate x:Key="PhoneDisabledPasswordBoxTemplate" TargetType="PasswordBox">

            <Border x:Name="ContentElement" BorderThickness="0" Margin="{StaticResource PhonePasswordBoxInnerMargin}" Padding="{TemplateBinding Padding}"/>

        </ControlTemplate>

        <Style x:Key="LabelPassword" TargetType="PasswordBox">

            <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="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>

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

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

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

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="PasswordBox">

                        <Grid Background="Transparent">

                            <VisualStateManager.VisualStateGroups>

                                <VisualStateGroup x:Name="CommonStates">

                                    <VisualState x:Name="Normal"/>

                                    <VisualState x:Name="MouseOver"/>

                                    <VisualState x:Name="Disabled">

                                        <Storyboard>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EnabledBorder">

                                                <DiscreteObjectKeyFrame KeyTime="0">

                                                    <DiscreteObjectKeyFrame.Value>

                                                        <Visibility>Collapsed</Visibility>

                                                    </DiscreteObjectKeyFrame.Value>

                                                </DiscreteObjectKeyFrame>

                                            </ObjectAnimationUsingKeyFrames>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledBorder">

                                                <DiscreteObjectKeyFrame KeyTime="0">

                                                    <DiscreteObjectKeyFrame.Value>

                                                        <Visibility>Visible</Visibility>

                                                    </DiscreteObjectKeyFrame.Value>

                                                </DiscreteObjectKeyFrame>

                                            </ObjectAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </VisualState>

                                </VisualStateGroup>

                                <VisualStateGroup x:Name="FocusStates">

                                    <VisualState x:Name="Focused">

                                        <Storyboard>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="EnabledBorder">

                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBackgroundBrush}"/>

                                            </ObjectAnimationUsingKeyFrames>

                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="EnabledBorder">

                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBorderBrush}"/>

                                            </ObjectAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </VisualState>

                                    <VisualState x:Name="Unfocused"/>

                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>

                            <Border x:Name="EnabledBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="{StaticResource PhoneTouchTargetOverhang}">

                                <Grid>

                                    <Grid.ColumnDefinitions>

                                        <ColumnDefinition Width="Auto" />

                                        <ColumnDefinition Width="*" />

                                    </Grid.ColumnDefinitions>

                                    <TextBlock Grid.Column="0" Margin="10, 0" Text="{TemplateBinding Tag}" VerticalAlignment="Center" />

                                    <Border Grid.Column="1" x:Name="ContentElement" BorderThickness="0" Margin="{StaticResource PhonePasswordBoxInnerMargin}" Padding="{TemplateBinding Padding}"/>

                                </Grid>

                            </Border>

                            <Border x:Name="DisabledBorder" BorderBrush="{StaticResource PhoneDisabledBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" Margin="{StaticResource PhoneTouchTargetOverhang}" Visibility="Collapsed">

                                <Grid>

                                    <Grid.ColumnDefinitions>

                                        <ColumnDefinition Width="Auto" />

                                        <ColumnDefinition Width="*" />

                                    </Grid.ColumnDefinitions>

                                    <TextBlock Grid.Column="0" Margin="10, 0" Text="{TemplateBinding Tag}" VerticalAlignment="Center" Foreground="{StaticResource PhoneDisabledBrush}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" />

                                    <PasswordBox Grid.Column="1" x:Name="DisabledContent" Background="Transparent" Foreground="{StaticResource PhoneDisabledBrush}" Password="{TemplateBinding Password}" PasswordChar="{TemplateBinding PasswordChar}" Template="{StaticResource PhoneDisabledPasswordBoxTemplate}"/>

                                </Grid>

                            </Border>

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

Ok,样式设定完毕,要使用的时候就非常简单了,在项目里的任何一个TextBox或者PasswordBox中像这样使用它就可以了:

<TextBox Tag="帐号:" Style="{StaticResource LabelTextBox}" Name="Username" />

<PasswordBox Tag="密码:" Style="{StaticResource LabelPassword}" Name="Password" />

其中Tag是控件前面题头里的文字,而TextBox和PasswordBox的功能不会受到任何影响~

 

摘自:博比123