This is a migrated thread and some comments may be shown as answers.

Disable focus on tabstop when RadWatermarkTextBox is readonly

4 Answers 212 Views
WatermarkTextBox
This is a migrated thread and some comments may be shown as answers.
raj
Top achievements
Rank 1
raj asked on 14 Oct 2014, 06:16 AM
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>





4 Answers, 1 is accepted

Sort by
0
Masha
Telerik team
answered on 14 Oct 2014, 06:35 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
raj
Top achievements
Rank 1
answered on 14 Oct 2014, 08:47 AM
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. 

0
Masha
Telerik team
answered on 14 Oct 2014, 01:58 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Ravi
Top achievements
Rank 1
answered on 15 Oct 2014, 02:24 AM
Hi Masha,

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

Regards,
Raj.
Tags
WatermarkTextBox
Asked by
raj
Top achievements
Rank 1
Answers by
Masha
Telerik team
raj
Top achievements
Rank 1
Ravi
Top achievements
Rank 1
Share this question
or