Disable focus on tabstop when RadWatermarkTextBox is readonly

5 posts, 0 answers
  1. raj
    raj avatar
    31 posts
    Member since:
    Jul 2011

    Posted 14 Oct 2014 Link to this post

    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>





  2. Masha
    Admin
    Masha avatar
    355 posts

    Posted 14 Oct 2014 Link to this post

    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.

     
  3. UI for WPF is Visual Studio 2017 Ready
  4. raj
    raj avatar
    31 posts
    Member since:
    Jul 2011

    Posted 14 Oct 2014 in reply to Masha Link to this post

    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. 

  5. Masha
    Admin
    Masha avatar
    355 posts

    Posted 14 Oct 2014 Link to this post

    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.

     
  6. Ravi
    Ravi avatar
    97 posts
    Member since:
    Jun 2012

    Posted 14 Oct 2014 Link to this post

    Hi Masha,

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

    Regards,
    Raj.
Back to Top
UI for WPF is Visual Studio 2017 Ready