資料準備

繼承自INotifyPropertyChanged

public class TelePhone : INotifyPropertyChanged
    {
        private string m_telNum;

        public string TelNum
        {
            get
            {
                return m_telNum;
            }

            set
            {
                m_telNum = value;
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
    }
 

ValidationRule

定義一個類繼承自ValidationRule，其中用正則表示式來判斷一個字串是否為一個手機號碼。

public class DemoValidationRule : ValidationRule
    {
        public override ValidationResult Validate(object value, CultureInfo cultureInfo)
        {
            if (value == null || string.IsNullOrEmpty(value.ToString().Trim()))
            {
                return new ValidationResult(false, "格式錯誤");
            }

            bool bIsTelNum = Regex.IsMatch(value.ToString().Trim(), @"^[1]([3][0-9]{1}|59|58|88|89)[0-9]{8}$");
            if (!bIsTelNum)
            {
                return new ValidationResult(false, "格式錯誤");
            }
            return new ValidationResult(true, null);
        }
    }
 

前臺繫結

  <TextBox x:Name="textBox" HorizontalAlignment="Left"  DataContext="{StaticResource TelPhone}"
                 Height="23" Margin="33,34,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120">
            <TextBox.Text>
                <Binding Path="TelNum" UpdateSourceTrigger="PropertyChanged">
                    <Binding.ValidationRules>
                        <local:DemoValidationRule/>
                    </Binding.ValidationRules>
                </Binding>
            </TextBox.Text>
        </TextBox>
 

 用DateContext進行繫結。

資料模板與Style

  <ControlTemplate x:Key="ErrorTemplate">
            <DockPanel LastChildFill="true">
                <Border Background="Red" DockPanel.Dock="right" Margin="5,0,0,0" Width="20" Height="20" CornerRadius="10"
                            ToolTip="{Binding ElementName=demoAdorner, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}">
                    <TextBlock Text="!" VerticalAlignment="center" HorizontalAlignment="center" FontWeight="Bold" Foreground="white">
                    </TextBlock>
                </Border>
                <AdornedElementPlaceholder Name="demoAdorner" VerticalAlignment="Center" >
                    <Border BorderBrush="red" BorderThickness="1" />
                </AdornedElementPlaceholder>
            </DockPanel>
        </ControlTemplate>
        <Style TargetType="TextBox">
            <Setter Property="Validation.ErrorTemplate" Value="{StaticResource ErrorTemplate}">
            </Setter>
            <Style.Triggers>
                <Trigger Property="Validation.HasError" Value="True">
                    <Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors)[0].ErrorContent}"/>
                </Trigger>
            </Style.Triggers>
        </Style>

在文字框後面加一個border巢狀textblock設定字型顏色等。

style指向TextBox。

結果展示

當輸入一個手機號時候沒變化，當text內容不符合手機號規範時style改變，並且會有文字提示“格式錯誤”。