验证错误样式在WPF中，类似的Silverlight [英] Validation Error Style in WPF, similar to Silverlight

查看：223
本文介绍了验证错误样式在WPF中，类似的Silverlight的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

默认情况下， Validation.ErrorTemplate 在 WPF 只是一个小的红色边框没有任何工具提示。

在 Silverlight 4中，是很好的风格验证错误外的开箱。

下面是一个验证错误发生的文化在Silverlight 4和WPF的比较

Silverlight 4中结果
结果
WPF 结果

注意的WPF版本真的很平淡，无聊的样子相比，在Silverlight的，在我看来，伟大的外观。

请问在WPF框架存在或已创建任何风格的精美模板验证像的Silverlight 以上版本的任何类似的验证方式/模板？或将我必须从头开始创建它们？

如果有人想尝试一下，上面的验证错误可以用下面的code抄录，同时适用于的Silverlight 和 WPF

的主窗口/ MainPage.xaml中的

 ＆LT; StackPanel的方向=横向保证金=10VerticalAlignment =评出的＆GT;
    ＆LT;文本框的文本={绑定路径= TextProperty，模式=双向，ValidatesOnExceptions = TRUE}/＆GT;
    ＆LT;按钮内容=选项卡要我......保证金=20,0,0,0/＆GT;
＆LT; / StackPanel的＆GT;

的主窗口/ MainPage.xaml.cs中的

 公共主窗口/的MainPage（）
{
    的InitializeComponent（）;
    this.DataContext =这一点;
}私人字符串_textProperty;
公共字符串TextProperty
{
    {返回_textProperty; }
    组
    {
        如果（value.Length→5）
        {
            抛出新的异常（太多字符）;
        }
        _textProperty =价值;
    }
}


解决方案

我研究了的Silverlight 验证错误模板的版本，并创造了它的 WPF 版本看起来像这样

结果
的添加一个GIF动画在文章底部，但我完成它，我注意到，这可能是因为它的移动鼠标是恼人。让我知道我是否应该删除它..：）的

我用 MultiBinding 与 BooleanOrConverter 来显示提示错误当文本框具有键盘焦点或鼠标移动到右上角。对于淡出的动画我用了一个 DoubleAnimation是的透明度和 ThicknessAnimation 与 BackEase / EaseOut 的easingFunction 为保证金

可用这样的

 ＆LT;文本框Validation.ErrorTemplate ={StaticResource的errorTemplateSilverlightStyle}/＆GT;

的 errorTemplateSilverlightStyle 的

 ＆LT;控件模板X：键=errorTemplateSilverlightStyle＆GT;
    ＆LT; StackPanel的方向=横向＆GT;
        ＆所述;边界了borderThickness =1BorderBrush =＃FFdc000cCornerRadius =0.7
                VerticalAlignment =评出的＆GT;
            ＆LT;网格和GT;
                ＆LT;多边形X：NAME =toolTipCorner
                         Grid.ZIndex =2
                         保证金= -  1
                         点数=6,6 6,0 0,0
                         填写=＃FFdc000c
                         的Horizo​​ntalAlignment =右
                         VerticalAlignment =顶部
                         IsHitTestVisible =真/＆GT;
                ＆所述;折线Grid.ZIndex =3
                          点数=7,7 0,0保证金= -  1的Horizo​​ntalAlignment =右
                          StrokeThickness =1.5
                          StrokeEndLineCap =圆
                          StrokeStartLineCap =圆
                          行程=白
                          VerticalAlignment =顶部
                          IsHitTestVisible =真/＆GT;
                ＆LT; AdornedElementPlaceholder X：NAME =装饰器/＆GT;
            ＆LT; /网格和GT;
        ＆LT; /边框＆GT;
        ＆LT; BORDER X：NAME =errorBorder背景=＃FFdc000c保证金=1,0,0,0
                透明度=0CornerRadius =1.5
                IsHitTestVisible =假
                了minHeight =24了maxWidth =267＆GT;
            ＆LT; Border.Effect＆GT;
                ＆LT; D​​ropShadowEffect ShadowDepth =2.25
                                  颜色=黑
                                  不透明度=0.4
                                  方向=315
                                  BlurRadius =4/＆GT;
            ＆LT; /Border.Effect>
            ＆LT; TextBlock的文本={绑定的ElementName =装饰器，
                                      路径= AdornedElement（Validation.Errors）[0] .ErrorContent}
                       前景色=白保证金=8,3,8,3TextWrapping =自动换行/＆GT;
        ＆LT; /边框＆GT;
    ＆LT; / StackPanel的＆GT;
    ＆LT; ControlTemplate.Triggers＆GT;
        ＆LT; D​​ataTrigger值=真＆GT;
            ＆LT; D​​ataTrigger.Binding＆GT;
                ＆LT; MultiBinding转换器={StaticResource的BooleanOrConverter}＆GT;
                    ＆LT;绑定的ElementName =装饰器PATH =AdornedElement.IsKeyboardFocused/＆GT;
                    ＆LT;绑定的ElementName =toolTipCornerPATH =IsMouseOver/＆GT;
                ＆LT; / MultiBinding＆GT;
            ＆LT; /DataTrigger.Binding>
            ＆LT; D​​ataTrigger.EnterActions＆GT;
                ＆LT; BeginStoryboard X：NAME =fadeInStoryboard＆GT;
                    ＆LT;情节提要＆GT;
                        其中p DoubleAnimation是播放时间=00：00：00.15
                                         Storyboard.TargetName =errorBorder
                                         Storyboard.TargetProperty =透明度
                                         向=1/＆GT;
                        其中p ThicknessAnimation持续时间=00：00：00.15
                                            Storyboard.TargetName =errorBorder
                                            Storyboard.TargetProperty =保证金
                                            FillBehavior =HoldEnd
                                            从=1,0,0,0
                                            为了=5,0,0,0＆GT;
                            ＆LT; ThicknessAnimation.EasingFunction＆GT;
                                ＆所述; BackEase EasingMode =EaseOut振幅=2/＆GT;
                            ＆LT; /ThicknessAnimation.EasingFunction>
                        ＆LT; / ThicknessAnimation＆GT;
                    ＆LT; /故事板＆GT;
                ＆LT; / BeginStoryboard＆GT;
            ＆LT; /DataTrigger.EnterActions>
            ＆LT; D​​ataTrigger.ExitActions＆GT;
                ＆LT; StopStoryboard BeginStoryboardName =fadeInStoryboard/＆GT;
                ＆LT; BeginStoryboard X：NAME =fadeOutStoryBoard＆GT;
                    ＆LT;情节提要＆GT;
                        ＆LT; D​​oubleAnimation是持续时间=00:00:00
                                         Storyboard.TargetName =errorBorder
                                         Storyboard.TargetProperty =透明度
                                         为=0/＆GT;
                    ＆LT; /故事板＆GT;
                ＆LT; / BeginStoryboard＆GT;
            ＆LT; /DataTrigger.ExitActions>
        ＆LT; / DataTrigger＆GT;
    ＆LT; /ControlTemplate.Triggers>
＆LT; /控件模板＆GT;

的 BooleanOrConverter 的

 公共类BooleanOrConverter：IMultiValueConverter
{
    公共对象转换（对象[]值类型TARGETTYPE，对象参数，System.Globalization.CultureInfo文化）
    {
        的foreach（中值对象的值）
        {
            如果（（布尔）值==真）
            {
                返回true;
            }
        }
        返回false;
    }
    公用对象[] ConvertBack（对象的值，类型[] targetTypes，对象参数，System.Globalization.CultureInfo文化）
    {
        抛出新NotSupportedException异常（）;
    }
}

By default, the Validation.ErrorTemplate in WPF is just a small red border without any ToolTip.

In Silverlight 4, the validation error is nicely styled out-of-the-box.

Here is a comparison of a validation error occuring in Silverlight 4 and WPF

Silverlight 4

WPF

Notice the really flat, boring look of the WPF version compared to the, in my opinion, great look in Silverlight.

Does any similar validation styles/templates exist in the WPF Framework or has anybody created nicely styled validation templates like the Silverlight version above? Or will I have to create them from scratch?

If anybody wants to try it out, the validation error above can be reproduces with the following code, works for both Silverlight and WPF

MainWindow/MainPage.xaml

<StackPanel Orientation="Horizontal" Margin="10" VerticalAlignment="Top">
    <TextBox Text="{Binding Path=TextProperty, Mode=TwoWay, ValidatesOnExceptions=True}"/>
    <Button Content="Tab To Me..." Margin="20,0,0,0"/>
</StackPanel>

MainWindow/MainPage.xaml.cs

public MainWindow/MainPage()
{
    InitializeComponent();
    this.DataContext = this;
}

private string _textProperty;
public string TextProperty
{
    get { return _textProperty; }
    set
    {
        if (value.Length > 5)
        {
            throw new Exception("Too many characters");
        }
        _textProperty = value;
    }
}

解决方案

I studied the Silverlight version of the Validation Error Template and created a WPF version of it which looks like this


Added an animated GIF at the bottom of the post but after I finished it I noticed that it might be annoying because of the moving mouse in it. Let me know if I should remove it.. :)

I used a MultiBinding with a BooleanOrConverter to show the "tooltip-error" when the TextBox has Keyboard focus or the Mouse is over the upper right corner. For the fade-in animation I used a DoubleAnimation for the Opacity and a ThicknessAnimation with a BackEase/EaseOut EasingFunction for the Margin

Useable like this

<TextBox Validation.ErrorTemplate="{StaticResource errorTemplateSilverlightStyle}" />

errorTemplateSilverlightStyle

<ControlTemplate x:Key="errorTemplateSilverlightStyle">
    <StackPanel Orientation="Horizontal">
        <Border BorderThickness="1" BorderBrush="#FFdc000c" CornerRadius="0.7"
                VerticalAlignment="Top">
            <Grid>
                <Polygon x:Name="toolTipCorner"
                         Grid.ZIndex="2"
                         Margin="-1"
                         Points="6,6 6,0 0,0" 
                         Fill="#FFdc000c" 
                         HorizontalAlignment="Right" 
                         VerticalAlignment="Top"
                         IsHitTestVisible="True"/>
                <Polyline Grid.ZIndex="3"
                          Points="7,7 0,0" Margin="-1" HorizontalAlignment="Right" 
                          StrokeThickness="1.5"
                          StrokeEndLineCap="Round"
                          StrokeStartLineCap="Round"
                          Stroke="White"
                          VerticalAlignment="Top"
                          IsHitTestVisible="True"/>
                <AdornedElementPlaceholder x:Name="adorner"/>
            </Grid>
        </Border>
        <Border x:Name="errorBorder" Background="#FFdc000c" Margin="1,0,0,0"
                Opacity="0" CornerRadius="1.5"
                IsHitTestVisible="False"
                MinHeight="24" MaxWidth="267">
            <Border.Effect>
                <DropShadowEffect ShadowDepth="2.25" 
                                  Color="Black" 
                                  Opacity="0.4"
                                  Direction="315"
                                  BlurRadius="4"/>
            </Border.Effect>
            <TextBlock Text="{Binding ElementName=adorner,
                                      Path=AdornedElement.(Validation.Errors)[0].ErrorContent}"
                       Foreground="White" Margin="8,3,8,3" TextWrapping="Wrap"/>
        </Border>
    </StackPanel>
    <ControlTemplate.Triggers>
        <DataTrigger Value="True">
            <DataTrigger.Binding>
                <MultiBinding Converter="{StaticResource BooleanOrConverter}">
                    <Binding ElementName="adorner" Path="AdornedElement.IsKeyboardFocused" />
                    <Binding ElementName="toolTipCorner" Path="IsMouseOver"/>
                </MultiBinding>
            </DataTrigger.Binding>
            <DataTrigger.EnterActions>
                <BeginStoryboard x:Name="fadeInStoryboard">
                    <Storyboard>
                        <DoubleAnimation Duration="00:00:00.15"
                                         Storyboard.TargetName="errorBorder"
                                         Storyboard.TargetProperty="Opacity"
                                         To="1"/>
                        <ThicknessAnimation Duration="00:00:00.15"
                                            Storyboard.TargetName="errorBorder"
                                            Storyboard.TargetProperty="Margin"
                                            FillBehavior="HoldEnd"
                                            From="1,0,0,0"
                                            To="5,0,0,0">
                            <ThicknessAnimation.EasingFunction>
                                <BackEase EasingMode="EaseOut" Amplitude="2"/>
                            </ThicknessAnimation.EasingFunction>
                        </ThicknessAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.EnterActions>
            <DataTrigger.ExitActions>
                <StopStoryboard BeginStoryboardName="fadeInStoryboard"/>
                <BeginStoryboard x:Name="fadeOutStoryBoard">
                    <Storyboard>
                        <DoubleAnimation Duration="00:00:00"
                                         Storyboard.TargetName="errorBorder"
                                         Storyboard.TargetProperty="Opacity"
                                         To="0"/>
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.ExitActions>
        </DataTrigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

BooleanOrConverter

public class BooleanOrConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        foreach (object value in values)
        {
            if ((bool)value == true)
            {
                return true;
            }
        }
        return false;
    }
    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotSupportedException();
    }
}

这篇关于验证错误样式在WPF中，类似的Silverlight的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆