WPF 无法从 UserControl 中删除红色边框

WPF Can't Remove Red Border from UserControl

提问人:George Fabish 提问时间:2/14/2023 最后编辑:George Fabish 更新时间:2/14/2023 访问量:203

问:

我构建了一个简单的登录页面,当检测到无效输入时,会在用户控件周围绘制一个红色边框。image of login view

这是我的布局代码:

<UserControl x:Class="WPFTest.UI.Views.EmptyLayout"
             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:WPFTest.UI.Views"
             xmlns:vm="clr-namespace:WPFTest.UI.ViewModels"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800"
             d:DataContext="{d:DesignInstance Type=vm:EmptyLayoutViewModel}"
             Background="White"
             >
    <Grid Margin="20">
        <Grid.RowDefinitions>
            <RowDefinition Height="50"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0" FontSize="20" FontWeight="Bold">Test Sales Estimator</TextBlock>
    <ContentControl Content="{Binding Layout}" Grid.Row="1">
        <ContentControl.Resources>
                <DataTemplate DataType="{x:Type vm:LoginViewModel}">
                    <local:LoginView/>
                </DataTemplate>
            </ContentControl.Resources>
    </ContentControl>
    </Grid>
</UserControl>

这是登录视图:

<UserControl
             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:WPFTest.UI.Views" xmlns:viewmodels="clr-namespace:WPFTest.UI.ViewModels"
             xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls" x:Class="WPFTest.UI.Views.LoginView"
             mc:Ignorable="d"
             d:DesignHeight="450" d:DesignWidth="800"
             Background="White"
             d:DataContext="{d:DesignInstance Type={x:Type viewmodels:LoginViewModel}}"
             Margin="20 0 0 0"
             Padding="10"
             >   
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="150" />
        </Grid.ColumnDefinitions>

        <StackPanel Grid.Row="2" Margin="0 50 0 0">
            <TextBlock Text="Welcome" FontSize="17" Grid.Row="1" Margin="0 0 0 20" Height="50"/>
            <StackPanel>
                <TextBlock Text="Username" />
                <TextBox Text="{Binding Username}"/>
            </StackPanel>

            <StackPanel Grid.Row="2" Margin="0 10 0 0">
                <TextBlock Text="Password"  />
                <PasswordBox x:Name="Password" PasswordChanged="PasswordBox_PasswordChanged" >
                </PasswordBox>
            </StackPanel>
            <Button
            Grid.Row="2"
            Margin="0 20 0 0"
            Padding="5 2"
            HorizontalAlignment="Left"
            Command="{Binding HandleLoginCommand}"
            IsEnabled="{Binding CanLogin}"
            Content="Login">

            </Button>
        </StackPanel>
    </Grid>
</UserControl>

我尝试使用以下模板覆盖边框:

    <Style TargetType="views:LoginView">
        <Style.Triggers>
            <Trigger Property="Validation.HasError" Value="True">
                <Setter Property="BorderBrush" Value="Blue"/>
                <Setter Property="BorderThickness" Value="1"/>
            </Trigger>
        </Style.Triggers>
    </Style>

但边界仍然是红色的。我还尝试将模板上的目标更改为 UserControl 和 ContentControl 之类的内容。我还尝试在 UserControl 和布局 usercontrol 内的元素上将属性设置为 {x:Null}。Validation.ErrorTemplate

对于 LoginViewModel,我使用 's 作为我的基类,因此它处理验证逻辑,这是我的属性。CommunityToolkit.MvvmObservableValidatorUsername

 private string _username;
        [Required]
        [MinLength(4)]
        public string Username
        {
            get { return _username; }
            set { 
                SetProperty(ref _username, value, true);
                OnPropertyChanged(nameof(HandleLoginCommand));
            }
        }
WPF 验证用户 控件 社区工具包-MVVM

评论


答:

0赞 zaphod-ii 2/14/2023 #1

验证修饰不使用控件的 Border(Thcikness/Brush)。相反,它是在单独的 .若要修改其外观,应为 ErrorTemplate 传递专用模板,如下所示:(示例VisualAdornerLayerTextBox)

<Style TargetType="TextBox">
  <Setter Property="Validation.ErrorTemplate">
    <Setter.Value>
      <ControlTemplate>
        <Grid>
          <Border BorderBrush="Yellow" BorderThickness="3">
            <AdornedElementPlaceholder x:Name="AdornedElementPlaceholder" />
          </Border>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

要实际删除边框,请尝试将 设置为 。Validation.ErrorTemplate{x:Null}

评论

0赞 George Fabish 2/14/2023
将其放在我的 LoginView 中仍然不会删除或更改红色边框。正如我的问题中提到的,我还尝试将 Validation.ErrorTemplate 设置为 null,但这也没有删除边框。UserControl.Style
0赞 zaphod-ii 2/14/2023
我说你提到将 Validation.Error 设置为 null:“......我还尝试将 Validation.Error 属性设置为 {x:Null}...“,因此我决定尝试否定错误本身,而不是其显示的视觉模板。也许你的意思是 Validation.ErrorTemplate,我误解了你。
0赞 George Fabish 2/14/2023
你是对的!我的错误,我会更新。
2赞 Andy 2/14/2023 #2

边框来自 contentcontrol。

在此基础上设置 Validation.ErrorTemplate=“{x:Null}”。

您可以只使用 contentpresenter。

    <ContentPresenter Content="{Binding Layout}"  Grid.Row="1"
                      Validation.ErrorTemplate="{x:Null}">
        <ContentPresenter.Resources>
            <DataTemplate DataType="{x:Type local:LoginViewModel}">
                <local:LoginView/>
            </DataTemplate>
        </ContentPresenter.Resources>
    </ContentPresenter>

我有一个简化的布局来探索这一点,但是当我进行更改时,外部红色边框不会出现。

enter image description here

评论

0赞 George Fabish 2/15/2023
我发誓我试过这个组合,但我想不是!谢谢!另外,我对 WPF 没有太多经验,您是否建议将 ContentPresenter 与 ContentControl 用于我的布局实现?
0赞 Andy 2/15/2023
Contentpresenter 稍微轻一些,您可以在节省几个字节后感到满意。