Cannot focus textbox with mouse using custom style

4 posts, 0 answers
  1. Wouter
    Wouter avatar
    24 posts
    Member since:
    Jul 2013

    Posted 05 May 2014 Link to this post

    I have a custom style for RadNumericUpDown as listed below. Using the default style you can click the textbox when something else has focus and the focus will transfer to the textbox. However with my custom style this does not work. The textbox does get focus when you click either of the RepeatButtons. I tried setting Focusable to true, but that does not work..

    <Style TargetType="{x:Type telerik:RadNumericUpDown}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Grid Height="36">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="36"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="36"/>
                        </Grid.ColumnDefinitions>
                             
                        <!--1. Textbox control for text input-->
                        <TextBox x:Name="textbox" Grid.Column="1" HorizontalAlignment="Stretch" />
                        <!--2. Button control for increasing the value-->
                        <RepeatButton x:Name="increase" Style="{StaticResource BaseButtonStyle}" Grid.Column="2">
                            <Viewbox>
                                <Grid Width="20" Height="20">
                                    <Path Stroke="Black" Data="M0,5 H10 M5,5 V10Z" StrokeThickness="2" Height="10" Width="10" UseLayoutRounding="True" />
                                </Grid>
                            </Viewbox>
                        </RepeatButton>
                        <!--3. Button control for decreasing the value-->
                        <RepeatButton x:Name="decrease" Style="{StaticResource BaseButtonStyle}" Grid.Column="0">
                            <Viewbox>
                                <Grid Width="20" Height="20">
                                    <Path Stroke="Black" Data="M0,5 H10" StrokeThickness="2" Height="10" Width="10" UseLayoutRounding="True" />
                                </Grid>
                            </Viewbox>
                        </RepeatButton>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
  2. Wouter
    Wouter avatar
    24 posts
    Member since:
    Jul 2013

    Posted 05 May 2014 in reply to Wouter Link to this post

    I'm guessing that this is due to a TextBlock that is drawn over the TextBox when it does not have focus, but that is not defined in the required parts for the style.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Masha
    Admin
    Masha avatar
    355 posts

    Posted 08 May 2014 Link to this post

    Hello Wouter,

    Please try the code snippet below:
    <Style TargetType="telerik:RadNumericUpDown" >
        <Setter Property="Background" Value="White" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" MinWidth="36"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto" MinWidth="36"/>
                        </Grid.ColumnDefinitions>
                        <Border x:Name="Border"
            Grid.ColumnSpan="3"
            BorderThickness="{TemplateBinding BorderThickness}"
            BorderBrush="{TemplateBinding BorderBrush}"
            Background="{TemplateBinding Background}"/>
     
                        <!--1. Textbox control for text input-->
                        <TextBox x:Name="textbox" Grid.Column="1" HorizontalAlignment="Stretch" />
                        <!--2. Button control for increasing the value-->
                        <RepeatButton x:Name="increase"  Grid.Column="2">
                            <Viewbox>
                                <Grid Width="20" Height="20">
                                    <Path Stroke="Black" Data="M0,5 H10 M5,5 V10Z" StrokeThickness="2" Height="10" Width="10" UseLayoutRounding="True" />
                                </Grid>
                            </Viewbox>
                        </RepeatButton>
                        <!--3. Button control for decreasing the value-->
                        <RepeatButton x:Name="decrease"  Grid.Column="0">
                            <Viewbox>
                                <Grid Width="20" Height="20">
                                    <Path Stroke="Black" Data="M0,5 H10" StrokeThickness="2" Height="10" Width="10" UseLayoutRounding="True" />
                                </Grid>
                            </Viewbox>
                        </RepeatButton>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    I've added background property to the RadNumericUpDown and a border where this background id binded  and everything work as expected.

    I hope this helps.

    Regards,
    Masha
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  5. Wouter
    Wouter avatar
    24 posts
    Member since:
    Jul 2013

    Posted 08 May 2014 in reply to Masha Link to this post

    Thanks, works nicely :-)
Back to Top