如何在XAML中将CueBanner应用于文本框 [英] How to apply CueBanner for a TextBox in xaml

问题描述

我想要一个带有CueBanner的TextBox，但是它仍然无法正常工作. 我做错了什么? 我认为问题在于我在参考资料中使用了{RelativeSource TemplatedParent}.在不投入资源的情况下如何做到这一点?

I want to have a TextBox with CueBanner but it still does not work. What have I made wrong? I think the problem is that I am using {RelativeSource TemplatedParent} in Resources. How can I do that without putting in Resources?

我的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>

推荐答案

因此，一开始我不确定您所说的"CueBanner"是什么意思，直到我意识到它几乎与"Watermark"同义.因此，作为一个简单的示例，这将是一种快速简便的替代方法(因为乍一看，我不了解是什么原因使您必须具备的VisualBrush东西)使我更干净，可重复使用.确保您要更改我仅用于示例的颜色.您可能还会研究类似扩展工具包之类的内容，以了解更多相关信息内置的东西，但例如它们的水印与本例不同.

So I wasn't sure what you meant by "CueBanner" at first until I realized it was just synonymous with "Watermark" pretty much. So as a quick example, this would be a quick and easy alternative (since at first glance I don't understand what made that VisualBrush stuff necessary you had in there) made a bit more clean and re-usable though I'm sure you'll want to change the colors I used just for the example. You might also look into something like the Extended Toolkit for some more of this stuff built in, but theirs for example does watermarks differently than this example.

无论如何，概念示例Style模板(注意已添加mscorlib命名空间，以防您未在sys:String字典中使用它.

Anyhow, concept example Style template (noticed added the mscorlib namespace in case you don't have it in your res. dict. already for 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>

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

....and usage at the instance example;

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

Voila，一个快速且简单的带有水印的wpf xaml文本框.希望这会有所帮助，欢呼.

Voila, a quick and simple wpf xaml textbox with watermark. Hope this helps, cheers.

这篇关于如何在XAML中将CueBanner应用于文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！