将带有样式的文本框文本从模板绑定到视图模型

Question

我有一些文本框样式来自这样的模板

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBox}">
                    <Border Background="White" CornerRadius="8" x:Name="container">
                        <Grid>
                            <TextBox Background="White"
                                     FontFamily="Poppins" FontSize="11"
                                     VerticalAlignment="Center"
                                     Padding="5"
                                     Name="SearchBox"
                                     Foreground="Black"
                                     Margin="2"
                                     BorderThickness="0"
                                     Text="{TemplateBinding Text}"
                                    />

                            <TextBlock Text="{TemplateBinding Tag}" Name="Placeholder"
                                       FontSize="11" FontFamily="Poppins"
                                       Foreground="Gray"
                                       VerticalAlignment="Center"
                                       IsHitTestVisible="False"
                                       Grid.Column="1" Padding="5" Margin="6,0,0,0">

                                <TextBlock.Style>
                                    <Style TargetType="{x:Type TextBlock}">
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding Text, ElementName=SearchBox}" Value="">
                                                <Setter Property="Visibility" Value="Visible"></Setter>
                                            </DataTrigger>
                                        </Style.Triggers>
                                        <Setter Property="Visibility" Value="Hidden"></Setter>
                                    </Style>
                                </TextBlock.Style>
                            </TextBlock>
                        </Grid>

                    </Border>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Background" Value="#E6E6E6" TargetName="container"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

只是为了显示一个占位符。这可行，但是当我尝试将属性 Text 绑定到视图模型时出现问题。

                        <TextBox Text="{Binding NombreCliente}" 
                         Style="{StaticResource SearchTextBox}"
                         Grid.Row="1"
                             Tag="Nombre"/>

我已经完成了测试，虽然文本框具有这种样式，但绑定总是返回 null 或“”。 我在其他问题中发现有一些绑定父级的东西，他们解决了这个问题

  <TextBox Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Text, 
  UpdateSourceTrigger=PropertyChanged}"....

但是如果我将文本绑定到模板父级，我如何绑定到视图模型？

Answer 1

TextBox 的模板不应包含另一个 TextBox 控件。

将其替换为ScrollViewer 并使用Style 设置器设置FontFamily 和FontSize 属性：

<ControlTemplate TargetType="{x:Type TextBox}">
    <Border Background="White" CornerRadius="8" x:Name="container">
        <Grid>
            <ScrollViewer x:Name="PART_ContentHost" Margin="2" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>

            <TextBlock Text="{TemplateBinding Tag}" Name="Placeholder"
                                       FontSize="11" FontFamily="Poppins"
                                       Foreground="Gray"
                                       VerticalAlignment="Center"
                                       IsHitTestVisible="False"
                                       Grid.Column="1" Padding="5" Margin="6,0,0,0">

                <TextBlock.Style>
                    <Style TargetType="{x:Type TextBlock}">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Text, ElementName=SearchBox}" Value="">
                                <Setter Property="Visibility" Value="Visible"></Setter>
                            </DataTrigger>
                        </Style.Triggers>
                        <Setter Property="Visibility" Value="Hidden"></Setter>
                    </Style>
                </TextBlock.Style>
            </TextBlock>
        </Grid>

    </Border>

    <ControlTemplate.Triggers>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Background" Value="#E6E6E6" TargetName="container"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

Answer 2

如果这是用于文本框的模板，则说明您创建的模板不正确。
事实上，您没有给 TextBox 空间来显示文本，而是将它与另一个与此模板将使用的文本框无关的 TextBox 重叠在顶部。
用于显示文本的 TextBox 在其模板中查找名为 PART_ContentHost 的 ScrollViewer。
并且TextBox的所有属性设置都必须移到模板外的Setters中。

示例模板：

<Style TargetType="TextBox">
    <Setter Property="Background" Value="White"/>
    <Setter Property="FontFamily" Value="Poppins"/>
    <Setter Property="FontSize" Value="11"/>
    <Setter Property="Padding" Value="5"/>
    <Setter Property="Foreground" Value="Black"/>
    <Setter Property="Margin" Value="2"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TextBox}">
                <Border Background="{TemplateBinding Background}"
                        CornerRadius="8" x:Name="container"
                        Padding="{TemplateBinding Padding}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <Grid>
                        <ScrollViewer x:Name="PART_ContentHost"
                                        Focusable="false"
                                        HorizontalScrollBarVisibility="Hidden"
                                        VerticalScrollBarVisibility="Hidden"/>

                        <TextBlock Text="{TemplateBinding Tag}" Name="Placeholder"
                                FontSize="11" FontFamily="Poppins"
                                Foreground="Gray"
                                VerticalAlignment="Center"
                                IsHitTestVisible="False"
                                Grid.Column="1" Padding="5" Margin="6,0,0,0">

                            <TextBlock.Style>
                                <Style TargetType="{x:Type TextBlock}">
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding Text, ElementName=SearchBox}" Value="">
                                            <Setter Property="Visibility" Value="Visible"></Setter>
                                        </DataTrigger>
                                    </Style.Triggers>
                                    <Setter Property="Visibility" Value="Hidden"/>
                                </Style>
                            </TextBlock.Style>
                        </TextBlock>
                    </Grid>

                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Background" Value="#E6E6E6" TargetName="container"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>