0
Я создал пользовательский элемент управления, который состоит из Telerik RadMaskedInput и метки. Пользовательский элемент управления представляет собой ввод с плавающей меткой, как это видно здесь: http://css-tricks.com/float-labels-css/ Проблема, с которой я столкнулась, заключается в том, что когда элемент управления проверяется, весь элемент управления получает красную рамку проверки. Мне нужно, чтобы рамка RadMaskedInput была красной. Я видел несколько других сообщений и запросы на помощь по той же проблеме, но я не могу заставить ничего работать для меня. XAML моего управления выглядит следующим образом: шаблон управленияКак передать проверку дочернему элементу управления пользователя
<Grid>
<Label x:Name="controlLabel"
VerticalAlignment="Bottom"
Padding="5,0,5,0"
HorizontalAlignment="Left"
Background="White"
Grid.Row="0"
Margin="10,0,0,0"
Panel.ZIndex="1"
IsHitTestVisible="False"
Template="{DynamicResource LabelControlTemplate1}"
Content="{Binding ElementName=floatingLabelTextBox, Path=LabelContent}"
FontFamily="{Binding ElementName=floatingLabelTextBox, Path=LabelFontFamily}"
FontSize="{Binding ElementName=floatingLabelTextBox, Path=LabelFontSize}"
Foreground="{DynamicResource FloatingLabelTextBox.Label.Foreground}"/>
<telerik:RadMaskedTextInput x:Name="controlMaskedTextBox"
Mask=""
TextMode="PlainText"
FontWeight="Normal"
BorderBrush="{DynamicResource FloatingLabelTextBox.BorderBrush}"
BorderThickness="1"
SelectionOnFocus="SelectAll"
IsClearButtonVisible="False"
VerticalAlignment="Bottom"
HorizontalAlignment="Left"
HorizontalContentAlignment="Right"
VerticalContentAlignment="Center"
Value="{Binding TextBoxText,
Mode=TwoWay,
UpdateSourceTrigger=LostFocus,
ValidatesOnDataErrors=True,
ValidatesOnExceptions=True,
NotifyOnValidationError=True}"
GotFocus="TextBox_GotFocus"
LostFocus="TextBox_LostFocus"
Template="{DynamicResource RadMaskedTextInputControlTemplate1}"/>
</Grid>
В RadMaskedTextInput выглядит следующим образом:
<ControlTemplate x:Key="RadMaskedTextInputControlTemplate1" TargetType="{x:Type telerik:RadMaskedTextInput}">
<Grid SnapsToDevicePixels="True" UseLayoutRounding="True">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ClearButton"/>
</Storyboard>
</VisualState>
<VisualState x:Name="ReadOnly">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="GridContainer">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#5EC9C9C9"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<!--<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledVisual">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>-->
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DisplayText">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#FF8D8D8D"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Content">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#FF8D8D8D"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisplayTextContent">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<!--<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusedVisual">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>-->
</Storyboard>
</VisualState>
<VisualState x:Name="NotFocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisplayTextContent">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="EditorSite">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="Transparent"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ContentStates">
<VisualState x:Name="NotEmpty"/>
<VisualState x:Name="Empty">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisplayTextContent"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EmptyContent">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="3" SnapsToDevicePixels="True">
<Grid x:Name="GridContainer">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<MaskedInput:PreviewInputTextBox x:Name="EditorSite" AcceptsReturn="{TemplateBinding AcceptsReturn}" Cursor="{TemplateBinding Cursor}" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" Height="{TemplateBinding Height}" IsReadOnly="{TemplateBinding IsReadOnly}" IsEnabled="{TemplateBinding IsEnabled}" MaskedInputControl="{x:Null}" Padding="{TemplateBinding Padding}" Style="{TemplateBinding TextBoxStyle}" TabIndex="{TemplateBinding TabIndex}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
<MaskedInput:PreviewInputTextBox.TextAlignment>
<Binding Path="HorizontalContentAlignment" RelativeSource="{RelativeSource TemplatedParent}">
<Binding.Converter>
<MaskedInput:HorizontalContentAlignmentToTextAlignmentConverter/>
</Binding.Converter>
</Binding>
</MaskedInput:PreviewInputTextBox.TextAlignment>
</MaskedInput:PreviewInputTextBox>
<Border x:Name="DisplayTextContent" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" IsHitTestVisible="False" Visibility="Collapsed">
<MaskedInput:PreviewInputTextBox x:Name="DisplayText" Cursor="{TemplateBinding Cursor}" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Height="{TemplateBinding Height}" IsTabStop="False" IsReadOnly="{TemplateBinding IsReadOnly}" IsEnabled="{TemplateBinding IsEnabled}" MaskedInputControl="{x:Null}" Padding="{TemplateBinding Padding}" Style="{TemplateBinding TextBoxStyle}" Text="{Binding Text, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
<MaskedInput:PreviewInputTextBox.TextAlignment>
<Binding Path="HorizontalContentAlignment" RelativeSource="{RelativeSource TemplatedParent}">
<Binding.Converter>
<MaskedInput:HorizontalContentAlignmentToTextAlignmentConverter/>
</Binding.Converter>
</Binding>
</MaskedInput:PreviewInputTextBox.TextAlignment>
</MaskedInput:PreviewInputTextBox>
</Border>
<Border x:Name="EmptyContent" IsHitTestVisible="False" Padding="5,0,0,0" Visibility="Collapsed">
<ContentControl x:Name="Content" ContentTemplate="{TemplateBinding EmptyContentTemplate}" Content="{TemplateBinding EmptyContent}" Foreground="{TemplateBinding Foreground}" FontStyle="Italic" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="False" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<telerik:RadButton x:Name="ClearButton" Grid.Column="1" Command="{TemplateBinding ClearCommand}" IsTabStop="False" InnerCornerRadius="3" Opacity="0" Style="{TemplateBinding ClearButtonStyle}">
<telerik:RadButton.Visibility>
<Binding Path="IsClearButtonVisible" RelativeSource="{RelativeSource TemplatedParent}">
<Binding.Converter>
<telerik:BooleanToVisibilityConverter/>
</Binding.Converter>
</Binding>
</telerik:RadButton.Visibility>
</telerik:RadButton>
</Grid>
</Border>
<!--<Border x:Name="FocusedVisual" BorderBrush="#FFFFC92B" BorderThickness="1" Background="{x:Null}" CornerRadius="5" Visibility="Collapsed"/>
<Border x:Name="DisabledVisual" BorderBrush="#FFD9D9D9" BorderThickness="1" CornerRadius="3" Visibility="Collapsed"/>-->
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
<Setter TargetName="Border" Property="BorderBrush" Value="#FFD9D9D9"/>
</Trigger>
<Trigger Property="Validation.HasError" Value="true">
<Setter TargetName="Border" Property="BorderBrush" Value="Red"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Свойство зависимостей и др обратный вызов в коде позади:
public String TextBoxText
{
get
{
return (String)GetValue(TextBoxTextProperty);
}
set
{
SetValue(TextBoxTextProperty, value);
}
}
// Using a DependencyProperty as the backing store for TextBoxText. This enables animation, styling, binding, etc...
public static readonly DependencyProperty TextBoxTextProperty =
DependencyProperty.Register("TextBoxText", typeof(String), typeof(FloatingLabelTextBox), new PropertyMetadata() { PropertyChangedCallback = UpdateTextBoxText });
private static void UpdateTextBoxText(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
FloatingLabelTextBox control = d as FloatingLabelTextBox;
if (control != null && e.NewValue != null)
{
if (!string.IsNullOrWhiteSpace(e.NewValue as string))
{
control.FloatLabel();
}
else
{
control.DockLabel();
}
}
}
И, наконец, мой код для вызова/использования элемента управления:
<controls:FloatingLabelTextBox LabelContent="Batch #"
TextBoxText="{Binding BatchNumber.StringValue,
Mode=TwoWay,
UpdateSourceTrigger=LostFocus,
ValidatesOnDataErrors=True,
ValidatesOnExceptions=True,
NotifyOnValidationError=True,
Converter={StaticResource stringToInt}}"
Validation.ErrorTemplate="{x:Null}"
LabelForeground="{DynamicResource FloatingLabelTextBox.Label.Foreground}"
LabelFontSize="12"
TextBoxWidth="150"
TextBoxHeight="30"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Grid.Row="1"
IsEnabled="{Binding BatchNumber.IsReadOnly, Mode=OneWay, Converter={StaticResource inverseBool}}" />
Обратите внимание, что я использую шаблон MVVM. Я смоделировал свой код отсюда: Validation Error Templates For UserControl, но я не вижу ожидаемых результатов. Я не вижу никакой границы проверки.
Я слишком долго занимался этой проблемой. Любая помощь/предложения были бы весьма признательны.
Вы посмотрели сайт 'Telerik', у них есть неплохие документированные примеры – MethodMan
Да, у меня есть MethodMan. Я думаю, что это за пределами Телерика. Я имею в виду, что я заменил элемент управления Telerik простым текстовым полем и имел ту же проблему. Другими словами, ребенок, являющийся элементом управления Telerik, который я хочу проверить, является спорным вопросом. Спасибо за ваше предложение. – flyNflip
Чтобы убедиться, что внутри шаблона управления Telerik не было ничего, влияющего на изменение цвета границы, я изменил цвет рамки на красный в другом (IsEnabled = false) триггере, и он отлично изменился. Просто не изменяйте с ошибками проверки. – flyNflip