C＃中的WPF不透明度動畫？

Question

我有一個設置為隱藏可見性的矩形，當一個文本框被聚焦時，該矩形的可見性可見。 這很好用，但是我想要一個不透明動畫。.如何在C＃中做到這一點

這是我的代碼；

<Grid>

    <Rectangle Height="650" Width="625" x:Name="Rectangle" Fill="#293241" Opacity="0.8" Visibility="Hidden" Panel.ZIndex="1"  ></Rectangle>

    <StackPanel Margin="0,51,0,-51">
        <TextBox  x:Name="text" GotKeyboardFocus="text_GotKeyboardFocus" Margin="158,0,169,0" Height="24" Text="Select Your Time..." />

        <Popup x:Name="popup" AllowsTransparency="True"  Width="430" Height="400" Placement="Center" >
            <Grid>
                <StackPanel Width="430" Height="400" Orientation="Horizontal" Margin="0,-118,0,118">
                    <TextBox  x:Name="text2" Background="#f4f4f4" Margin="10" GotKeyboardFocus="text_GotKeyboardFocus2" Cursor="Arrow" Height="64" Width="64" Text="1 second" />
                    <TextBox  x:Name="text3" Background="#f4f4f4" Margin="10" GotKeyboardFocus="text_GotKeyboardFocus2" Cursor="Arrow" Height="64" Width="64" Text="2 seconds" />
                    <TextBox  x:Name="text4" Background="#f4f4f4" Margin="10" GotKeyboardFocus="text_GotKeyboardFocus2" Cursor="Arrow" Height="64" Width="64" Text="5 seconds" />
                    <TextBox  x:Name="text5" Background="#f4f4f4" Margin="10" GotKeyboardFocus="text_GotKeyboardFocus2" Cursor="Arrow" Height="64" Width="64" Text="10 seconds" />
                    <TextBox  x:Name="text6" Background="#f4f4f4" Margin="10" GotKeyboardFocus="text_GotKeyboardFocus2" Cursor="Arrow" Height="64" Width="64" Text="20 seconds" />
                </StackPanel>
                <StackPanel Width="430" Height="400" Orientation="Horizontal" Margin="0,-38,0,38">
                    <TextBox  x:Name="text7" Background="#f4f4f4" Margin="10" GotKeyboardFocus="text_GotKeyboardFocus2" Cursor="Arrow" Height="64" Width="64" Text="30 seconds" />
                    <TextBox  x:Name="text8" Background="#f4f4f4" Margin="10" GotKeyboardFocus="text_GotKeyboardFocus2" Cursor="Arrow" Height="64" Width="64" Text="1 minute" />
                    <TextBox  x:Name="text9" Background="#f4f4f4" Margin="10" GotKeyboardFocus="text_GotKeyboardFocus2" Cursor="Arrow" Height="64" Width="64" Text="5 minutes" />
                    <TextBox  x:Name="text10" Background="#f4f4f4" Margin="10" GotKeyboardFocus="text_GotKeyboardFocus2" Cursor="Arrow" Height="64" Width="64" Text="10 minutes" />
                    <TextBox  x:Name="text11" Background="#f4f4f4" Margin="10" GotKeyboardFocus="text_GotKeyboardFocus2" Cursor="Arrow" Height="64" Width="64" Text="Forever" />
                </StackPanel>
            </Grid>
        </Popup>

    </StackPanel>


</Grid>

 private void text_GotKeyboardFocus(object sender, KeyboardFocusChangedEventArgs e)
    {
        popup.IsOpen = true;
        Rectangle.Visibility = Visibility.Visible;
    }

    private void text_GotKeyboardFocus2(object sender, RoutedEventArgs e)
    {
        popup.IsOpen = false;
        text.Text = (sender as TextBox).Text;
        Rectangle.Visibility = Visibility.Hidden;
    }

Answer 1

這應該工作：

private void text_GotKeyboardFocus(object sender, KeyboardFocusChangedEventArgs e)
{
    popup.IsOpen = true;
    Rectangle.BeginAnimation(UIElement.OpacityProperty,
        new DoubleAnimation(1d, TimeSpan.FromSeconds(0.5)));
}

private void text_GotKeyboardFocus2(object sender, RoutedEventArgs e)
{
    popup.IsOpen = false;
    text.Text = (sender as TextBox).Text;
    Rectangle.BeginAnimation(UIElement.OpacityProperty,
        new DoubleAnimation(0d, TimeSpan.FromSeconds(0.5)));
}