求一WPF TextBox Style

Question

想要的效果是这样的：
一开始看上去是像TextBlock， 没有边框，背景色跟父亲容器， 当Mouse Over时样式像TextBox 有边框可编辑其text内容，编辑后鼠标移开后显示的是编辑后的text（也就是源数据随之修改）。自己刚学WPF于是胡乱写了一个：
<Style x:Key="textStyle" TargetType="{x:Type TextBox}">
   <Setter Property="Template">
       <Setter.Value>
             <ControlTemplate TargetType="{x:Type TextBox}">
                  <TextBlock  Text="{TemplateBinding Property=Text}"/>
              </ControlTemplate>
         </Setter.Value>
   </Setter>
   <Style.Triggers>
       <Trigger Property="IsMouseOver" Value="true">
           <Setter Property="Template">
                <Setter.Value>
                     <ControlTemplate TargetType="{x:Type TextBox}">
                        <TextBox Text="{TemplateBinding Property=Text}" Background="{TemplateBinding Property=Background}" />
                    </ControlTemplate>
                  </Setter.Value>
            </Setter>
         <Setter Property="Background">
             <Setter.Value>
                   <SolidColorBrush Color="AliceBlue"/>  
              </Setter.Value>
           </Setter>
        </Trigger>
    </Style.Triggers>
</Style>这样外观效果是达到预期了，但是鼠标移上去修改TextBox内容后，不会修改到绑定的源数据，不是我想要的效果。

Answer 1

<Style x:Key="textStyle" TargetType="{x:Type TextBox}">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type TextBox}">
            <TextBlock  Text="{TemplateBinding Property=Text}"/>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
      <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="true">
          <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate TargetType="{x:Type TextBox}">
   <Border SnapsToDevicePixels="true" x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
   <ScrollViewer SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" x:Name="PART_ContentHost" Background="AliceBlue"/>
   </Border>
   </ControlTemplate>
            </Setter.Value>
          </Setter>
        </Trigger>
      </Style.Triggers>
    </Style>

Answer 2

@longlijun 
  
   谢谢！ 这正是我所要的。 还有个小小问题，能让悬停3s后 再变回TextBox吗？这样效果会更好些:)

Answer 3

可以在TextBox的ControlTemplate.Triggers中加入3秒动画,实现你想要的, 甚至更好的效果<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded"/>
</ControlTemplate.Triggers>

Answer 4

恕我愚昧，还是没整出来。   
我现在确切想要的效果为： 一开始看上去是像TextBlock， 没有边框，背景色跟父亲容器， 当鼠标悬停3s后样式变为像TextBox样有边框可编辑其text内容，编辑后鼠标移开后显示的是编辑后的text（也就是源数据随之修改）。 
你上面加动画实现的方法上有几点不是很明白望指教：1.<ControlTemplate TargetType="{x:Type TextBox}"> 
  <Border SnapsToDevicePixels="true" x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> 
  <ScrollViewer SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" x:Name="PART_ContentHost" Background="AliceBlue"/> 
  </Border> 
  <ControlTemplate.Triggers> 
      <EventTrigger RoutedEvent="FrameworkElement.Loaded">
          <BeginStoryboard>
              <Storyboard>
                  ......
               </Storyboard>
           </BeginStoryboard>
       </EventTrigger>
  </ControlTemplate.Triggers>
</ControlTemplate> 
  Storyboard的Storyboard.TargetName绑定的是什么，因为上面没有定义这样的一个TextBox，而是只定义了它里面显示的内容2.上面这样写是不是意味这当鼠标移到TextBlock上会去更改ControlTemplate， 然后FrameworkElement.Loaded事件就会马上被触发呢？
   怎么我实际观察到的效果是没有触发此段动画呢3.个人的理解是动画可以控制TextBox的Opacity 先为0，3s后再设到1， 但前3s模板已经由TextBlock切换到了TextBox， 好像最终实现的效果会有点出入吧？
见谅有太多的问题，现在自己也就是能看的懂简单Xaml的份，还在学习中，谢谢你们的指点！

Answer 5

也在用WPF，似乎要用动画，可惜我对这块不懂！

Answer 6

还有个问题：
如果这样定义TextBox模板后我怎么去设置TextWrapping的值，怎么让TextBox多行显示<ControlTemplate TargetType="{x:Type TextBox}"> 
   <Border SnapsToDevicePixels="true" x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding  BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> 
   <ScrollViewer SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" x:Name="PART_ContentHost" Background="AliceBlue"/> 
  </Border> 
</ControlTemplate> 

Answer 7

<Style x:Key="textStyle" TargetType="{x:Type TextBox}">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type TextBox}">
           <ControlTemplate.Resources>
           <Storyboard x:Key="OnMouseEnter1">
           <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Bd" Storyboard.TargetProperty="(UIElement.Opacity)">
           <SplineDoubleKeyFrame KeyTime="00:00:03" Value="1"/>
           </DoubleAnimationUsingKeyFrames>
           <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="tbk" Storyboard.TargetProperty="(UIElement.Opacity)">
           <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
           </DoubleAnimationUsingKeyFrames>
           </Storyboard>
           </ControlTemplate.Resources>
   <Grid>
<TextBlock x:Name="tbk" Text="{TemplateBinding Text}"/>
            <Border SnapsToDevicePixels="true" x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Opacity="0">
   <ScrollViewer SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" x:Name="PART_ContentHost" Background="AliceBlue"/>
   </Border>
</Grid>
           <ControlTemplate.Triggers>
           <EventTrigger RoutedEvent="Mouse.MouseLeave">
           <StopStoryboard BeginStoryboardName="OnMouseEnter1_BeginStoryboard"/>
           </EventTrigger>
           <EventTrigger RoutedEvent="Mouse.MouseEnter">
           <BeginStoryboard x:Name="OnMouseEnter1_BeginStoryboard" Storyboard="{StaticResource OnMouseEnter1}"/>
           </EventTrigger>
           </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>这个可是你想要的, 如果只是稍有差别, 可以调整TimeLine的起点和终点, 感觉3S太久