Sliding animation help

Question

I have a grid view, that when I select in a file, it will show a details pane

 <!--  Center Section: GridView  -->
 <GridView
     Grid.Column="1"
     Padding="10"
     IsItemClickEnabled="True"
     ItemsSource="{x:Bind FileExplorerWindowViewModel.GcodeItems}"
     SelectedItem="{x:Bind FileExplorerWindowViewModel.SelectedFile, Mode=TwoWay}"
     SelectionMode="Single">
     <GridView.ItemTemplate>
         <DataTemplate x:DataType="models:GcodeItem">
             <StackPanel
                 Margin="10"
                 HorizontalAlignment="Center"
                 Orientation="Vertical">
                 <Image
                     Width="80"
                     Height="80"
                     Source="{x:Bind IconPath}" />
                 <TextBlock
                     HorizontalAlignment="Center"
                     Text="{x:Bind GetBaseFileName}"
                     TextWrapping="Wrap" />
             </StackPanel>
         </DataTemplate>
     </GridView.ItemTemplate>
 </GridView>

 <!--  Right Section: Details  -->
 <Grid
     Grid.Column="2"
     Padding="10"
     Background="#49212121"
     Visibility="{x:Bind FileExplorerWindowViewModel.DetailsPanelVisibility, Mode=OneWay}">
     
     <Grid.RowDefinitions>
         <RowDefinition Height="*" />
         <RowDefinition Height="*" />
     </Grid.RowDefinitions>

     <Image
         HorizontalAlignment="Center"
         VerticalAlignment="Center"
         Source="/Assets/gcode_Large.png" />

     <Grid
         Grid.Row="1"
         Margin="10,20,0,0"
         HorizontalAlignment="Center"
         ColumnSpacing="20">
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="*" />
             <ColumnDefinition Width="*" />
         </Grid.ColumnDefinitions>
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
             <RowDefinition Height="Auto" />
             <RowDefinition Height="Auto" />
             <RowDefinition Height="Auto" />
             <RowDefinition Height="*" />
         </Grid.RowDefinitions>

         <!--  File Details  -->
         <TextBlock
             FontWeight="Bold"
             Text="File name" />
         <TextBlock
             Grid.Column="1"
             Text="{x:Bind FileExplorerWindowViewModel.SelectedFile.GetBaseFileName, Mode=OneWay}" />

         <TextBlock
             Grid.Row="1"
             FontWeight="Bold"
             Text="File extension" />
         <TextBlock
             Grid.Row="1"
             Grid.Column="1"
             Text="{x:Bind FileExplorerWindowViewModel.SelectedFile.GetFileExtention, Mode=OneWay}" />

         <TextBlock
             Grid.Row="2"
             FontWeight="Bold"
             Text="File creation" />
         <TextBlock
             Grid.Row="2"
             Grid.Column="1"
             Text="{x:Bind FileExplorerWindowViewModel.SelectedFile.CreationTime, Mode=OneWay}" />

         <TextBlock
             Grid.Row="3"
             FontWeight="Bold"
             Text="File size" />
         <TextBlock
             Grid.Row="3"
             Grid.Column="1"
             Text="{x:Bind FileExplorerWindowViewModel.SelectedFile.GetFormattedFileSize, Mode=OneWay}" />

         <!--  Button  -->
         <Button
             Grid.Row="4"
             Grid.ColumnSpan="2"
             HorizontalAlignment="Center"
             VerticalAlignment="Center"
             Command="{x:Bind FileExplorerWindowViewModel.StartSimulationCommand}"
             Content="Start simulation" />
     </Grid>

o course in my view model, I change visibility of the grid

 public partial class FileExplorerWindowViewModel(IServiceProvider serviceProvider) : ObservableObject {

     public ObservableCollection<FolderItem> FolderItems { get; set; } = FolderService.GetFolders();

     public ObservableCollection<GcodeItem>? GcodeItems { get; set; } = [];

     [ObservableProperty]
     public FolderItem? selectedFolderItem;

     [ObservableProperty]
     [NotifyPropertyChangedFor(nameof(DetailsPanelVisibility))]
     public GcodeItem? selectedFile;

     public Visibility DetailsPanelVisibility => SelectedFile is null
         ? Visibility.Collapsed
         : Visibility.Visible;

But I want I slide out effect animation that comes out from the right

when you click the item

Answer 1

Hello @Eduardo Gomez ,

Welcome to Microsoft Q&A!

If you only need to slide out the details bar when loading, then PaneThemeTransition is a good choice.

According to the gif you provided, it is recommended that you use RenderTransform and DoubleAnimation to implement the sliding of the right panel. It moves the right panel to the outside and then back to achieve the "sliding" effect. You can refer to this code.

 <Grid x:Name="rootContainer">
     <Grid.RowDefinitions>
         <RowDefinition Height="Auto" />
         <RowDefinition Height="*" />
         <RowDefinition Height="Auto" />
     </Grid.RowDefinitions>
     <Grid Grid.Row="1">
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="Auto" />
             <ColumnDefinition Width="*" />
             <ColumnDefinition Width="300" />
         </Grid.ColumnDefinitions>
         <!--  Placeholder for TreeView: Replace ListView with TreeView later  -->
         <!--  For TreeView, reintroduce SfTreeView and hierarchical structure  -->
         <ListView
             Padding="10"
             SelectionMode="Single">
         </ListView>
         <GridView
             Grid.Column="1"
             Padding="10"
             IsItemClickEnabled="True"
             SelectionMode="Single">
             <Button Content="Test" Click="Button_Click"/>
         </GridView>
         <Grid
             x:Name="SlidingGrid"
             Grid.Column="2"
             Padding="10"        
            
             Background="#49212121" >
             <Grid.RenderTransform>
                 <TranslateTransform x:Name="SlideTransform" X="300" />
             </Grid.RenderTransform>
             <Grid.RowDefinitions>
                 <RowDefinition Height="Auto" />
                 <RowDefinition Height="*" />
             </Grid.RowDefinitions>
             <Image
                 Grid.Row="0"
                 Margin="10"
                 HorizontalAlignment="Center"
                 Source="/Assets/gcode_Large.png" />
             <Grid Background="Green"  Grid.Row="1">
                 <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="*" />
                     <ColumnDefinition Width="*" />
                 </Grid.ColumnDefinitions>
                 <Grid.RowDefinitions>
                     <RowDefinition Height="Auto" />
                     <RowDefinition Height="Auto" />
                     <RowDefinition Height="Auto" />
                     <RowDefinition Height="Auto" />
                     <RowDefinition Height="*" />
                 </Grid.RowDefinitions>
                 <TextBlock
                     FontWeight="Bold"
                     Text="File name" />
                 <TextBlock
                     Grid.Column="1"
                     Text="BaseFileName" />
                 <TextBlock
                     Grid.Row="1"
                     FontWeight="Bold"
                     Text="File extention" />
                 <TextBlock
                     Grid.Row="1"
                     Grid.Column="1"
                     Text="FileExtention" />
                 <TextBlock
                     Grid.Row="2"
                     FontWeight="Bold"
                     Text="File creation" />
                 <TextBlock
                     Grid.Row="2"
                     Grid.Column="1"
                     Text="CreationTime" />
                 <TextBlock
                     Grid.Row="3"
                     FontWeight="Bold"
                     Text="File creation" />
                 <TextBlock
                     Grid.Row="3"
                     Grid.Column="1"
                     Text="FileSize" />
                 <Button  Grid.Row="5" Grid.ColumnSpan="2"     
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center"
                         Content="Start simulation" />
             </Grid>
         </Grid>
     </Grid>
 </Grid>

private bool isGridVisible = false;
private void Button_Click(object sender, RoutedEventArgs e)
{
    Storyboard storyboard = new Storyboard();
    DoubleAnimation slideAnimation = new DoubleAnimation
    {
        Duration = TimeSpan.FromSeconds(0.5), // Adjust duration for smoothness
        EasingFunction = new CubicEase { EasingMode = EasingMode.EaseInOut } // Optional easing for natural movement
    };
    if (!isGridVisible)
    {
        // Slide the grid into view
        slideAnimation.From = 300; // Start position off-screen
        slideAnimation.To = 0;     // End position on-screen
        isGridVisible = true;
    }
    else
    {
        // Slide the grid out of view
        slideAnimation.From = 0;   // Current position on-screen
        slideAnimation.To = 300; // Move it back off-screen
        isGridVisible = false;
    }
    // Apply the animation to the TranslateTransform
    Storyboard.SetTarget(slideAnimation, SlideTransform);
    Storyboard.SetTargetProperty(slideAnimation, "X");
    storyboard.Children.Add(slideAnimation);
    storyboard.Begin();
}

Thank you