c# - WPF 标签到文本框

Question

我是 WPF 的新手，但我正在认真地努力掌握它 :p

我一直在尝试创建一个显示一个标签/文本 block 的控件，但是一旦用户悬停/单击该控件，就会显示一个文本框，以便可以编辑该值。

我一直在尝试的是将 Visible 属性绑定(bind)到代码隐藏中的 bool 值，该代码使用 MouseOver 和 MouseLeave 以及 Got/LostFocus 的委托(delegate)进行更新，但它没有用。我还尝试使用一种简单的样式，该样式还将 Visible 属性绑定(bind)到代码隐藏中的 bool 值……也没有用。最终，我遵循了什么 WPF: Label to TextBox when selected建议使用 ControlTemplate 和触发器，如下所示:

    <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>

和:

    <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>

但在之前解释的所有情况下，TextBox 无论如何都不可见:/

我应该如何创建 ControlTemplate，以便在用户将鼠标悬停在 Label/TextBlock 上时显示 TextBox？

Answer 1

稍微编辑了 Label 的样式，使 TextBox 在 IsMouseOver 为 True 时出现。这比两个控件的可重用性更好。

<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>

这样使用

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