C＃中的WPF不透明度动画？

Question

I have a rectangle set to hidden visibility and when a text box is focused, visibility is visible for the rectangle. This works great however I would like a opacity animation.. How can i do this in c#

Here is my code;

<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

This should work:

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)));
}