Cannot focus textbox with mouse using custom style

[Wouter]

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>

[Wouter]

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.

[Masha]

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

 

 

[Wouter]

Thanks, works nicely :-)