Disable focus on tabstop when RadWatermarkTextBox is readonly

[raj]

Hi There,

when the RadWatermarkTextBox is readonly and then we focus the RadWatermarkTextBox on pressing tab I have to set "FocusedVisual" border to "collapsed"(In the Template), but when user tries focus the text box then the "FocusedVisual" should be enabled. can you please help us.

Here is my style:

<Style x:Key="RadWatermarkTextBoxStyle" TargetType="telerik:RadWatermarkTextBox">
        <Setter Property="CaretBrush" Value="#FF516066"/>
        <Setter Property="Height" Value="24"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="4,0"/>
        <Setter Property="AllowDrop" Value="true"/>
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
        <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
        <Setter Property="Validation.ErrorTemplate" Value="{x:Null}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerik:RadWatermarkTextBox">
                <Grid x:Name="RootElement" Cursor="IBeam">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="#FF0166A1" Storyboard.TargetName="Border"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="DisabledVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="ReadOnly">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="ReadOnlyVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Opacity" To="0" Duration="0" />
                                        <DoubleAnimation Storyboard.TargetName="FocusedVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="ValidationStates">
                                <VisualState x:Name="Valid"/>
                                <VisualState x:Name="InvalidUnfocused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationErrorVisual" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ThicknessAnimation Duration="0" To="1" Storyboard.TargetName="ValidationErrorVisual" Storyboard.TargetProperty="BorderThickness"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="InvalidFocused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationErrorVisual" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ThicknessAnimation Duration="0" To="2" Storyboard.TargetName="ValidationErrorVisual" Storyboard.TargetProperty="BorderThickness"/>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationTooltip" Storyboard.TargetProperty="IsOpen">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <sys:Boolean>True</sys:Boolean>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="WatermarkStates">
                                <VisualState x:Name="WatermarkHidden"/>
                                <VisualState x:Name="WatermarkVisible">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="WatermarkVisual" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>
                                                        Visible
                                                    </Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="WatermarkVisual"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="BaseBorder" Background="#FFFFFFFF" Margin="1"/>
                        <Border x:Name="ReadOnlyVisual" Background="#FFDFE3E6" BorderBrush="#FFA6A6A6" BorderThickness="1" Opacity="0"/>
                        <Border x:Name="Border" BorderThickness="1" BorderBrush="#FF8F8F8F"/>
                        <ScrollViewer x:Name="PART_ContentHost" Padding="{TemplateBinding Padding}" BorderThickness="0" IsTabStop="False"/>
                        <Border x:Name="MouseOverVisual" BorderThickness="2" BorderBrush="Transparent"/>
                        <Border x:Name="FocusedVisual" BorderThickness="2" BorderBrush="#FF0166A1" IsHitTestVisible="False" Opacity="0"/>
                        <Border x:Name="DisabledVisual" Background="#A5F7F7F7" BorderBrush="#A5F7F7F7" BorderThickness="{TemplateBinding BorderThickness}" Opacity="0" IsHitTestVisible="False"/>
                        <Border x:Name="ValidationErrorVisual" BorderThickness="2" BorderBrush="Red" Visibility="Collapsed"/>
                        <ContentControl x:Name="WatermarkVisual" Visibility="Collapsed" Content="{TemplateBinding WatermarkContent}" ContentTemplate="{TemplateBinding WatermarkTemplate}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" Margin="6,0" />
                        <Border Visibility="Collapsed">
                            <ToolTipService.ToolTip>
                                <ToolTip 
x:Name="ValidationTooltip" 
PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}"
Content="{Binding Path=(Validation.Errors),Converter={StaticResource validationErrorConverter}}"/>
                            </ToolTipService.ToolTip>                            
                        </Border>
                       </Grid>
                </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

[Masha]

Hello raj,

You need to change the places of  Border elements in order to achieve the desired approach. ReadOnlyVisual  border should be below FocusedVisual one, this way the Focus border will be not visible when the control is in ReadOnly state. One possible arrangement  demonstrates the code snippet below:

.................
<Border x:Name="BaseBorder" Background="#FFFFFFFF" Margin="1"/>
<Border x:Name="Border" BorderThickness="1" BorderBrush="#FF8F8F8F"/>

<Border x:Name="MouseOverVisual" BorderThickness="2" BorderBrush="Transparent"/>
<Border x:Name="FocusedVisual" BorderThickness="2" BorderBrush="#FF0166A1" IsHitTestVisible="False" Opacity="0"/>
<Border x:Name="ReadOnlyVisual" Background="#FFDFE3E6" BorderBrush="#FFA6A6A6" BorderThickness="1" Opacity="0"/>
<Border x:Name="DisabledVisual" Background="#A5F7F7F7" BorderBrush="#A5F7F7F7" BorderThickness="{TemplateBinding BorderThickness}" Opacity="0" IsHitTestVisible="False"/>

<ScrollViewer x:Name="PART_ContentHost" Padding="{TemplateBinding Padding}" BorderThickness="0" IsTabStop="False"/>
.................

I've attached updated RadWatermarkTextBoxStyle with the changes described above.

Hope it helps.

Regards,
Masha
Telerik

 

 

[raj]

Hi Masha,

Thank you very much for quick reply. I have checked you given XAML, its working in one case that is "FocusedVisual"  border is not visible on using the Tab key. There is another condition we have.

When user tries to select the RadWaterMarkTextBox control using mouse then the "FocusedVisual" should work as use wall, can you please help us?

Thanks again for precious help.

Regards,

Raj. 

[Masha]

Hi Raj,

To achieve the desired result you need to implement some custom logic in code behind. One possible solution is to use PreviewGotKeyboardFocus and LostKeyboardFocus events and change the focused BorderThickness inside these events.

I've demonstrated the above approach in the attached project.

Hope it helps.

Regards,
Masha
Telerik

 

 

[Ravi]

Hi Masha,

Thank you so much for your help, its working. I really appreciate for your help.

Regards,
Raj.