wpf tips- validation - RaggiTech - 15-10-12
كاتب الموضوع : !TheCodeOfSilence
بسم الله الرحمن الرحيم
فى هذا الدرس سنتعرف على كيفية عمل validation ل textBox للتحقق من صحة البيانات التى ادخلها المستخدم قبل تنفيذ عملية ما
اولا نقوم بعمل ال class الخاصة بال validation على هذا النحو
نقوم بعمل class يحتوى على property لعمل binding مع النص داخل textBox
ليكون الكود كالتالي
كود :
class ValidationProperties
{
public string Text
{ get; set; }
}
ثم نقم بعمل class اخر ليحتوي على validation
نقوم بعمل استيراد ل
كود :
using System.Windows.Controls;
ليكون الكود كالتالي
كود :
class makeValidation : ValidationRule
{
public string ErrorMessage
{ get; set; }
public override ValidationResult Validate(object value, System.Globalization.CultureInfo cultureInfo)
{
if (value.ToString().Length <= 0)
{
return new ValidationResult(false, ErrorMessage);
}
else
{
return new ValidationResult(true, null);
}
}
}
ال property الموجودة هى لكتابة رسالة عند وجود خطا فى textBox
ثانيا نقوم بعمل style الخاص ب textbox الذي سيظهر عند ظهور الخطا
فى ملف app.xaml
يجب عمل استيراد لل namespace باستخدام الجملة التالية
كود :
xmlns:c="clr-namespace:validation"
ثم نقوم بعمل style ليكون الكود كالتالي
كود :
<c: ValidationProperties x:Key="MyValidation" />
<Style x:Key="textinError" TargetType="TextBox">
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="ToolTip" Value="{Binding RelativeSource={x:Static RelativeSource.Self},Path=(Validation.Errors)[0].ErrorContent}"/>
</Trigger>
</Style.Triggers>
</Style
فى هذا الكود قمنا بعمل trigger لتحقق اذا كان هناك خطا فيقوم باظهار toolTip ليحتوى على الرسالة الموجودة في الخطا
ثالثا نقوم بربط textBox بالclass التى تم عملها بهذه الطريقة
كود :
<TextBox Height="23" HorizontalAlignment="Left" Margin="6,28,0,0" Name="textBox1" VerticalAlignment="Top" Width="176" Style="{StaticResource textinError}">
<TextBox.Text>
<Binding Path="Text" Source="{StaticResource MyValidation}" UpdateSourceTrigger="PropertyChanged" Mode="OneWayToSource">
<Binding.ValidationRules>
<c:makeValidation ErrorMessage="You must enter text" />
</Binding.ValidationRules>
</Binding>
</TextBox.Text>
</TextBox>
---------------------------------------------------------------------------------
لنفترض مثلا اننا نريد تغيير هذا اللون الاحمر واستبدالة بلون اسود مع وجود علامة * بجانب ال textBox للدلالة على وجود خطا فى هذا النص هنا يجب ان نستخدم ErrorTemplate
فى ملف app.xaml نقوم بعمل ال template كالتالي
كود :
<ControlTemplate x:Key="MyVlaidationTemplate">
<StackPanel Orientation="Horizontal">
<Border BorderBrush="Black" BorderThickness="3" CornerRadius="5">
<AdornedElementPlaceholder/>
</Border>
<TextBlock Text="*" Foreground="red" FontSize="20" />
</StackPanel>
</ControlTemplate>
ثم نقوم بربط ال textBox كالتالي
كود :
<TextBox Height="23" HorizontalAlignment="Left" Margin="6,28,0,0" Name="textBox2" VerticalAlignment="Top" Width="231" Validation.ErrorTemplate="{StaticResource MyVlaidationTemplate}" Style="{StaticResource textinError}">
<TextBox.Text>
<Binding Path="Text" Source="{StaticResource MyValidation}" UpdateSourceTrigger="PropertyChanged" Mode="OneWayToSource">
<Binding.ValidationRules>
<ExceptionValidationRule />
<c:makeValidation ErrorMessage="Not valid" />
</Binding.ValidationRules>
</Binding>
</TextBox.Text>
</TextBox>
-------------------------------------------------------------
سوف نذهب بعيدا اكثر الان
ما نريد عمله الان هو ربط خاصية IsEnabled الموجودة داخل Button بحالة ال textBox بحيث اذا كان هناك خطا فان هذه الخاصية تساوي false
هذه المرة تنستخدم عدد 2 textBox للتحقق من صحتهم
اولا في ملف app.xaml
كود :
<Style TargetType="{x:Type Button}" x:Key="ValidChange">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=textBox3,Path=(Validation.HasError)}" Value="true">
<Setter Property="IsEnabled" Value="False" />
</DataTrigger>
</Style.Triggers>
</Style>
فى نفس ملف ال form نقوم بعمل window.Resourcesليحتوي على الشروط ليكون كالتالي
كود :
<Window.Resources >
<Style TargetType="{x:Type Button}" x:Key="ValidChange">
<Setter Property="IsEnabled" Value="False" />
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding ElementName=textBox3,Path=(Validation.HasError)}" Value="false"/>
<Condition Binding="{Binding ElementName=textBox4,Path=(Validation.HasError)}" Value="false"/>
</MultiDataTrigger.Conditions>
<Setter Property="IsEnabled" Value="True" />
</MultiDataTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
في البداية نقوم نساوي قيمة الخاصية false ثم نقوم بعمل شروط للتحقق من صحة المدخلات داخل textBox يمكن كتابة اي عدد من الشروط
ثم نقوم بربط ال button كالتالي
كود :
<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="56,105,0,0" Name="button1" VerticalAlignment="Top" Width="75" Style="{StaticResource ValidChange}" />
--------------------------------------------------------
ماذا لو اردنا ان نجعل ال textBox به خطا من خلال الكود
كود :
ValidationError VE = new ValidationError(new ExceptionValidationRule(), textBox5.GetBindingExpression(TextBox.TextProperty));
VE.ErrorContent = "Error Message";
Validation.MarkInvalid(textBox5.GetBindingExpression(TextBox.TextProperty), VE);
ولازاله الخطا من خلال الكود
كود :
Validation.ClearInvalid(textBox5.GetBindingExpression(TextBox.TextProperty));
للتحقق من وجود خطا داخل textBox او لا فانه يمكن استخدام الكود التالي
كود :
if (textBox5.GetBindingExpression(TextBox.TextProperty).HasError == true)
MessageBox.Show("Error");
else
MessageBox.Show("OK");
يوجد فى المرفقات مشروع يحتوي على هذه الاكواد
|