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
2395
XamComboEditor and UpperCase
posted

Hi,

 

I have an XamComboBox with .IsEditable=true. How do I force that any character entered would be converted to uppercase? Is there something like a .Mask property?

 

Thanks in advance

  • 2677
    posted

    Hello Dierk,

    The process to get this to work takes a little bit of xaml, but if you put all this xaml in a resource file, it will not be too bad.  The first thing we must do is grab the EditTemplate from the XamComboEditor(I grabbed it directly from the default styles in C:/Program Files/Infragistics) and make a style that targets the XamComboEditor and sets the EditTemplate property to the code we just grabbed from the DefaultStyles. 

    You can see the editTemplate contains a ComboBox.  Now, we must bring in all the ComboBox styles so we can retemplate them.  The combox has a editable template that contains a TextBox.  On this textBox, we can set the CharacterCasing property to upper which will solve our problem.  I put a few things in bold that you should pay close attention to.  The main thing is setting the editTemplate's ComboBox Style to ComboBoxStyle1 and then making sure we set the CharacterCasing property in the ComboBoxEditableTemplate.

    So, there is a CharacterCasing property which makes this real easy.  It just takes a little Xaml to access the textbox that is part of the ComboBox that is part of the EditTemplate of the XamComboEditor.  I have provided my entire Resources section for you to use.  

             <Grid.Resources>
                <Style x:Key="ComboBoxFocusVisual">
                    <Setter Property="Control.Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Rectangle Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" Margin="4,4,21,4" SnapsToDevicePixels="true"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
               
                <LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
                    <GradientStop Color="#F3F3F3" Offset="0"/>
                    <GradientStop Color="#EBEBEB" Offset="0.5"/>
                    <GradientStop Color="#DDDDDD" Offset="0.5"/>
                    <GradientStop Color="#CDCDCD" Offset="1"/>
                </LinearGradientBrush>
               
                <SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070"/>
                <Geometry x:Key="DownArrowGeometry">M 0 0 L 3.5 4 L 7 0 Z</Geometry>
                <Style x:Key="ComboBoxReadonlyToggleButton" TargetType="{x:Type ToggleButton}">
                    <Setter Property="OverridesDefaultStyle" Value="true"/>
                    <Setter Property="IsTabStop" Value="false"/>
                    <Setter Property="Focusable" Value="false"/>
                    <Setter Property="ClickMode" Value="Press"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ToggleButton}">
                                <Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}">
                                    <Grid HorizontalAlignment="Right" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}">
                                        <Path x:Name="Arrow" Fill="Black" HorizontalAlignment="Center" Margin="3,1,0,0" VerticalAlignment="Center" Data="{StaticResource DownArrowGeometry}"/>
                                    </Grid>
                                </Microsoft_Windows_Themes:ButtonChrome>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsChecked" Value="true">
                                        <Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
                                    </Trigger>
                                    <Trigger Property="IsEnabled" Value="false">
                                        <Setter Property="Fill" TargetName="Arrow" Value="#AFAFAF"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
               
                <LinearGradientBrush x:Key="TextBoxBorder" EndPoint="0,20" StartPoint="0,0" MappingMode="Absolute">
                    <GradientStop Color="#ABADB3" Offset="0.05"/>
                    <GradientStop Color="#E2E3EA" Offset="0.07"/>
                    <GradientStop Color="#E3E9EF" Offset="1"/>
                </LinearGradientBrush>
               
                <Style x:Key="ComboBoxEditableTextBox" TargetType="{x:Type TextBox}">
                    <Setter Property="OverridesDefaultStyle" Value="true"/>
                    <Setter Property="AllowDrop" Value="true"/>
                    <Setter Property="MinWidth" Value="0"/>
                    <Setter Property="MinHeight" Value="0"/>
                    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type TextBox}">
                                <ScrollViewer x:Name="PART_ContentHost" Background="Transparent" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
               
                <Style x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
                    <Setter Property="OverridesDefaultStyle" Value="true"/>
                    <Setter Property="IsTabStop" Value="false"/>
                    <Setter Property="Focusable" Value="false"/>
                    <Setter Property="ClickMode" Value="Press"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ToggleButton}">
                                <Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RoundCorners="false">
                                    <Path x:Name="Arrow" Fill="Black" HorizontalAlignment="Center" Margin="0,1,0,0" VerticalAlignment="Center" Data="{StaticResource DownArrowGeometry}"/>
                                </Microsoft_Windows_Themes:ButtonChrome>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsChecked" Value="true">
                                        <Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
                                    </Trigger>
                                    <Trigger Property="IsEnabled" Value="false">
                                        <Setter Property="Fill" TargetName="Arrow" Value="#AFAFAF"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
               
                <ControlTemplate x:Key="ComboBoxEditableTemplate" TargetType="{x:Type ComboBox}">
                    <Grid x:Name="Placement" SnapsToDevicePixels="true">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Popup x:Name="PART_Popup" AllowsTransparency="true" IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Bottom" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Grid.ColumnSpan="2">
                            <Microsoft_Windows_Themes:SystemDropShadowChrome x:Name="Shdw" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=Placement}" Color="Transparent">
                                <Border x:Name="DropDownBorder" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1">
                                    <ScrollViewer>
                                        <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.DirectionalNavigation="Contained"/>
                                    </ScrollViewer>
                                </Border>
                            </Microsoft_Windows_Themes:SystemDropShadowChrome>
                        </Popup>
                        <Microsoft_Windows_Themes:ListBoxChrome x:Name="Border" Grid.ColumnSpan="2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" RenderFocused="{TemplateBinding IsKeyboardFocusWithin}" RenderMouseOver="{TemplateBinding IsMouseOver}"/>
                        <TextBox x:Name="PART_EditableTextBox" Margin="{TemplateBinding Padding}" Style="{StaticResource ComboBoxEditableTextBox}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" IsReadOnly="{Binding IsReadOnly, RelativeSource={RelativeSource TemplatedParent}}" CharacterCasing="Upper"/>
                        <ToggleButton Style="{StaticResource ComboBoxToggleButton}" Grid.Column="1" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsKeyboardFocusWithin" Value="true">
                            <Setter Property="Foreground" Value="Black"/>
                        </Trigger>
                        <Trigger Property="IsDropDownOpen" Value="true">
                            <Setter Property="RenderFocused" TargetName="Border" Value="true"/>
                        </Trigger>
                        <Trigger Property="HasItems" Value="false">
                            <Setter Property="Height" TargetName="DropDownBorder" Value="95"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            <Setter Property="Background" Value="#FFF4F4F4"/>
                        </Trigger>
                        <Trigger Property="IsGrouping" Value="true">
                            <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                        </Trigger>
                        <Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true">
                            <Setter Property="Margin" TargetName="Shdw" Value="0,0,5,5"/>
                            <Setter Property="Color" TargetName="Shdw" Value="#71000000"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
               
                <Style x:Key="ComboBoxStyle1" TargetType="{x:Type ComboBox}">
                    <Setter Property="FocusVisualStyle" Value="{StaticResource ComboBoxFocusVisual}"/>
                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/>
                    <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
                    <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
                    <Setter Property="BorderThickness" Value="1"/>
                    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
                    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
                    <Setter Property="Padding" Value="4,3"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ComboBox}">
                                <Grid x:Name="MainGrid" SnapsToDevicePixels="true">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/>
                                    </Grid.ColumnDefinitions>
                                    <Popup x:Name="PART_Popup" Margin="1" AllowsTransparency="true" IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Bottom" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Grid.ColumnSpan="2">
                                        <Microsoft_Windows_Themes:SystemDropShadowChrome x:Name="Shdw" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=MainGrid}" Color="Transparent">
                                            <Border x:Name="DropDownBorder" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1">
                                                <ScrollViewer CanContentScroll="true">
                                                    <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.DirectionalNavigation="Contained"/>
                                                </ScrollViewer>
                                            </Border>
                                        </Microsoft_Windows_Themes:SystemDropShadowChrome>
                                    </Popup>
                                    <ToggleButton Style="{StaticResource ComboBoxReadonlyToggleButton}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" Grid.ColumnSpan="2" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>
                                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" IsHitTestVisible="false" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Content="{TemplateBinding SelectionBoxItem}" ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"/>
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true">
                                        <Setter Property="Margin" TargetName="Shdw" Value="0,0,5,5"/>
                                        <Setter Property="Color" TargetName="Shdw" Value="#71000000"/>
                                    </Trigger>
                                    <Trigger Property="HasItems" Value="false">
                                        <Setter Property="Height" TargetName="DropDownBorder" Value="95"/>
                                    </Trigger>
                                    <Trigger Property="IsEnabled" Value="false">
                                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                                        <Setter Property="Background" Value="#FFF4F4F4"/>
                                    </Trigger>
                                    <Trigger Property="IsGrouping" Value="true">
                                        <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                    <Style.Triggers>
                        <Trigger Property="IsEditable" Value="true">
                            <Setter Property="BorderBrush" Value="{StaticResource TextBoxBorder}"/>
                            <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
                            <Setter Property="IsTabStop" Value="false"/>
                            <Setter Property="Padding" Value="3"/>
                            <Setter Property="Template" Value="{StaticResource ComboBoxEditableTemplate}"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>

                <Style TargetType="{x:Type igEditors:XamComboEditor}">
                        <Setter Property="EditTemplate">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type igEditors:XamComboEditor}">
                                    <Border
          x:Name="MainBorder"
          Background="{TemplateBinding Background}"
          BorderBrush="{TemplateBinding BorderBrush}"
          BorderThickness="{TemplateBinding BorderThickness}">

                                <ComboBox
           Name="PART_FocusSite"
           Padding="{TemplateBinding Padding}"
           HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
           VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
           IsReadOnly="{TemplateBinding ReadOnly}"
           Background="Transparent"
           BorderBrush="Transparent"
           BorderThickness="0,0,0,0"
           ContextMenu="{TemplateBinding ContextMenu}"
           IsDropDownOpen="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsDropDownOpen, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
           Style="{StaticResource ComboBoxStyle1}"
           IsEditable="{TemplateBinding IsEditable}"
           SelectedValuePath="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ItemsProvider.ValuePath}"
           DisplayMemberPath="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ItemsProvider.DisplayMemberPath}"
           MaxDropDownHeight="{TemplateBinding MaxDropDownHeight}"
           igEditors:XamComboEditor.ComboEditor="{Binding RelativeSource={RelativeSource TemplatedParent}}"/>
                                    </Border>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsInEditMode" Value="True">
                                            <Setter Property="IsTabStop" Value="False" />
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
            </Grid.Resources>

    you will also need :  xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">

    I hope this helps.  Any questions, please let me know.