This project is read-only.

How to use ValidatesOnDataErrors with PasswordBox

Oct 13, 2013 at 5:45 PM
i'm trying to validate a password on PasswordBox,
Image
Validating text on TextBox it's done by doing :
Text="{Binding UserName, Mode=TwoWay, ValidatesOnDataErrors=True}"
but with PasswordBox i can't bind the password, i tried to do the following:
<PasswordBox x:Name="TextPassword" Width="150"
                                 core:PasswordBoxAssistant.BindPassword="true"  
                                 core:PasswordBoxAssistant.BoundPassword="{
                        Binding Path=Password,
                        Mode=TwoWay,
                        UpdateSourceTrigger=PropertyChanged}"
as i found on this page but it doesn't work with ModernUI,
how can i do this please?
Thanks in advance.
Oct 14, 2013 at 10:12 AM
cYounes, I've used this one with sucess:

http://www.wpftutorial.net/PasswordBox.html

Sample:
<PasswordBox x:Uid="PasswordBox_1" MaxLength="16" Width="100" w:PasswordHelper.Attach="True" w:PasswordHelper.Password="{Binding Password1, Mode=TwoWay, ValidatesOnDataErrors=True, UpdateSourceTrigger=PropertyChanged}" />

Anyway, please describe what you mean by "it doesn't work with ModernUI", is to vague.

Regards
Oct 14, 2013 at 7:00 PM
Edited Oct 14, 2013 at 7:01 PM
@saamorim, Thanks for your response, i use exactly the same thing,
i mean by "it doesn't work with ModernUI" that By Validating the DataError in PasswordBox, the small red rectangle doesn't shown next to the passwordBox as it's shown on the right of TextBox ( see the embbeded image). i would know if there is a way to show it.

Image
thanks.
Oct 14, 2013 at 8:07 PM
If you are getting the red border around the PasswordBox, then your validation is working; you simply need to customize its style to include an ErrorTemplate.

Image

Style:
<Style TargetType="{x:Type PasswordBox}">
    <Setter Property="Validation.ErrorTemplate">
        <Setter.Value>
            <ControlTemplate>
                <StackPanel Orientation="Horizontal">
                    <Border BorderThickness="1" BorderBrush="Red" VerticalAlignment="Top">
                        <Grid>
                            <AdornedElementPlaceholder x:Name="adorner" Margin="-1"/>
                        </Grid>
                    </Border>
                    <Border x:Name="errorBorder" Background="Red" Margin="8,0,0,0" CornerRadius="0"
                            IsHitTestVisible="False">
                        <TextBlock Text="{Binding Path=ErrorContent}"
                                Foreground="White" FontFamily="Segoe UI" Margin="8,2,8,3" TextWrapping="Wrap" VerticalAlignment="Center"/>
                    </Border>
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
PasswordBox:
<PasswordBox local:PasswordHelper.Attach="True" MaxLength="8" Width="150" Height="26"
                local:PasswordHelper.Password="{Binding Password, Mode=TwoWay, ValidatesOnDataErrors=True, ValidatesOnExceptions=True}" 
                />
and finally, the IDataErrorInfo snippet:
public string this[string columnName]
{
    get {
        if (columnName.Equals("Password") && (Password == null || Password.Length < 3))
            return "At least 3 characters";
        else
            return "";
    }
}
Marked as answer by cYounes on 10/14/2013 at 12:43 PM
Oct 14, 2013 at 8:24 PM
Edited Oct 14, 2013 at 8:44 PM
@kadolphc
That's great, it is exactly what i want :)
thank you very much :)
Image
Oct 14, 2013 at 10:01 PM
The PasswordBox MUI style is missing the Validation.ErrorTemplate, feel free to create an issue for it.
Nov 3, 2013 at 9:52 AM
Edited Nov 3, 2013 at 9:53 AM
@cYounes
You can validate a password on PasswordBox by, reference to Validation.ErrorTemplate of TextBox in ModernUI, just like kadolphc does.
Here are the codes:
 <Setter Property="Validation.ErrorTemplate">
            <Setter.Value>
                <ControlTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Border BorderThickness="1" BorderBrush="#FFdc000c" VerticalAlignment="Top">
                            <Grid>
                                <AdornedElementPlaceholder x:Name="adorner" Margin="-1"/>
                            </Grid>
                        </Border>
                        <Border x:Name="errorBorder" Background="#FFdc000c" Margin="8,0,0,0"
                                Opacity="0" CornerRadius="0"
                                IsHitTestVisible="False"
                                MinHeight="24" >
                            <TextBlock Text="{Binding ElementName=adorner, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}"
                                       Foreground="White" Margin="8,2,8,3" TextWrapping="Wrap" VerticalAlignment="Center"/>
                        </Border>
                    </StackPanel>
                    <ControlTemplate.Triggers>
                        <DataTrigger Value="True">
                            <DataTrigger.Binding>
                                <Binding ElementName="adorner" Path="AdornedElement.IsKeyboardFocused" />
                            </DataTrigger.Binding>
                            <DataTrigger.EnterActions>
                                <BeginStoryboard x:Name="fadeInStoryboard">
                                    <Storyboard>
                                        <DoubleAnimation Duration="00:00:00.15"
                                                         Storyboard.TargetName="errorBorder"
                                                         Storyboard.TargetProperty="Opacity"
                                                         To="1"/>
                                    </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>
            </Setter.Value>
        </Setter>
Or, you can solve it in this way, the codes:
<PasswordBox> ... </PasswordBox>
<TextBlock  Text="{Binding ElementName=pw, Path=(Validation.Errors)[0].ErrorContent}" >
</TextBlock>
and it aslo use PasswordHelper to add Binding feature to PasswordBox.

Regards