How to change Border of DateTimeEditBox, Int32EditBox, etc. when it gets focus?

Editors for WPF Forum

Posted 5 years ago by Brad Salmon
Version: 14.1.0602
Avatar

We have many WPF views using DateTimeEditBox, Int32EditBox, etc. part controls. When the user tabs through the controls on the view we want the tab that currenly has focus to show a Green (or some other color) border so the user can clearly identify the control with focus. We have this working for text box, combo box, etc.; but for the "Part Editors" controls it doesn't work.  We are doing this by defining a style like:

 

<Style TargetType="{x:Type local:ABSTextBox}" BasedOn="{StaticResource {x:Type ribbon:TextBox}}">
    <Setter Property="VerticalAlignment" Value="Top" />
    <Setter Property="HorizontalAlignment" Value="Stretch"/> 
    <Style.Triggers>
        <Trigger Property="IsFocused" Value="true">
            <Setter Property="BorderBrush" Value="#FF0DCD6D" />
            <Setter Property="BorderThickness" Value="3" />
        </Trigger>
    </Style.Triggers>
</Style>

 

As I said, this approach is working fine for TextBox and ComboBox; but for the DateTimeEditBox, Int32EditBox, etc. control it doesn't work.  I am guessing the problem is that the foucs is actually on some control contained within the DateTimeEditBox; but I don't know what that is or how I can define a trigger to get our desired behavior.

Any suggestions??

- Brad

Comments (3)

Posted 5 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Hi Brad,

Our editors all use a number of themed brushes.  Instead of doing a style like that for them, you can just redefine the brushes to your choosing in your Application.Resources.  Here's an example showing the chrome element we use and the brushes it uses for various states:

<shared:ElementChrome x:Name="chrome" Background="{TemplateBinding Background}"
		BackgroundDisabled="{DynamicResource {x:Static themes:AssetResourceKeys.EditBackgroundDisabledBrushKey}}"
		BackgroundFocused="{DynamicResource {x:Static themes:AssetResourceKeys.EditBackgroundFocusedBrushKey}}"
		BackgroundHover="{DynamicResource {x:Static themes:AssetResourceKeys.EditBackgroundHoverBrushKey}}"
		BorderBrush="{TemplateBinding BorderBrush}"
		BorderBrushDisabled="{DynamicResource {x:Static themes:AssetResourceKeys.EditBorderDisabledBrushKey}}"
		BorderBrushFocused="{DynamicResource {x:Static themes:AssetResourceKeys.EditBorderFocusedBrushKey}}"
		BorderBrushHover="{DynamicResource {x:Static themes:AssetResourceKeys.EditBorderHoverBrushKey}}"
		BorderThickness="{TemplateBinding BorderThickness}"
		IsAnimationEnabled="{TemplateBinding themes:ThemeProperties.IsAnimationEnabled}"
		BorderStyle="{DynamicResource {x:Static themes:AssetResourceKeys.EditElementChromeBorderStyleKey}}" 
		CornerRadius="{TemplateBinding themes:ThemeProperties.CornerRadius}"
		SnapsToDevicePixels="true">

The default background, border, etc. have "Normal" variants of those brush assets defined too.

For your scenario, this sort of thing would work:

<SolidColorBrush x:Key="{x:Static themes:AssetResourceKeys.EditBorderFocusedBrushKey}" Color="#FF0DCD6D" />


Actipro Software Support

Posted 5 years ago by Brad Salmon
Avatar

Thanks, this does help; but how do I have the border thickness change when the control gets focus? With the change you have suggested the border is changing color, but also would like the border thickness to increase so it is very obvious the control has focus.

Posted 5 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Hi Brad,

Sorry but the only way to change border thickness would be to retemplate the the control with your own customized version.


Actipro Software Support

The latest build of this product (v2018.1 build 0675) was released 10 days ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.