文本框上的XAML Controltemplate，文本框上的Datatrigger

Question

I've create a custom TextBox , I want to style this, and add a Watermark to this TextBox . I want to have the watermark added when the TextBox is empty, this visiblity should only be set from my Style . This is my style:

<Style TargetType="{x:Type textboxes:CustomTextBox}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type textboxes:CustomTextBox}">
                <Grid>
                    <Border Name="Border"
                            CornerRadius="2"
                            Padding="2"
                            Background="DeepPink"
                            BorderBrush="Green"
                            BorderThickness="1">
                        <Grid>
                            <ScrollViewer Margin="0"
                                          x:Name="PART_ContentHost" />
                            <TextBlock IsHitTestVisible="False"
                                       Text="WATERMARK!"
                                       Foreground="White"
                                       VerticalAlignment="Center"
                                       HorizontalAlignment="Left"
                                       Margin="10,0,0,0">
                                <TextBlock.Style>
                                    <Style TargetType="{x:Type TextBlock}">
                                        <Setter Property="Visibility"
                                                Value="Collapsed" />
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding Text, ElementName=PART_ContentHost}"
                                                         Value="">
                                                <Setter Property="Visibility"
                                                        Value="Visible" />
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </TextBlock.Style></TextBlock>
                        </Grid>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The style is applied as expected, but I struggle to define the DataTrigger binding inside the TextBlock . What should I Bind to?

Answer 1

you should use ControlTemplate triggers instead. You need to check if text is empty but also if textbox doest not have focus, so multitrigger is required:

here is my watermark textbox style where I use Tag property to specify watermark text:

<Style x:Key="WatermarkTextBox" TargetType="TextBox" BasedOn="{StaticResource {x:Type TextBox}}">
    <Setter Property="Tag" Value="Enter Text" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TextBox">
                <Grid>
                    <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                        <ScrollViewer x:Name="PART_ContentHost" Focusable="False" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
                    </Border>

                    <TextBlock x:Name="Watermark" Text="{TemplateBinding Tag}" 
                            Visibility="Collapsed"  IsHitTestVisible="False" Opacity="0.5"
                            Foreground="{TemplateBinding Foreground}" 
                            Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            TextAlignment="{TemplateBinding TextAlignment}"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsKeyboardFocusWithin" Value="False" />
                            <Condition Property="Text" Value="" />
                        </MultiTrigger.Conditions>
                        <Setter TargetName="Watermark" Property="Visibility" Value="Visible" />
                    </MultiTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>