WPF:停止动画隐藏控件在Windows加载

Question

我有一个非常简单的淡入/淡出动画，使用数据触发器可以很好地工作。我已经将数据触发器绑定到bool属性，并在触发器内部将不透明度设置为0，反之亦然。

现在的问题是在加载时bool值为false的对象，我不希望它们在加载时显示，然后动画自己隐藏。

我试过在样式设置中设置不透明度为0，但是没有用

按钮样式

        <Style x:Key="LocationPickerButtonStyle" TargetType="{x:Type Button}">
        <Style.Setters>
            <Setter Property="Height" Value="93"/>
            <Setter Property="Width" Value="93"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid >
                            <Image x:Name="DefaultImage" Source="something.png"/>
                           <Ellipse x:Name="HitTest" Fill="Transparent" Height="93" Width="93" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <DataTrigger Binding="{Binding IsLocationVisible}" Value="true">
                                <DataTrigger.EnterActions>
                                    <BeginStoryboard x:Name="showSelectedLocation">
                                        <Storyboard Storyboard.TargetProperty="Opacity">
                                            <DoubleAnimation Duration="0:0:1" From="0" To="1"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.EnterActions>
                                <DataTrigger.ExitActions>
                                    <StopStoryboard BeginStoryboardName="showSelectedLocation"></StopStoryboard>
                                </DataTrigger.ExitActions>
                            </DataTrigger>
                            <DataTrigger Binding="{Binding IsLocationVisible}" Value="false">
                                <DataTrigger.EnterActions>
                                    <BeginStoryboard x:Name="hideSelectedLocation">
                                        <Storyboard Storyboard.TargetProperty="Opacity" >
                                            <DoubleAnimation Duration="0:0:1" From="1" To="0" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.EnterActions>
                                <DataTrigger.ExitActions>
                                    <StopStoryboard BeginStoryboardName="hideSelectedLocation"></StopStoryboard>
                                </DataTrigger.ExitActions>
                            </DataTrigger>
                            <Trigger Property="Opacity" Value="0">
                                <Setter Property="Visibility" Value="Collapsed"></Setter>
                            </Trigger>
                            <Trigger Property="Opacity" Value="1">
                                <Setter Property="Visibility" Value="Visible"></Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style.Setters>
    </Style>

Answer 1

在您的XAML中做以下更改:

1. 将DataTriggers从<ControlTemplate.Triggers>移到Style.Triggers

2. 设置Style Setter中的Opacity = 0为每一个Button启动Opacity。

3. 删除false DataTrigger中的From = 1

经过所有的更改，您的Style看起来像这样:

    <Style x:Key="LocationPickerButtonStyle" TargetType="{x:Type Button}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsLocationVisible}" Value="true">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard x:Name="showSelectedLocation">
                            <Storyboard Storyboard.TargetProperty="Opacity">
                                <DoubleAnimation Duration="0:0:1" From="0" To="1"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                    <DataTrigger.ExitActions>
                        <StopStoryboard BeginStoryboardName="showSelectedLocation"></StopStoryboard>
                    </DataTrigger.ExitActions>
                </DataTrigger>
                <DataTrigger Binding="{Binding IsLocationVisible}" Value="false">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard x:Name="hideSelectedLocation">
                            <Storyboard Storyboard.TargetProperty="Opacity" >
                                <DoubleAnimation Duration="0:0:1"  To="0" />
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                    <DataTrigger.ExitActions>
                        <StopStoryboard BeginStoryboardName="hideSelectedLocation"></StopStoryboard>
                    </DataTrigger.ExitActions>
                </DataTrigger>
            </Style.Triggers>
            <Style.Setters>
                <Setter Property="Height" Value="93"/>
                <Setter Property="Width" Value="93"/>
                <Setter Property="Opacity" Value="0"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid >
                                <Image x:Name="DefaultImage" Source="something.png"/>
                                <Ellipse x:Name="HitTest" Fill="Transparent" Height="93" Width="93" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Grid>
                            <ControlTemplate.Triggers>                                    
                                <Trigger Property="Opacity" Value="0">
                                    <Setter Property="Visibility" Value="Collapsed"></Setter>
                                </Trigger>
                                <Trigger Property="Opacity" Value="1">
                                    <Setter Property="Visibility" Value="Visible"></Setter>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style.Setters>
        </Style>