WPF Label to Textbox

c#, wpf

Solution

Edited the Style for a Label a bit to make a TextBox appear when IsMouseOver is True. This is better then two Controls for re-usability.

<Style x:Key="EditableLabelStyle" TargetType="{x:Type Label}">
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Padding" Value="5"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="VerticalContentAlignment" Value="Top"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Label}">
                <Grid>
                    <TextBox Name="textBox"
                             Grid.ZIndex="1"
                             Padding="1,3,0,0"
                             Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type Label}}, Path=Content, UpdateSourceTrigger=PropertyChanged}"
                             Opacity="0"/>
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter TargetName="textBox" Property="Opacity" Value="1"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Use it like this

<Label Style="{StaticResource EditableLabelStyle}" HorizontalAlignment="Center" VerticalAlignment="Center" Content="0" Canvas.Left="16" Canvas.Top="6"  
       x:Name="LblCantidad"/>

Problem

Im pretty noob in WPF but im seriously trying to master it :p Ive been trying to create a control where one label/textblock is displayed but once the user hovers/clicks the control, a textbox is shown instead so the value can be edited. What i have been trying is binding the Visible property to a boolean in the code-behind, which is updated using delegates for MouseOver and MouseLeave and Got/LostFocus, but it didnt work. Also i tried using a simple style which also bound the Visible property to the boolean in code-behind... didnt work either. Ultimately, i followed what WPF: Label to TextBox when selected suggested, using a ControlTemplate and a Trigger, like this: ``` <Style x:Key="TransformerBox" TargetType="{x:Type TextBox}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="true"> <Setter Property="Visibility" Value="Visible"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> ``` And: ``` <Canvas x:Name="CnvCantidad" Grid.Row="2" Grid.Column="1"> <TextBox HorizontalAlignment="Center" VerticalAlignment="Center" Canvas.Left="16" Canvas.Top="8" Width="16" x:Name="TxtCantidad" Style="{StaticResource TransformerBox}" Height="23" Visibility="Visible"/> <Label HorizontalAlignment="Center" VerticalAlignment="Center" Content="0" Canvas.Left="16" Canvas.Top="6" x:Name="LblCantidad"/> </Canvas> ``` But in all the cases explained before, the TextBox was never visible no matter what :/ How should i create the ControlTemplate so the TextBox is visible when the user hovers the Label/TextBlock?

Original source

Related problems