منتدى فيجوال بيسك لكل العرب | منتدى المبرمجين العرب
wpf tips- validation - نسخة قابلة للطباعة

+- منتدى فيجوال بيسك لكل العرب | منتدى المبرمجين العرب (http://vb4arb.com/vb)
+-- قسم : قسم لغات البرمجة الاخرى (http://vb4arb.com/vb/forumdisplay.php?fid=4)
+--- قسم : قسم البرمجة بتقنية WPF (http://vb4arb.com/vb/forumdisplay.php?fid=86)
+--- الموضوع : wpf tips- validation (/showthread.php?tid=5728)



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");
يوجد فى المرفقات مشروع يحتوي على هذه الاكواد