基於網格可見性的WPF動畫

Question

我有一個開始崩潰的網格。 當用戶單擊按鈕時，后面的代碼將可見性設置為“可見”。 然后，按鈕XAML觸發器使網格在3秒內從0增長到1925。

我試圖弄清楚如何在XAML中對觸發器進行編程，以查找網格的可見性。 然后根據其狀態使動畫增長或縮小。 因此，根據下面的代碼，如果觸發器確定可見性可見，那么我希望使網格從1925變為0，如果單擊按鈕時網格顯示為折疊，則網格從0變為1925。 希望遠離代碼，了解UI中發生的事情。 這就是為什么以后我將網格可見性綁定到屬性的原因。

XAML的主要組件

    <Grid Name="gridDisplay" Background="AliceBlue" Visibility="Collapsed">

    </Grid>



    <Button 
        Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
        Width="32" Height="32" FontSize="16" VerticalAlignment="Center" HorizontalAlignment="Right" Background="White" Click="Button_Click">
        &gt;

        <Button.Triggers>
            <EventTrigger RoutedEvent="Button.Click">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation 
                            Storyboard.TargetName="gridDisplay"
                            Storyboard.TargetProperty="Width"
                            From="0" To="1925" Duration="0:0:3" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Button.Triggers>
    </Button>

按鈕事件

        //TODO: Bind grid to visibility property
        if (gridDisplay.Visibility == System.Windows.Visibility.Collapsed)
        {
            gridDisplay.Visibility = System.Windows.Visibility.Visible;
            (sender as Button).Content = "<";
        }
        else
        {
            gridDisplay.Visibility = System.Windows.Visibility.Collapsed;
            (sender as Button).Content = ">";
        }

Answer 1

無需使用觸發器，您可以制作這樣的動畫。

xaml：

  <Window.Resources>
        <Storyboard x:Key="open">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="gridDisplay">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="900"/>
            </DoubleAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="gridDisplay">
                <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="close">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="gridDisplay">
                <EasingDoubleKeyFrame KeyTime="0" Value="900"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="gridDisplay">
                <DiscreteObjectKeyFrame KeyTime="0:0:0.6" Value="{x:Static Visibility.Collapsed}"/>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>

事件事件：

//TODO: Bind grid to visibility property
            if (gridDisplay.Visibility == System.Windows.Visibility.Collapsed)
            {
                var storyboard = this.Resources["open"] as Storyboard;
                storyboard.Begin();
                (sender as Button).Content = "<";
            }
            else
            {
                var storyboard = this.Resources["close"] as Storyboard;
                storyboard.Begin();
                (sender as Button).Content = ">";
            }

我希望這能幫到您。 如果要擁有可見屬性，可以使用以下屬性：

private bool _visibleProp;
public bool VisibleProp{get{return _visibleProp;} 
    set{_visibleProp = value; 
        if(value){var storyboard = this.Resources["open"] as Storyboard;
                storyboard.Begin(); }
        else{var storyboard = this.Resources["close"] as Storyboard;
                storyboard.Begin();}
          }}