WPF 图像触发事件

Question

您好，我正在使用 WPF 网格来表示数据。 我有一个名为微调器的图像。我想在加载数据（已经完成）以及更新数据时显示微调器。谁能告诉我如何添加触发器，以便微调器在数据源更新或更改时显示？我尝试了 SourceUpdated，但它不是 RoutedEvent。 WPF 新手，如果问题太初学者请见谅。

<UserControl x:Class="My.IGrid.IGridControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
        <Storyboard x:Key="Spin360" Storyboard.TargetName="Spinner" Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)">
            <DoubleAnimation From="0" To="360" BeginTime="0:0:0" Duration="0:0:1.0" RepeatBehavior="Forever" />
        </Storyboard>
    </UserControl.Resources>

    <Grid Name="RootGrid">
        <Border>
            <Border.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="LightGray" Offset="0" />
                    <GradientStop Color="White" Offset="1" />
                </LinearGradientBrush>
            </Border.Background>
            <StackPanel Name="SplashPanel" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.ZIndex="0">
                <Image Name="Spinner" Source="/My.IGrid;component/Images/spinner.png" Width="32" Height="32" RenderTransformOrigin="0.5, 0.5">
                    <Image.Triggers>
                        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                            <EventTrigger.Actions>
                                <BeginStoryboard Storyboard="{StaticResource Spin360}" />
                            </EventTrigger.Actions>
                        </EventTrigger>
                    </Image.Triggers>
                    <Image.RenderTransform>
                        <RotateTransform Angle="0" />
                    </Image.RenderTransform>
                </Image>
            </StackPanel>
        </Border>
    </Grid>
</UserControl>

Answer 1

通常，我们将这样的属性添加到我们的视图模型或代码中：

public bool IsBusy { get: set: } // Implement INotifyPropertyChanged interface here

然后，每当我们调用一个长时间运行的方法，我们将其设置为true：

IsBusy = true;

并且每当该长时间运行的方法完成时，我们将其设置为false：

IsBusy = false;

现在的诀窍是使用 BooleanToVisibilityConverter 将此 bool 属性绑定到微调器 Image 的 Visibility 属性：

<Image Name="Spinner" Visibility="{Binding IsBusy, Converter={StaticResource 
    BooleanToVisibilityConverter}}" ... />

当然，您需要将名为 BooleanToVisibilityConverter 的 Converter 实例添加到您的 Resources 部分，但我假设您已经知道如何执行此操作。

---

更新>>>

不，我认为我的误解是我的错......我现在看到你的代码很清楚，但我以前一定没有正确看过。如果您在类后面使用UserControl 代码，那么当您使Image 可见时，您应该能够访问Storyboard 并从代码启动它：

IsBusy = true;
Storyboard storyboard = (Storyboard)Resources["Spin360"];
storyboard.Begin();

但是，我认为您会发现在将数据加载到 UI 控件时它不会正确设置动画，因为这也将使用单个 UI 线程。不过，在后台线程中从数据库加载数据时应该没问题，因此您可能会发现它工作了一小会儿然后就冻结了。