如何在 xaml 中为 TextBox 应用 CueBanner

Question

我想要一个带有 CueBanner 的 TextBox，但它仍然不起作用。 我做错了什么？ 我认为问题在于我在资源中使用{RelativeSource TemplatedParent}。如果不投入资源，我怎么能做到这一点？

我的 xaml 代码：

<Style TargetType="{x:Type TextBox}">
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="OverridesDefaultStyle" Value="True" />
    <Setter Property="KeyboardNavigation.TabNavigation" Value="None" />
    <Setter Property="FocusVisualStyle" Value="{x:Null}" />
    <Setter Property="MinWidth" Value="120" />
    <Setter Property="MinHeight" Value="20" />
    <Setter Property="AllowDrop" Value="true" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TextBox}">
                <ControlTemplate.Resources>
                    <VisualBrush x:Key="CueBannerBrush" AlignmentX="Left" AlignmentY="Center" Stretch="None">
                        <VisualBrush.Visual>
                            <Label Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Tag}"
                                       Foreground="LightGray" />
                        </VisualBrush.Visual>
                    </VisualBrush>
                </ControlTemplate.Resources>

                <Border x:Name="Border" CornerRadius="0" Padding="2" BorderThickness="1" BorderBrush="Black">
                    <ScrollViewer Margin="0" x:Name="PART_ContentHost" />
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="Text" Value="{x:Static sys:String.Empty}">
                        <Setter Property="Background" Value="{StaticResource CueBannerBrush}" />
                    </Trigger>
                    <Trigger Property="Text" Value="{x:Null}">
                        <Setter Property="Background" Value="{StaticResource CueBannerBrush}" />
                    </Trigger>
                    <Trigger Property="IsKeyboardFocused" Value="True">
                        <Setter Property="Background" Value="LightGreen"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

感谢您的建议。

编辑

我的问题解决了，这是我的最终解决方案：

<Style TargetType="{x:Type TextBox}">
    <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
    <Setter Property="BorderBrush" Value="Gray"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="AllowDrop" Value="true"/>
    <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
    <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="OverridesDefaultStyle" Value="True" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TextBox}">
                <Border x:Name="Border" CornerRadius="0" Padding="2" 
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="1"
                        Background="{TemplateBinding Background}">
                    <Grid>
                        <ScrollViewer Margin="0" x:Name="PART_ContentHost" />
                        <TextBlock x:Name="Watermark"
                               Text="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}"
                               Foreground="LightGray" Margin="5,0" Visibility="Collapsed"/>
                    </Grid>
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="Text" Value="{x:Static sys:String.Empty}">
                        <Setter Property="Visibility" TargetName="Watermark" Value="Visible" />
                    </Trigger>
                    <Trigger Property="Text" Value="{x:Null}">
                        <Setter Property="Visibility" TargetName="Watermark" Value="Visible" />
                    </Trigger>
                    <Trigger Property="IsMouseCaptured" Value="True">
                        <Setter Property="Visibility" TargetName="Watermark" Value="Collapsed"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Opacity" TargetName="Border" Value="0.56"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>

    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Cursor" Value="IBeam" />
        </Trigger>
    </Style.Triggers>
</Style>

Answer 1

所以一开始我并不确定您所说的“CueBanner”是什么意思，直到我意识到它几乎是“水印”的同义词。举个简单的例子，这将是一个快速而简单的替代方案（因为乍一看，我不明白是什么让你在里面有必要的 VisualBrush 东西）虽然我是确定你会想要改变我只是用于示例的颜色。您可能还可以查看 Extended Toolkit 之类的内容来了解​​更多内置内容，但例如，他们的水印与本示例不同。

无论如何，概念示例 Style 模板（注意添加了 mscorlib 命名空间，以防您的资源库中没有它。字典已经为 sys:String 提供；

<SolidColorBrush x:Key="TextBox.Static.Border" Color="#FFABAdB3"/>
<SolidColorBrush x:Key="TextBox.MouseOver.Border" Color="#FF7EB4EA"/>
<SolidColorBrush x:Key="TextBox.Focus.Border" Color="#FF569DE5"/>

<Style x:Key="CWWatermarkTextBoxStyle" TargetType="{x:Type TextBox}" 
       xmlns:sys="clr-namespace:System;assembly=mscorlib">
   <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
   <Setter Property="BorderBrush" Value="{StaticResource TextBox.Static.Border}"/>
   <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
   <Setter Property="BorderThickness" Value="1"/>
   <Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
   <Setter Property="HorizontalContentAlignment" Value="Left"/>
   <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
   <Setter Property="AllowDrop" Value="true"/>
   <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
   <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
   <Setter Property="Template">
      <Setter.Value>
         <ControlTemplate TargetType="{x:Type TextBox}">
            <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
               <Grid>
                  <ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
                  <TextBlock x:Name="GenericWatermark"
                             Text="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}"
                             Foreground="Red" Margin="5,0" Visibility="Collapsed"/>
               </Grid>
            </Border>
         <ControlTemplate.Triggers>
            <Trigger Property="Text" Value="{x:Static sys:String.Empty}">
               <Setter Property="Visibility" TargetName="GenericWatermark" Value="Visible" />
               <Setter Property="Background" Value="Yellow" />
            </Trigger>
            <Trigger Property="IsEnabled" Value="false">
               <Setter Property="Opacity" TargetName="border" Value="0.56"/>
            </Trigger>
            <Trigger Property="IsMouseOver" Value="true">
               <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.MouseOver.Border}"/>
            </Trigger>
            <Trigger Property="IsKeyboardFocused" Value="true">
               <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/>
               <Setter Property="Visibility" TargetName="GenericWatermark" Value="Collapsed"/>
            </Trigger>
         </ControlTemplate.Triggers>
      </ControlTemplate>
   </Setter.Value>
   </Setter>
   <Style.Triggers>
      <MultiTrigger>
         <MultiTrigger.Conditions>
            <Condition Property="IsInactiveSelectionHighlightEnabled" Value="true"/>
            <Condition Property="IsSelectionActive" Value="false"/>
         </MultiTrigger.Conditions>
         <Setter Property="SelectionBrush" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
      </MultiTrigger>
   </Style.Triggers>
</Style>

....以及实例示例中的用法；

<TextBox Tag="HEY LOOK! I'M A TEXTBOX WITH A WATERMARK! WEEEE! :)"
         Style="{StaticResource CWWatermarkTextBoxStyle}"/>

瞧，一个快速而简单的带水印的 wpf xaml 文本框。希望这会有所帮助，干杯。