none
给TextBox设置Placeholder的问题 RRS feed

  • 问题

  •     <Style x:Key="PlaceHolderTextBox" TargetType="{x:Type TextBox}">
            <Style.Triggers>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsFocused" Value="False"></Condition>
                        <Condition Property="Text" Value=""></Condition>
                    </MultiTrigger.Conditions>
                    <Setter Property="Background">
                        <Setter.Value>
                            <VisualBrush AlignmentX="Left" AlignmentY="Center" Stretch="None">
                                <VisualBrush.Visual>
                                    <TextBlock Background="Transparent" Foreground="#aaa"  FontSize="14" Text="{Binding Tag,RelativeSource={RelativeSource Self}}"/>
                                </VisualBrush.Visual>
                            </VisualBrush>
                        </Setter.Value>
                    </Setter>
                </MultiTrigger>
                <Trigger Property="IsFocused" Value="True">
                    <Setter Property="Background" Value="Transparent"></Setter>
                </Trigger>
            </Style.Triggers>
        </Style>

    我用上面的代码做了一个带Placeholder的TextBox,我直接用了TextBox的“Tag”属性来放Placeholder文本,

    但是我通过Binding Tag却取不到TextBox的Tag属性。如果直接写成固定的文本又是可以的:

                                <VisualBrush.Visual>
                                    <TextBlock Background="Transparent" Foreground="#aaa"  FontSize="14" Text="xxxxxxxx"/>
                                </VisualBrush.Visual>

    请问要怎么解决这个问题?


    da jia hao!

    2018年5月23日 7:56

答案

  • Hi liubin,

    你是想实现这样的效果吗?如果是的话, 你可以看一下下面的代码:

      <Style x:Key="placeHolder" TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type TextBox}}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TextBox}">
                            <Grid>
                                <TextBox Text="{Binding Path=Text,
                                                    RelativeSource={RelativeSource TemplatedParent}, 
                                                    Mode=TwoWay,
                                                    UpdateSourceTrigger=PropertyChanged}"
                                     x:Name="textSource" 
                                     Background="Transparent" 
                                     Panel.ZIndex="2" />
                                <TextBox Text="{TemplateBinding Tag}" Background="{TemplateBinding Background}" Panel.ZIndex="1">
                                    <TextBox.Style>
                                        <Style TargetType="{x:Type TextBox}">
                                            <Setter Property="Foreground" Value="Transparent"/>
                                            <Style.Triggers>
                                                <DataTrigger Binding="{Binding Path=Text, Source={x:Reference textSource}}" Value="">
                                                    <Setter Property="Foreground" Value="Gray"/>
                                                    <Setter Property="HorizontalContentAlignment" Value="Left"/>
                                                    <Setter Property="VerticalContentAlignment" Value="Center"/>
                                                </DataTrigger>
                                            </Style.Triggers>
                                        </Style>
                                    </TextBox.Style>
                                </TextBox>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>


    <Grid>
            <TextBox x:Name="sample" Width="100" Height="30" Style="{StaticResource placeHolder}" Tag="Search here"></TextBox>
              
        </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 MSDNFSF@microsoft.com.

    • 已标记为答案 liubin 2018年5月28日 3:15
    2018年5月24日 8:42
    版主

全部回复

  • Hi liubin,

    你是想实现这样的效果吗?如果是的话, 你可以看一下下面的代码:

      <Style x:Key="placeHolder" TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type TextBox}}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TextBox}">
                            <Grid>
                                <TextBox Text="{Binding Path=Text,
                                                    RelativeSource={RelativeSource TemplatedParent}, 
                                                    Mode=TwoWay,
                                                    UpdateSourceTrigger=PropertyChanged}"
                                     x:Name="textSource" 
                                     Background="Transparent" 
                                     Panel.ZIndex="2" />
                                <TextBox Text="{TemplateBinding Tag}" Background="{TemplateBinding Background}" Panel.ZIndex="1">
                                    <TextBox.Style>
                                        <Style TargetType="{x:Type TextBox}">
                                            <Setter Property="Foreground" Value="Transparent"/>
                                            <Style.Triggers>
                                                <DataTrigger Binding="{Binding Path=Text, Source={x:Reference textSource}}" Value="">
                                                    <Setter Property="Foreground" Value="Gray"/>
                                                    <Setter Property="HorizontalContentAlignment" Value="Left"/>
                                                    <Setter Property="VerticalContentAlignment" Value="Center"/>
                                                </DataTrigger>
                                            </Style.Triggers>
                                        </Style>
                                    </TextBox.Style>
                                </TextBox>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>


    <Grid>
            <TextBox x:Name="sample" Width="100" Height="30" Style="{StaticResource placeHolder}" Tag="Search here"></TextBox>
              
        </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 MSDNFSF@microsoft.com.

    • 已标记为答案 liubin 2018年5月28日 3:15
    2018年5月24日 8:42
    版主
  • 谢谢!

    是否必须设置Template才能够用TemplateBinding?

    我的那个解决方案为了简洁一些没有设置Template,结果就Binding不了Tag属性。


    da jia hao!

    2018年5月28日 3:15