none
TextBox如何实现选中后变换显示效果? RRS feed

  • 问题

  • TextBox 一开始的背景显示为黄色的框显示,如下图所示:

    当选中后显示的背景为蓝色框:

    这种效果能实现吗?请帮忙解答!谢谢!

    2013年6月18日 6:31

答案

  • 模板的状态在哪里编辑? ->  Blend for Visual Studio用这个编辑。

    <Page
        x:Class="AppTextbox.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:AppTextbox"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    	<Page.Resources>
    		
    		<Style x:Key="TextBoxStylePNG" TargetType="TextBox">
    			<Setter Property="MinWidth" Value="{StaticResource TextControlThemeMinWidth}"/>
    			<Setter Property="MinHeight" Value="{StaticResource TextControlThemeMinHeight}"/>
    			<Setter Property="Foreground" Value="{StaticResource TextBoxForegroundThemeBrush}"/>
    			<Setter Property="Background" Value="{StaticResource TextBoxBackgroundThemeBrush}"/>
    			<Setter Property="BorderBrush" Value="{StaticResource TextBoxBorderThemeBrush}"/>
    			<Setter Property="BorderThickness" Value="{StaticResource TextControlBorderThemeThickness}"/>
    			<Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>
    			<Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/>
    			<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden"/>
    			<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden"/>
    			<Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False"/>
    			<Setter Property="Padding" Value="{StaticResource TextControlThemePadding}"/>
    			<Setter Property="Template">
    				<Setter.Value>
    					<ControlTemplate TargetType="TextBox">
    						<Grid>
    							<Grid.Resources>
    								<Style x:Name="DeleteButtonStyle" TargetType="Button">
    									<Setter Property="Template">
    										<Setter.Value>
    											<ControlTemplate TargetType="Button">
    												<Grid>
    													<VisualStateManager.VisualStateGroups>
    														<VisualStateGroup x:Name="CommonStates">
    															<VisualState x:Name="Normal"/>
    															<VisualState x:Name="PointerOver">
    																<Storyboard>
    																	<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="BackgroundElement">
    																		<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TextBoxButtonPointerOverBackgroundThemeBrush}"/>
    																	</ObjectAnimationUsingKeyFrames>
    																	<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BorderElement">
    																		<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TextBoxButtonPointerOverBorderThemeBrush}"/>
    																	</ObjectAnimationUsingKeyFrames>
    																	<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="GlyphElement">
    																		<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TextBoxButtonPointerOverForegroundThemeBrush}"/>
    																	</ObjectAnimationUsingKeyFrames>
    																</Storyboard>
    															</VisualState>
    															<VisualState x:Name="Pressed">
    																<Storyboard>
    																	<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="BackgroundElement">
    																		<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TextBoxButtonPressedBackgroundThemeBrush}"/>
    																	</ObjectAnimationUsingKeyFrames>
    																	<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BorderElement">
    																		<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TextBoxButtonPressedBorderThemeBrush}"/>
    																	</ObjectAnimationUsingKeyFrames>
    																	<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="GlyphElement">
    																		<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TextBoxButtonPressedForegroundThemeBrush}"/>
    																	</ObjectAnimationUsingKeyFrames>
    																</Storyboard>
    															</VisualState>
    															<VisualState x:Name="Disabled">
    																<Storyboard>
    																	<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundElement"/>
    																	<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BorderElement"/>
    																</Storyboard>
    															</VisualState>
    														</VisualStateGroup>
    													</VisualStateManager.VisualStateGroups>
    													<Border x:Name="BorderElement" BorderBrush="{StaticResource TextBoxButtonBorderThemeBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
    													<Border x:Name="BackgroundElement" Background="{StaticResource TextBoxButtonBackgroundThemeBrush}" Margin="{TemplateBinding BorderThickness}">
    														<TextBlock x:Name="GlyphElement" Foreground="{StaticResource TextBoxButtonForegroundThemeBrush}" FontFamily="{StaticResource SymbolThemeFontFamily}" HorizontalAlignment="Center" Text="&#xE0A4;" VerticalAlignment="Center"/>
    													</Border>
    												</Grid>
    											</ControlTemplate>
    										</Setter.Value>
    									</Setter>
    								</Style>
    							</Grid.Resources>
    							<Grid.ColumnDefinitions>
    								<ColumnDefinition Width="*"/>
    								<ColumnDefinition Width="Auto"/>
    							</Grid.ColumnDefinitions>
    							<VisualStateManager.VisualStateGroups>
    								<VisualStateGroup x:Name="CommonStates">
    									<VisualState x:Name="Disabled">
    										<Storyboard>
    											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentElement">
    												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TextBoxDisabledForegroundThemeBrush}"/>
    											</ObjectAnimationUsingKeyFrames>
    										</Storyboard>
    									</VisualState>
    									<VisualState x:Name="Normal"/>
    									<VisualState x:Name="PointerOver"/>
    									<VisualState x:Name="Focused">
    										<Storyboard>
    											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Control.Background)" Storyboard.TargetName="ContentElement">
    												<DiscreteObjectKeyFrame KeyTime="0">
    													<DiscreteObjectKeyFrame.Value>
    														<ImageBrush/>
    													</DiscreteObjectKeyFrame.Value>
    												</DiscreteObjectKeyFrame>
    											</ObjectAnimationUsingKeyFrames>
    											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imgNormal">
    												<DiscreteObjectKeyFrame KeyTime="0">
    													<DiscreteObjectKeyFrame.Value>
    														<Visibility>Collapsed</Visibility>
    													</DiscreteObjectKeyFrame.Value>
    												</DiscreteObjectKeyFrame>
    											</ObjectAnimationUsingKeyFrames>
    											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imgFocus">
    												<DiscreteObjectKeyFrame KeyTime="0">
    													<DiscreteObjectKeyFrame.Value>
    														<Visibility>Visible</Visibility>
    													</DiscreteObjectKeyFrame.Value>
    												</DiscreteObjectKeyFrame>
    											</ObjectAnimationUsingKeyFrames>
    										</Storyboard>
    									</VisualState>
    								</VisualStateGroup>
    								<VisualStateGroup x:Name="ButtonStates">
    									<VisualState x:Name="ButtonVisible"/>
    									<VisualState x:Name="ButtonCollapsed"/>
    								</VisualStateGroup>
    							</VisualStateManager.VisualStateGroups>
    							<Image x:Name="imgNormal" Source="Assets/normal.png"/>
    							<Image x:Name="imgFocus" Source="Assets/focus.png" Visibility="Collapsed"/>
    							<ScrollViewer x:Name="ContentElement" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsTabStop="False" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" Padding="{TemplateBinding Padding}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="Disabled" Margin="10"/>
    						</Grid>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    		</Style>
    	</Page.Resources>
    
        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        	<TextBox HorizontalAlignment="Left" Height="100"  Margin="163,141,0,0" TextWrapping="Wrap" Text="121212" VerticalAlignment="Top" Width="562" Style="{StaticResource TextBoxStylePNG}"/>
        </Grid>
    </Page>
    

    2013年6月26日 9:40
  •   更改TextBox 的模板,在里面包含两个 Image 控件,放于底层。

       PS做出这两张图,分别赋予上面两个 Image 控件,可能存在图片拉伸问题。

      在模板的“状态”编辑中,设置Normal 时候 黄图显示 ,蓝图隐藏,选中的时候 黄图隐藏,蓝图显示。

    2013年6月19日 1:34
  • Hi

    个人建议可以用Blend做出一个TextBox的圆角效果,然后用BorderBrush来更改TextBox的边框颜色。

    请参考: http://dumpcoding.blogspot.in/2011/04/create-rounded-corner-textbox-in.html http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.control.borderbrush.aspx

    以上请参考。


    James He
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    2013年6月19日 2:19
    版主

全部回复

  •   更改TextBox 的模板,在里面包含两个 Image 控件,放于底层。

       PS做出这两张图,分别赋予上面两个 Image 控件,可能存在图片拉伸问题。

      在模板的“状态”编辑中,设置Normal 时候 黄图显示 ,蓝图隐藏,选中的时候 黄图隐藏,蓝图显示。

    2013年6月19日 1:34
  • Hi

    个人建议可以用Blend做出一个TextBox的圆角效果,然后用BorderBrush来更改TextBox的边框颜色。

    请参考: http://dumpcoding.blogspot.in/2011/04/create-rounded-corner-textbox-in.html http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.control.borderbrush.aspx

    以上请参考。


    James He
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    2013年6月19日 2:19
    版主
  • 你好有没有具体的事例?模板的状态在哪里编辑?
    2013年6月25日 6:47
  • 你好,第一个网页打不开,用BorderBrush来更改TextBox的边框颜色,这个要如何判断变成哪个颜色?
    2013年6月25日 6:48
  • 模板的状态在哪里编辑? ->  Blend for Visual Studio用这个编辑。

    <Page
        x:Class="AppTextbox.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:AppTextbox"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    	<Page.Resources>
    		
    		<Style x:Key="TextBoxStylePNG" TargetType="TextBox">
    			<Setter Property="MinWidth" Value="{StaticResource TextControlThemeMinWidth}"/>
    			<Setter Property="MinHeight" Value="{StaticResource TextControlThemeMinHeight}"/>
    			<Setter Property="Foreground" Value="{StaticResource TextBoxForegroundThemeBrush}"/>
    			<Setter Property="Background" Value="{StaticResource TextBoxBackgroundThemeBrush}"/>
    			<Setter Property="BorderBrush" Value="{StaticResource TextBoxBorderThemeBrush}"/>
    			<Setter Property="BorderThickness" Value="{StaticResource TextControlBorderThemeThickness}"/>
    			<Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>
    			<Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/>
    			<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden"/>
    			<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden"/>
    			<Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False"/>
    			<Setter Property="Padding" Value="{StaticResource TextControlThemePadding}"/>
    			<Setter Property="Template">
    				<Setter.Value>
    					<ControlTemplate TargetType="TextBox">
    						<Grid>
    							<Grid.Resources>
    								<Style x:Name="DeleteButtonStyle" TargetType="Button">
    									<Setter Property="Template">
    										<Setter.Value>
    											<ControlTemplate TargetType="Button">
    												<Grid>
    													<VisualStateManager.VisualStateGroups>
    														<VisualStateGroup x:Name="CommonStates">
    															<VisualState x:Name="Normal"/>
    															<VisualState x:Name="PointerOver">
    																<Storyboard>
    																	<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="BackgroundElement">
    																		<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TextBoxButtonPointerOverBackgroundThemeBrush}"/>
    																	</ObjectAnimationUsingKeyFrames>
    																	<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BorderElement">
    																		<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TextBoxButtonPointerOverBorderThemeBrush}"/>
    																	</ObjectAnimationUsingKeyFrames>
    																	<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="GlyphElement">
    																		<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TextBoxButtonPointerOverForegroundThemeBrush}"/>
    																	</ObjectAnimationUsingKeyFrames>
    																</Storyboard>
    															</VisualState>
    															<VisualState x:Name="Pressed">
    																<Storyboard>
    																	<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="BackgroundElement">
    																		<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TextBoxButtonPressedBackgroundThemeBrush}"/>
    																	</ObjectAnimationUsingKeyFrames>
    																	<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BorderElement">
    																		<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TextBoxButtonPressedBorderThemeBrush}"/>
    																	</ObjectAnimationUsingKeyFrames>
    																	<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="GlyphElement">
    																		<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TextBoxButtonPressedForegroundThemeBrush}"/>
    																	</ObjectAnimationUsingKeyFrames>
    																</Storyboard>
    															</VisualState>
    															<VisualState x:Name="Disabled">
    																<Storyboard>
    																	<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundElement"/>
    																	<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BorderElement"/>
    																</Storyboard>
    															</VisualState>
    														</VisualStateGroup>
    													</VisualStateManager.VisualStateGroups>
    													<Border x:Name="BorderElement" BorderBrush="{StaticResource TextBoxButtonBorderThemeBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
    													<Border x:Name="BackgroundElement" Background="{StaticResource TextBoxButtonBackgroundThemeBrush}" Margin="{TemplateBinding BorderThickness}">
    														<TextBlock x:Name="GlyphElement" Foreground="{StaticResource TextBoxButtonForegroundThemeBrush}" FontFamily="{StaticResource SymbolThemeFontFamily}" HorizontalAlignment="Center" Text="&#xE0A4;" VerticalAlignment="Center"/>
    													</Border>
    												</Grid>
    											</ControlTemplate>
    										</Setter.Value>
    									</Setter>
    								</Style>
    							</Grid.Resources>
    							<Grid.ColumnDefinitions>
    								<ColumnDefinition Width="*"/>
    								<ColumnDefinition Width="Auto"/>
    							</Grid.ColumnDefinitions>
    							<VisualStateManager.VisualStateGroups>
    								<VisualStateGroup x:Name="CommonStates">
    									<VisualState x:Name="Disabled">
    										<Storyboard>
    											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentElement">
    												<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TextBoxDisabledForegroundThemeBrush}"/>
    											</ObjectAnimationUsingKeyFrames>
    										</Storyboard>
    									</VisualState>
    									<VisualState x:Name="Normal"/>
    									<VisualState x:Name="PointerOver"/>
    									<VisualState x:Name="Focused">
    										<Storyboard>
    											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Control.Background)" Storyboard.TargetName="ContentElement">
    												<DiscreteObjectKeyFrame KeyTime="0">
    													<DiscreteObjectKeyFrame.Value>
    														<ImageBrush/>
    													</DiscreteObjectKeyFrame.Value>
    												</DiscreteObjectKeyFrame>
    											</ObjectAnimationUsingKeyFrames>
    											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imgNormal">
    												<DiscreteObjectKeyFrame KeyTime="0">
    													<DiscreteObjectKeyFrame.Value>
    														<Visibility>Collapsed</Visibility>
    													</DiscreteObjectKeyFrame.Value>
    												</DiscreteObjectKeyFrame>
    											</ObjectAnimationUsingKeyFrames>
    											<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="imgFocus">
    												<DiscreteObjectKeyFrame KeyTime="0">
    													<DiscreteObjectKeyFrame.Value>
    														<Visibility>Visible</Visibility>
    													</DiscreteObjectKeyFrame.Value>
    												</DiscreteObjectKeyFrame>
    											</ObjectAnimationUsingKeyFrames>
    										</Storyboard>
    									</VisualState>
    								</VisualStateGroup>
    								<VisualStateGroup x:Name="ButtonStates">
    									<VisualState x:Name="ButtonVisible"/>
    									<VisualState x:Name="ButtonCollapsed"/>
    								</VisualStateGroup>
    							</VisualStateManager.VisualStateGroups>
    							<Image x:Name="imgNormal" Source="Assets/normal.png"/>
    							<Image x:Name="imgFocus" Source="Assets/focus.png" Visibility="Collapsed"/>
    							<ScrollViewer x:Name="ContentElement" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsTabStop="False" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" Padding="{TemplateBinding Padding}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="Disabled" Margin="10"/>
    						</Grid>
    					</ControlTemplate>
    				</Setter.Value>
    			</Setter>
    		</Style>
    	</Page.Resources>
    
        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        	<TextBox HorizontalAlignment="Left" Height="100"  Margin="163,141,0,0" TextWrapping="Wrap" Text="121212" VerticalAlignment="Top" Width="562" Style="{StaticResource TextBoxStylePNG}"/>
        </Grid>
    </Page>
    

    2013年6月26日 9:40