重写TextBox控件模板，增加提示文字功能，如何在TextBox事件触发器获得焦点触发时对提示文字进行平移TextBox外面去？

Question

重写TextBox控件模板，增加提示文字功能，提示文字的载体是一个TextBlock，用Tag作为提示文字的属性，

如何在触发器中获得焦点触发项被触发时，对模板内部的TextBlock整体进行平移到TextBox本体外的上面或左边去？失去焦点时在平移原来所在的位置？

类似下列js插件效果？

Answer 1

Hello,

你可以试一下下面的方法：

    <Grid >
        <TextBox FontSize="17" Height="26" Margin="198.725,150,189,0" Name="txt_Account" VerticalAlignment="Top" Foreground="Indigo" TabIndex="0" BorderThickness="1" Tag="Wing Span" >
            <TextBox.Resources>
                <VisualBrush x:Key="HelpBrush" TileMode="None" Opacity="0.3" Stretch="None" AlignmentX="Left">
                    <VisualBrush.Visual>
                        <TextBlock FontStyle="Italic" Text="{Binding ElementName=txt_Account, Path=Tag}"  />
                    </VisualBrush.Visual>
                </VisualBrush>
            </TextBox.Resources>
            <TextBox.Style>
                <Style TargetType="TextBox">
                    <Style.Triggers>
                        <Trigger Property="IsFocused" Value="true">
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsFocused" Value="false" />
                                <Condition Property="Text" Value="" />
                            </MultiTrigger.Conditions>
                            <Setter Property="Background" Value="{StaticResource HelpBrush}"/>
                        </MultiTrigger>
                    </Style.Triggers>
                </Style>
            </TextBox.Style>
        </TextBox>
        <TextBlock Name="TextBlock1" HorizontalAlignment="Left" TextWrapping="Wrap"  VerticalAlignment="Top" RenderTransformOrigin="1.592,2.066" Height="18" Width="89" Margin="199,127,0,0" Tag="Wing Span">
            <TextBlock.Resources>
                <VisualBrush x:Key="BlockBrush" TileMode="None" Opacity="0.3" Stretch="None" AlignmentX="Left">
                    <VisualBrush.Visual>
                        <TextBlock FontStyle="Italic" Text="{Binding ElementName=txt_Account,Path=Tag}"/>
                    </VisualBrush.Visual>
                </VisualBrush>
            </TextBlock.Resources>
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsFocused , ElementName=txt_Account}" Value="true">
                            <Setter Property="Background" Value="{StaticResource BlockBrush}"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>       
        </TextBlock>

    </Grid>

Best Regards,

Cherry

---

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact [e-mail].

Answer 2

 private void mobileTopPromptTextBox_LostFocus(object sender, RoutedEventArgs e)
        {
            TextBox tb = sender as TextBox;
            if (tb.Text == "")
            {
                TextBlock nei = (TextBlock)tb.Template.FindName("promptText", tb);
                ThicknessAnimation marginAnimation = new ThicknessAnimation();
                marginAnimation.From = new Thickness(5, 0 - (nei.FontSize + 7), 0, 0);
                marginAnimation.To = new Thickness(5, 0 , 0, 0);
                marginAnimation.Duration = TimeSpan.FromSeconds(playTime);
                nei.BeginAnimation(Grid.MarginProperty, marginAnimation);
            }
        }
        private void mobileTopPromptTextBox_GotFocus(object sender, RoutedEventArgs e)
        {
            TextBox tb = sender as TextBox;
            if (tb.Text == "")
            {
                TextBlock nei = (TextBlock)tb.Template.FindName("promptText", tb);
                ThicknessAnimation marginAnimation = new ThicknessAnimation();
                marginAnimation.From = new Thickness(5, 0, 0, 0);
                marginAnimation.To = new Thickness(5, 0 - (nei.FontSize + 7), 0, 0);
                marginAnimation.Duration = TimeSpan.FromSeconds(playTime);
                nei.BeginAnimation(Grid.MarginProperty, marginAnimation);
            }
        }

<ControlTemplate x:Key="mobileTopPromptTextBoxTemplate" TargetType="{x:Type TextBox}">
        <Grid  Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">

            <Border x:Name="InnerBorder"   Background="{TemplateBinding Background}"  BorderBrush="{TemplateBinding BorderBrush}"  BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0">
                <ScrollViewer Foreground="Red"  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" x:Name="PART_ContentHost"/>
            </Border>
            <TextBlock  Margin="5,0,0,0" IsHitTestVisible="False"  x:Name="promptText"  FontSize="{TemplateBinding FontSize}"    Text="{TemplateBinding Tag}"></TextBlock>
        </Grid>
    </ControlTemplate>

    <Style x:Key="mobilePromptTextBox" TargetType="{x:Type TextBox}" BasedOn="{StaticResource textBoxBasea}">
        <Setter Property="BorderBrush" Value="red"></Setter>
        <Setter Property="BorderThickness" Value="2"></Setter>
        <Setter Property="FontSize" Value="12"/>
        <Setter Property="Padding" Value="5"/>
        <Setter Property="TextAlignment" Value="left"></Setter>
        <Setter Property="AllowDrop" Value="true"/>
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <EventSetter Event="GotFocus" Handler="mobileTopPromptTextBox_GotFocus"></EventSetter>
        <EventSetter Event="LostFocus" Handler="mobileTopPromptTextBox_LostFocus"  ></EventSetter>
        <Setter Property="Template"  Value="{StaticResource mobileTopPromptTextBoxTemplate}">
        </Setter>
    </Style>

一个思路是播放动画时，变动内部的TextBlock的magin，用ThicknessAnimation实现平移的动画效果，但是如果要判断条件，则使用c#的事件代码，不能用事件触发器