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>