求一WPF TextBox Style

[lgg06]

想要的效果是这样的：
一开始看上去是像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内容后，不会修改到绑定的源数据，不是我想要的效果。

[lgg06]

@longlijun

谢谢！ 这正是我所要的。

还有个小小问题，能让悬停3s后 再变回TextBox吗？这样效果会更好些:)

[富莱工作室]

可以在TextBox的ControlTemplate.Triggers中加入3秒动画,实现你想要的, 甚至更好的效果

<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded"/>
</ControlTemplate.Triggers>

[富莱工作室]

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

[lgg06]

恕我愚昧，还是没整出来。
我现在确切想要的效果为： 一开始看上去是像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的份，还在学习中，谢谢你们的指点！

[Ador3]

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

[lgg06]

@Ador3
:) 谢谢帮顶!

[lgg06]

还有个问题：
如果这样定义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>

[lgg06]

下面这个问题已搞定了:)

[Quote=引用 7 楼 lgg06 的回复:]
还有个问题：
如果这样定义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 SnapsTo…
[/Quote]

[富莱工作室]

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

[lgg06]

谢谢了， 先结贴了，有问题再开贴问你:)

[jtl2004]

学习

[pengfangxu8]

学习了

[jiuwulang]

为什么会这样啊