Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
615
Customize look: XamMaskedEditor vs. XamMaskedInput
posted

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://es.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?

  • 138253
    Offline posted

    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.

    • 615
      posted in reply to Stefan

      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    maskedEditor
      Error    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 Smith
      Suggested by [Infragistics] Vince McDonald
      IsFocused 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

      • 138253
        Offline posted in reply to cgreenberg

        Hello,

         

        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. 

        • 138253
          Offline posted in reply to cgreenberg

          Hello,

          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.

          WpfApplication1_1.zip
          • 615
            posted in reply to Stefan

            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.

            • 138253
              Offline posted in reply to cgreenberg

              Hello,

               

              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.

               

              Looking forward for your reply.

              WpfApplication1.zip