Question

我开始了一个新的小WPF应用程序，它有一个类似于放在图片上的条目表单。该图片具有应该输入的数据的占位符以及放置TextBox的位置，因此用户实际上将数据输入到表格中，就像她手工或打字机一样。我想添加一个效果，partiali在用户离开字段时隐藏文本框，因此在其中一个字段中放置了一些事件处理程序，添加了以下代码：

<TextBox Height="23" VerticalAlignment="Top" Width="237" 
         HorizontalAlignment="Left" Margin="641,25,0,0" 
         Name="txtAmount" LostFocus="txtAmount_LostFocus" />

private void txtAmount_LostFocus(object sender, RoutedEventArgs e)
{
    Opacity = .5;
}

这样可行，所以我继续添加代码以在所有textBox中设置相同的行为，所以我使用下面的代码更改了上面的代码：

<Window.Resources>
    <Storyboard x:Key="FadeOut">
        <DoubleAnimation From="1.0" To="0.5" 
                         Duration="0:0:0.2"
                         Storyboard.TargetProperty="Opacity">

        </DoubleAnimation>
    </Storyboard>
    <Storyboard x:Key="FadeIn">
        <DoubleAnimation From="0.5" To="1.0" 
                         Duration="0:0:0.2"
                         Storyboard.TargetProperty="Opacity"/>
    </Storyboard>
    <Style x:Key="InTheShadow" >
        <Style.Setters>
            <Setter Property="TextBox.Opacity" Value="0.5" />
        </Style.Setters>
        </Style.Setters>
        <Style.Triggers>
            <EventTrigger RoutedEvent="TextBox.GotFocus">
                <BeginStoryboard Storyboard="{StaticResource FadeIn}"/>
            </EventTrigger>
            <EventTrigger RoutedEvent="TextBox.LostFocus">
                <BeginStoryboard Storyboard="{StaticResource FadeOut}"/>
            </EventTrigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

第一个代码，也处理了GotFocus事件，但它几乎是相同的代码，所以第二个代码实现了，并且放在所有设置样式的textBox上。

现在，这也有效，但我想为MouseEnter / MouseLeave添加相同的效果

            <EventTrigger RoutedEvent="TextBox.MouseEnter">
                <BeginStoryboard Storyboard="{StaticResource FadeIn}"/>
            </EventTrigger>
            <EventTrigger RoutedEvent="TextBox.MouseLeave">
                <BeginStoryboard Storyboard="{StaticResource FadeOut}"/>
            </EventTrigger>

但是，这里我的问题来了，这些事件显然总是改变了Opacity，这不是我的意图。我不想更改具有Focus的TextBox的Opacity，我想将该Opacity保持在100％。

Answer 1

MultiTriggers救援！

还必须注意停止旧的故事板。希望这可以按预期工作：

<Style x:Key="InTheShadow" TargetType="TextBox">
    <Setter Property="TextBox.Opacity" Value="0.5" />
    <Style.Triggers>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsFocused" Value="False" />
                <Condition Property="IsMouseOver" Value="True" />
            </MultiTrigger.Conditions>
            <MultiTrigger.EnterActions>
                <StopStoryboard BeginStoryboardName="fadeOut1" />
                <StopStoryboard BeginStoryboardName="fadeOut2" />
                <BeginStoryboard x:Name="fadeIn1" Storyboard="{StaticResource FadeIn}"/>
            </MultiTrigger.EnterActions>
            <MultiTrigger.ExitActions>
                <StopStoryboard BeginStoryboardName="fadeIn1" />
                <StopStoryboard BeginStoryboardName="fadeIn2" />
                <BeginStoryboard x:Name="fadeOut1" Storyboard="{StaticResource FadeOut}"/>
            </MultiTrigger.ExitActions>
        </MultiTrigger>

        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsFocused" Value="True" />
            </MultiTrigger.Conditions>
            <MultiTrigger.EnterActions>
                <StopStoryboard BeginStoryboardName="fadeOut1" />
                <StopStoryboard BeginStoryboardName="fadeOut2" />
                <BeginStoryboard x:Name="fadeIn2" Storyboard="{StaticResource FadeIn}"/>
            </MultiTrigger.EnterActions>
            <MultiTrigger.ExitActions>
                <StopStoryboard BeginStoryboardName="fadeIn1" />
                <StopStoryboard BeginStoryboardName="fadeIn2" />
                <BeginStoryboard x:Name="fadeOut2" Storyboard="{StaticResource FadeOut}"/>
            </MultiTrigger.ExitActions>
        </MultiTrigger>


    </Style.Triggers>
</Style>

用法：

<StackPanel Margin="7">
    <TextBox Margin="7" Style="{StaticResource InTheShadow}" />
    <TextBox Margin="7" Style="{StaticResource InTheShadow}" />
    <TextBox Margin="7" Style="{StaticResource InTheShadow}" />
    <TextBox Margin="7" Style="{StaticResource InTheShadow}" />
    <TextBox Margin="7" Style="{StaticResource InTheShadow}" />
</StackPanel>

编辑另外，您应该删除故事板中的“from”，这样如果文本框已经将鼠标悬停在您关注的位置，它就不会重新制作动画：

<Storyboard x:Key="FadeOut">
    <DoubleAnimation 
        To="0.5" 
        Duration="0:0:0.2"
        Storyboard.TargetProperty="Opacity" FillBehavior="HoldEnd"
        />
</Storyboard>
<Storyboard x:Key="FadeIn">
    <DoubleAnimation 
        To="1.0" 
        Duration="0:0:0.2"
        Storyboard.TargetProperty="Opacity" FillBehavior="HoldEnd"
        />
</Storyboard>

WPF：有没有办法在XAML中有条件地更改属性值或需要后面的代码（VB / C＃）？

1 个答案: