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

Cannot focus textbox with mouse using custom style

3 Answers 56 Views
NumericUpDown
This is a migrated thread and some comments may be shown as answers.
Wouter
Top achievements
Rank 1
Wouter asked on 05 May 2014, 11:51 AM
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>

3 Answers, 1 is accepted

Sort by
0
Wouter
Top achievements
Rank 1
answered on 05 May 2014, 11:53 AM
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.
0
Masha
Telerik team
answered on 08 May 2014, 07:43 AM
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.
 
0
Wouter
Top achievements
Rank 1
answered on 08 May 2014, 08:26 AM
Thanks, works nicely :-)
Tags
NumericUpDown
Asked by
Wouter
Top achievements
Rank 1
Answers by
Wouter
Top achievements
Rank 1
Masha
Telerik team
Share this question
or