在用户控件变为可见和折叠时添加动画在Wpf中

时间:2010-05-28 00:16:33

标签: c# wpf xaml animation user-controls

我有两个xaml文件MainWindow.xaml和其他用户控件WorkDetail.xaml文件。 MainWindow.xaml文件有一个文本框,按钮,列表框和对WorkDetail.xaml的引用(折叠的用户控件)。每当用户输入任何文本时,单击添加按钮时,它将被添加到列表框中。双击列表框中的任何项目时,WorkDetail.xaml的可见性将设置为Visible并显示。在WorkDetail.xaml(用户控件)中,它具有文本块和按钮。 Textblock显示所选项目的文本,关闭按钮将WorkDetail窗口的可见性设置为折叠。现在我试图在WorkDetail.xaml可见并崩溃时动画。当双击列表框中的任何项目并将WorkDetail.xaml可见性设置为可见时,我想在MainWindow上创建一个从右到左移动WorkDetail.xaml窗口的动画。单击WorkDetail.xaml文件中的“关闭”按钮并折叠WorkDetail.xaml文件时,我想从MainWindow向左滑动WorkDetail.xaml文件。

以下是截图: alt text http://i48.tinypic.com/13znac5.jpg

MainWindow.xaml代码:

   <Window...>
    <Grid Background="Black" >      
            <TextBox x:Name="enteredWork" Height="39" Margin="44,48,49,0" TextWrapping="Wrap" VerticalAlignment="Top"/>
            <ListBox x:Name="workListBox" Margin="26,155,38,45" FontSize="29.333" MouseDoubleClick="workListBox_MouseDoubleClick"/>
            <Button x:Name="addWork" Content="Add" Height="34" Margin="71,103,120,0" VerticalAlignment="Top" Click="Button_Click"/>

            <TestWpf:WorkDetail x:Name="WorkDetail" Visibility="Collapsed"/>
        </Grid>
</Window>

MainWindow.xaml.cs类代码:

namespace TestWpf
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            workListBox.Items.Add(enteredWork.Text);
        }

        private void workListBox_MouseDoubleClick(object sender, MouseButtonEventArgs e)
        {
            WorkDetail.workTextBlk.Text = (string)workListBox.SelectedItem;
            WorkDetail.Visibility = Visibility.Visible;
        }
    }
}

WorkDetail.xaml代码:

<UserControl ..>
  <Grid Background="#FFD2CFCF">
        <TextBlock x:Name="workTextBlk" Height="154" Margin="33,50,49,0" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="29.333" Background="#FFF13939"/>
        <Button x:Name="btnClose" Content="Close" Height="62" Margin="70,0,94,87" VerticalAlignment="Bottom" Click="btnClose_Click"/>       
    </Grid>
</UserControl>

WorkDetail.xaml.cs类代码:

namespace TestWpf
{
    public partial class WorkDetail : UserControl
    {
        public WorkDetail()
        {
            this.InitializeComponent();
        }

        private void btnClose_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            Visibility = Visibility.Collapsed;
        }
    }
}

任何人都可以告诉我该怎么做?

1 个答案:

答案 0 :(得分:0)

this link 对您有意义吗?我认为使用基于VisualBrush的技术可以实现非常相似的功能。值得一看!

JAPF http://www.remote-screenshots.com/thumbs/medium/0/www.japf.fr.jpg

另一个想法是使用VisualStateManager和Transistions:您可以覆盖控件的样式信息并使用Storyboard动画 - 如果没有像 Blend 这样的工具,这可能会变得非常棘手。

希望无论如何都有帮助。

最好的问候,
托马斯