I have an input that requires a mask and validation. The user must enter only numbers, not letters. And the value has to stay within a specified range. On losing focus, the field is validated and the background of the field turns red on invalid input. I am currently using XamMaskedEditor.
Now I want to customize the look, but find no examples of how to customize the look except for this link:http://ko.infragistics.com/community/cfs-filesystemfile.ashx/__key/CommunityServer.Components.PostAttachments/00.00.22.01.52/EditorsCornerRadius.txt
On the other hand, I find samples of customized looks for XamMaskedInput.Is it easier to customize this control?
My question is this: For my purposes, is it better to use XamMaskedEditor or XamMaskedInput?
Hello,
Thank you for your post. I have been looking into it and I can suggest you use the XamMaskedEditor, because I suppose you use it inside of a XamDataGrid and since the XDG is meant to work with editors, not inputs, all of the built-in functionality will work correctly and as expected if you use Editors. Also the FieldSettings has EditorType and EditorStyle Properties to which you can apply only Editors and if you want to use Inputs you have to retemplate the CellValuePresenter which can cause the XamDataGrid not to work correctly.
Hope this helps you.
I'm actually not using it in a datagrid, but I may at some point.
I have successfully styled the XamMaskedEditor, and now I have two errors that I need an assist on. Here's the error:
Error 1 Ambiguous type reference. A type named 'CardPanel' occurs in at least two namespaces, 'Infragistics.Windows.Controls' and 'Infragistics.Windows.Controls'. Consider adjusting the assembly XmlnsDefinition attributes. C:\Users\CarolG\Documents\Expression\Blend 4\Projects\maskedEditor\maskedEditor\App.xaml 1 1 maskedEditorError 2 Ambiguous type reference. A type named 'SimpleTextBlock' occurs in at least two namespaces, 'Infragistics.Windows.Controls' and 'Infragistics.Windows.Controls'. Consider adjusting the assembly XmlnsDefinition attributes. C:\Users\CarolG\Documents\Expression\Blend 4\Projects\maskedEditor\maskedEditor\App.xaml 1 1 maskedEditor
Here's the App.xaml code:
<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:ig="http://schemas.infragistics.com/xaml" xmlns:igPrim="http://schemas.infragistics.com/xaml/primitives" xmlns:igEditors="http://infragistics.com/Editors" xmlns:igWindows="http://infragistics.com/Windows" xmlns:igDP="http://infragistics.com/DataPresenter" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="maskedEditor.App" StartupUri="MainWindow.xaml"> <Application.Resources> <!-- Resources scoped at the Application level should be defined here. --> <!-- XamMaskedEditor Control Style --> <Style TargetType="{x:Type igEditors:XamMaskedEditor}"> <Setter Property="PromptChar" Value=" " /> <EventSetter Event="GotFocus" Handler="XamMaskedEditor_GotFocus" /> <Setter Property="Template" > <Setter.Value> <ControlTemplate TargetType="{x:Type igEditors:XamMaskedEditor}"> <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" Background="AliceBlue" CornerRadius="5"> <Border x:Name="MainBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" Background="AliceBlue" CornerRadius="5" > <DockPanel> <Grid x:Name="PART_SpinButtons" DockPanel.Dock="Right" Margin="0,1" Visibility="{TemplateBinding SpinButtonVisibilityResolved}"> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="1"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <RepeatButton Focusable="False" IsHitTestVisible="False" Style="{TemplateBinding SpinButtonStyle}"/> <RepeatButton Focusable="False" IsHitTestVisible="False" Grid.Row="2" Style="{TemplateBinding SpinButtonStyle}"/> </Grid> <!-- this displays the current number only, note editable --> <TextBlock x:Name="TextBlock" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Text="{TemplateBinding DisplayText}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> </DockPanel> </Border> </Border> <ControlTemplate.Triggers> <!-- When the border has focus, then it's visibility is collapsed, revealing the EditTemplate--> <Trigger Property="IsFocused" Value="True"> <Setter Property="Visibility" TargetName="MainBorder" Value="Collapsed" /> </Trigger> <Trigger Property="IsEmbedded" Value="False"> <Setter Property="Padding" Value="4,2"/> <Setter Property="igWindows:SimpleTextBlock.OptimizeWidthMeasurement" Value="False"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> <!-- The EditTemplate is visible when the above template is collapsed --> <Setter Property="EditTemplate" > <Setter.Value> <ControlTemplate TargetType="{x:Type igEditors:XamMaskedEditor}"> <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" Background="AliceBlue" CornerRadius="5"> <Border x:Name="MainBorder2" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" Background="LightYellow" CornerRadius="5" > <DockPanel> <Grid x:Name="PART_SpinButtons" DockPanel.Dock="Right" Margin="0,1" Visibility="{TemplateBinding SpinButtonVisibilityResolved}"> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="1"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <RepeatButton Focusable="False" IsHitTestVisible="False" Style="{TemplateBinding SpinButtonStyle}"/> <RepeatButton Focusable="False" IsHitTestVisible="False" Grid.Row="2" Style="{TemplateBinding SpinButtonStyle}"/> </Grid> <!-- [Infragistics] Andrew SmithSuggested by [Infragistics] Vince McDonaldIsFocused is a property defined on the base UIElement class which indicates when the element itself is the logically focused element (i.e. it is the focusedelement of the containing focus scope). When the masked editor enters edit mode, focus is shifted to the SECTIONSLIST within so that is likely the focused element and so the IsFocused of the xamMaskedEditor itself will be false. You could tie this to when keyboard focus is within using the IsKeyboardFocusWithin. The editor also has an IsFocusWithin property, which indicates if logical focus is within the editor, but currently there is an issue where you cannot bind/trigger on that property which should be addressed in a hotfix.--> <igWindows:CardPanel x:Name="PART_FocusSite"> <igEditors:SectionsList x:Name="SectionsList" Margin="{TemplateBinding Padding}" Foreground="{TemplateBinding Foreground}" ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Sections, Mode=OneWay}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" FlowDirection="LeftToRight"/> <igWindows:SimpleTextBlock x:Name="TextBlock2" Visibility="Collapsed" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Text="{TemplateBinding DisplayText}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> </igWindows:CardPanel> </DockPanel> </Border> </Border> <ControlTemplate.Triggers> <Trigger Property="IsEmbedded" Value="False"> <Setter Property="Padding" Value="4,2"/> <Setter Property="igWindows:SimpleTextBlock.OptimizeWidthMeasurement" Value="False"/> </Trigger> <Trigger Property="IsTextBoxEntryEnabled" Value="True"> <Setter TargetName="SectionsList" Property="Visibility" Value="Collapsed" /> <Setter TargetName="TextBlock2" Property="Visibility" Value="Visible" /> <Setter Property="PromptChar" Value=" " /> </Trigger> <Trigger Property="Validation.HasError" Value="True" > <Setter TargetName="MainBorder2" Property="Background" Value="{DynamicResource ErrorBackgroundBrush}" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> <!--<Style.Triggers> <Trigger Property="Validation.HasError" Value="True" > <Setter Property="Border.Background" Value="{DynamicResource ErrorBackgroundBrush}" /> </Trigger> </Style.Triggers>--> </Style> </Application.Resources></Application>
Can you tell me what the errors mean and how to fix it?
Thanks
I am just checking the progress of this issue and was wondering if you managed to achieve your goal or if you need any further assistance on the matter.
I have modified the sample I sent you before, so now it works correctly. Basically I removed a Trigger, which was setting the Visibility to collapsed when the control is focused and not in edit mode, which happens when the Enter is pressed. Please let me know if this helps you or you need further assistance on this matter.
Looking forward for your reply.
The sample works great. The only problem now is that in my custom style the Return/Enter key causes the entire control to disappear. Any ideas? I notice in the non-styled one, the return key is simply not accepted.
I have been looking into your post and I created a sample project for you following your scenario and everything seems to work ok on my side. If the sample doesn’t satisfies all your needs feel free to modify it, so it reproduces your behavior and send it back to me for further investigation.