How to make value of a custom control editable upon receiving focus

Question

I created a custom WPF control which displays the value of the Weight property which is an int. When the user clicks on the custom control or when the control gets the focus, the user should be able to edit the value of the Weight property.

To accomplish this, I tried the following:

If the control is "inactive", the Weight property will be displayed in a TextBlock.

If the control gets the focus, the Weight property will be displayed in a TextBox.

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfCustomControlLibrary1">

<Style TargetType="{x:Type local:CustomControl1}">
    <Style.Resources>
        <ControlTemplate x:Key="Control_Focused" >
            <Border Background="Green"
                        BorderBrush="Black"
                         CornerRadius="50" Width="40" Height="40">
                <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                   <TextBox Width="35"
                                Text="{Binding Mode=TwoWay,Path=Model.Weight,UpdateSourceTrigger=PropertyChanged,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type local:CustomControl1}}
                                ,Converter={x:Static local:CustomControl1.IntToStringConverter}}" />

                </StackPanel>
            </Border>
        </ControlTemplate>

        <ControlTemplate x:Key="Control">
            <Border Background="Green"
                        BorderBrush="Black"
                       CornerRadius="50" Width="40" Height="40">
                <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                    <TextBlock x:Name="PART_TextBlockWeighted" Text="{Binding Mode=TwoWay,Path=Model.Weight,UpdateSourceTrigger=PropertyChanged,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type local:CustomControl1}}}" 
                               HorizontalAlignment="Center" VerticalAlignment="Center" />
                </StackPanel>
            </Border>
        </ControlTemplate>


    </Style.Resources>
    <Style.Triggers>
        <Trigger Property="IsFocused" Value="True">
            <Setter Property="Template" Value="{StaticResource Control_Focused}" ></Setter>
        </Trigger>
        <Trigger Property="IsFocused" Value="False">
            <Setter Property="Template" Value="{StaticResource Control}" ></Setter>
        </Trigger>
    </Style.Triggers>

</Style>

The problem with this custom control style is that when the user clicks into the TextBox, the trigger will change the control template to the TextBlock. How can I fix this?

why don't you just use a single TextBox and set IsReadOnly="True" for non-editable and if required supply a different Style for it as well. — Viv

Michael Gunter Michael Gunter · Accepted Answer · 2013-07-01T21:32:53

Try using the IsKeyboardFocusWithin property instead. I believe this will do what you need.

<Style.Triggers>
    <Trigger Property="IsKeyboardFocusWithin" Value="True">
        <Setter Property="Template" Value="{StaticResource Control_Focused}" ></Setter>
    </Trigger>
    <Trigger Property="IsKeyboardFocusWithin" Value="False">
        <Setter Property="Template" Value="{StaticResource Control}" ></Setter>
    </Trigger>
</Style.Triggers>

How to make value of a custom control editable upon receiving focus

1 Answers