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?
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.