如何在父 class 的自定義用戶控件中設置自定義驗證錯誤模板的屬性

Question

我有一個帶有自定義驗證錯誤模板的自定義用戶控件，它是一個文本塊。 我想做的是能夠從父控件設置這個文本塊的高度、寬度和邊距。 我在網上研究過堆棧溢出，但找不到解決方案。 我指的是用戶控件中的這一行。 我嘗試過綁定和模板綁定，但沒有成功

<TextBlock Name="ErrorBorder"  Width="10" Height="26" Background="Red" Margin="0,0,2,2"> </TextBlock>

有沒有辦法可以在用戶控件中設置這個文本塊的屬性

自定義用戶控件

<UserControl x:Class="LearnValidationWthCustomUserCtrl.LabelTextUC"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:LearnValidationWthCustomUserCtrl"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800"
             x:Name="parent"
             >
    <Grid x:Name="Grid" >
        <StackPanel Orientation="Vertical" x:Name="LayoutRoot" >
            <TextBlock Text="{Binding TopLabelText}" FontSize="20" 
                           ></TextBlock>
            <StackPanel Orientation="Horizontal">
                <TextBlock  Text="{Binding LeftLabelText}" FontSize="20" VerticalAlignment="Center" 
                                Margin="5,0,5,0" Width="{Binding LeftLabelWidth}"
                               ></TextBlock>
                <TextBox Name="MyTextBox" Text="{Binding TextBoxText,ValidatesOnDataErrors=True,UpdateSourceTrigger=PropertyChanged}" 
                         Width="{Binding TextBoxWidth}"  FontSize="20"  VerticalAlignment="Center"
                         BorderBrush="Black" BorderThickness="1" 
                         MaxLength="{Binding MaxLength}" Height="{Binding TextBoxHeight}" Foreground="Green">
                    <TextBox.Style>
                        <Style  TargetType="{x:Type TextBox}">
                            <Style.Triggers>
                                <Trigger Property="Validation.HasError" Value="True">
                                    <Setter Property="Validation.ErrorTemplate">
                                        <Setter.Value>
                                            <ControlTemplate >
                                                <TextBlock Name="ErrorBorder"  Width="10" Height="26" 
                                                               Background="Red" Margin="0,0,2,2" >
                                                </TextBlock>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </TextBox.Style>
                </TextBox>
                <TextBlock Text="{Binding Units}" FontSize="20" Margin="5,0,0,0"></TextBlock>
            </StackPanel>
        </StackPanel>
    </Grid>
</UserControl>

主窗口.xaml

<Window x:Class="LearnValidationWthCustomUserCtrl.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:LearnValidationWthCustomUserCtrl"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock Text="Name" Grid.Row="0"></TextBlock>
        <TextBox Text="{Binding CustomerName, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}"
                 Grid.Row="1" Height="50" Width="50"></TextBox>
        <TextBox Text="{Binding CustomerName, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}"
                 Grid.Row="2" Height="50" Width="50"></TextBox>
        <local:LabelTextUC Grid.Row="3" TextBoxText="{Binding CustomerName,UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" TextBoxWidth="100"
                           MaxLength="5"   ></local:LabelTextUC>
    </Grid>
</Window>

Answer 1

將 TextBlock 放在<AdornedElementPlaceholder>中會將其大小調整為父 TextBox，因此您無需指定寬度和高度：-

<AdornedElementPlaceholder>
    <TextBlock Name="ErrorBorder" Background="Red" />
</AdornedElementPlaceholder>

順便說一句，您不需要觸發器，因為 WPF 會為您解決這個問題，並且僅在綁定屬性錯誤時顯示錯誤模板。

另外，為什么要使用 TextBlock？ 這將在出現錯誤 state 時隱藏該字段，並阻止用戶使用鼠標訪問文本框。 如果您試圖實現紅色背景的效果來指示錯誤，那么我認為這是不可能的，因為“裝飾層”總是繪制在控件的頂部。

錯誤模板在控件周圍繪制紅色邊框更為常見，例如：

<Setter Property="Validation.ErrorTemplate">
    <Setter.Value>
        <ControlTemplate>
            <AdornedElementPlaceholder>
                <Border BorderBrush="Red" BorderThickness="1" />
            </AdornedElementPlaceholder>
        </ControlTemplate>
    </Setter.Value>
</Setter>

Answer 2

您可以使用DependencyProperties公開UserControl的屬性，然后綁定到來自UserControl內部和外部的那些。

DependencyProperty ：

    public static readonly DependencyProperty ErrorBorderHeightProperty
      = DependencyProperty.Register(
      "ErrorBorderHeight", typeof(double), typeof(MyUserControl),
      new FrameworkPropertyMetadata((double)20, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault
          | FrameworkPropertyMetadataOptions.AffectsRender));
    [TypeConverter(typeof(LengthConverter))]
    public double ErrorBorderHeight
    {
        get { return (double)GetValue(ErrorBorderHeightProperty); }
        set { SetValue(ErrorBorderHeightProperty, value); }
    }

在您的UserControl內部：

<TextBlock Name="ErrorBorder"
        Height="{Binding RelativeSource={RelativeSource AncestorType=local:MyUserControl}, Path=ErrorBorderHeight}"/>

在您的UserControl之外：

<local:MyUserControl ErrorBorderHeight="10"/>