WPF标签到文本框

Question

Im相当小白在WPF但即时通讯认真努力掌握它：对

我一直试图建立在显示一个标签/文本块，但一旦用户将鼠标悬停/点击控制的控制，一显示文本框，以便可以编辑该值。

我一直在尝试将Visible属性绑定到代码隐藏中的布尔值，它使用MouseOver和MouseLeave以及Got/LostFocus的委托进行更新，但它没有奏效。此外，我尝试使用一个简单的样式，也将代码隐藏的布尔值的Visible属性绑定...也没有工作。最后，我也跟着什么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> 

但在所有的情况下，如前所述，文本框是不可见的，不管是什么：/

我该如何创建ControlTemplate，以便TextBox在用户悬停标签/文本块时可见？

Answer 1

编辑标签的样式有点让IsBouseOver为T时出现TextBox后悔。这比两个控件更适合重用性。

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

Answer 2

有几种方法可以做到这一点。

下面是一种方法，它只是使TextBox隐藏，直到将鼠标悬停在Label或TextBox上（否则当TextBox出现时，鼠标不再悬停在Label上）。您可能需要调整它，但你应该明白我的意思（注意，实际上它并不隐藏标签，只显示了它的TextBox）：

<Canvas x:Name="CnvCantidad" Grid.Row="2" Grid.Column="1"> 
     <Label HorizontalAlignment="Center" VerticalAlignment="Center" Content="0" Canvas.Left="16" Canvas.Top="6" 
      x:Name="LblCantidad"/> 
     <TextBox HorizontalAlignment="Center" VerticalAlignment="Center" Canvas.Left="16" Canvas.Top="8" Width="16" 
      x:Name="TxtCantidad" Height="23"> 
      <TextBox.Style> 
       <Style TargetType="{x:Type TextBox}"> 
        <Setter Property="Visibility" Value="Collapsed" /> 
        <Style.Triggers> 
         <DataTrigger Binding="{Binding ElementName=LblCantidad, Path=IsMouseOver}" Value="True"> 
          <Setter Property="Visibility" Value="Visible" /> 
         </DataTrigger> 
         <DataTrigger Binding="{Binding ElementName=TxtCantidad, Path=IsMouseOver}" Value="True"> 
          <Setter Property="Visibility" Value="Visible" /> 
         </DataTrigger> 
        </Style.Triggers> 
       </Style> 
      </TextBox.Style> 
     </TextBox> 
    </Canvas> 

Answer 3

如果你正在处理布尔值，你应该考虑的知名度一个ValueConverter。

下面是如何绑定到模型中的布尔值（IsTextVisible）并将其映射到可见性折叠或可见的示例。

XAML：

<TextBox HorizontalAlignment="Center" VerticalAlignment="Center" Canvas.Left="16" 
    Canvas.Top="8" Width="16" 
    x:Name="TxtCantidad" Style="{StaticResource TransformerBox}" Height="23" 
    Visibility="{Binding IsTextVisible, 
       Converter={StaticResource BoolToVisibilityConverter}}"/> 

ValueConverter代码：

public class BoolToVisibilityConverter : IValueConverter 
{ 
    object IValueConverter.Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     bool isVisible = Convert.ToBoolean(value); 

     return isVisible ? Visibility.Visible : Visibility.Collapsed; 
    } 

    object IValueConverter.ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     throw new NotImplementedException(); 
    } 
} 

你也需要导入转换器命名空间中的XAML

xmlns:converter="clr-namespace:Foo.Converter" 

，并为它分配的关键

<converter:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter"/> 

编辑：

如果你后面直接为您的目的结合的代码，你可以这样

DataContext="{Binding RelativeSource={RelativeSource Self}}" 

设置的DataContext在XAML窗口也使当然你是绑定到一个属性

public bool IsTextVisible {get;set;} 

在长远来看，你会想看看以下主题：

1. Data Binding in WPF
2. MVVM in WPF

Answer 4

您可以通过设置的ContentTemplate触发器内做到这一点，或者通过设置文本框作为一种资源和使用触发器进行设置。请检查此示例

<Label Height="30" BorderBrush="Gray" BorderThickness="1"> 
    <Label.Resources> 
     <TextBox x:Key="ContenTextBoxt" HorizontalAlignment="Stretch"/> 
    </Label.Resources> 
    <Label.Style> 
     <Style TargetType="{x:Type Label}"> 
      <Setter Property="Padding" 
            Value="0" /> 
       <Setter Property="HorizontalContentAlignment" 
            Value="Stretch" /> 
       <Setter Property="VerticalContentAlignment" 
            Value="Stretch" /> 
       <Setter Property="Content" 
            Value="No mouse over" /> 
      <Style.Triggers> 
       <Trigger Property="IsMouseOver" 
              Value="True"> 
        <Setter Property="Content" Value="{StaticResource ContenTextBoxt}" /> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 
    </Label.Style> 
    </Label>