Add animation when user control get visible and collapsed In Wpf

Question

I have two xaml files MainWindow.xaml and other user control WorkDetail.xaml file. MainWindow.xaml file has a textbox, button, listbox and reference to WorkDetail.xaml(user control which is collapsed). Whenever user enter any text, it gets added in listbox when the add button is clicked. When any items from the listbox is double clicked, the visibility of WorkDetail.xaml is set to Visible and it gets displayed. In WorkDetail.xaml (user control) it has textblock and button. The Textblock displays the text of selected item and close button sets the visibility of WorkDetail window to collapsed. Now i am trying to animate WorkDetail.xaml when it gets visible and collapse. When any items from listbox is double clicked and WorkDetail.xaml visibility is set to visible, i want to create an animation of moving WorkDetail.xaml window from right to left on MainWindow. When Close button from WorkDetail.xaml file is clicked and WorkDetail.xaml file is collapsed, i want to slide the WorkDetail.xaml file from left to right from MainWindow.

Here is the screenshot:

MainWindow.xaml code:

   <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 class code:

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 code:

<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 class code:

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

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

Can anyone tell how can i do this?

Answer 1

Hi,

is this link interesting for you? I think that something very similar is accomplished using a VisualBrush based technique. It's worth a look!

Another idea would be using the VisualStateManager and Transistions: You can overwrite the style information of your controls and use Storyboard animations - without tools like Blend this could become very tricky, though.

Hope that helps anyway.

best regards,
thomas