Results 1 to 3 of 3

Thread: [RESOLVED] Help WPF Slide Transition Effect between Views

  1. #1

    Thread Starter
    Addicted Member
    Join Date
    Jan 2010
    Posts
    250

    Resolved [RESOLVED] Help WPF Slide Transition Effect between Views

    Hi master

    I know WPF doesn't support MDI anymore, and I know you need to build from scratch.
    Trick to implement MDI is by using change view for each MDI child form.

    I know by using transition slide you can change view on MainForm.Xml
    And I know a lot of reference in internet about this subject, but I couldn't find anywhere which using VB.NET as sample project
    Can someone give me example on how make slide transition effect for change view but in VB.NET language ?
    I heard Fluidkit plugin support for this transition effect, but still in C# language which I am not familiar

    Thank you

    Regards

  2. #2

    Thread Starter
    Addicted Member
    Join Date
    Jan 2010
    Posts
    250

    Re: Help WPF Slide Transition Effect between Views

    dear Master,

    after searching and searching on internet, i almost figure this out. By some references from expert I manage to design 'MDI' and show the child form in mainform. What i want is show animation when child form shown on mainform (slide transition effect).
    On my project I have :
    1. mainwindow.xaml
    2. page1.xaml (usercontrol)

    the XAML for mainwindow as follow :

    Code:
    <Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
        <Grid HorizontalAlignment="Left" Height="38" VerticalAlignment="Top" Width="525" Margin="0,0,-8,0">
            <Grid.Resources>
                <Storyboard x:Key="TransformImage">
                    <DoubleAnimation
            Storyboard.TargetName="page1"
            Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)"
            By="100" Duration="0:0:3">
                    </DoubleAnimation>
                </Storyboard>
            </Grid.Resources>
            <Grid.Triggers>
                <EventTrigger RoutedEvent="Button.Click" SourceName="btnClick">
                    <BeginStoryboard Storyboard="{StaticResource TransformImage}"/>
                </EventTrigger>
            </Grid.Triggers>
            
            <StackPanel x:Name="Stk" HorizontalAlignment="Left" Height="281" Margin="-1,40,0,-283" VerticalAlignment="Top" Width="519"/>
            <Button x:Name="btnClick" Content=" Show Child" HorizontalAlignment="Left" Margin="10,10,0,6" Width="75" Click="Button_Click"/>
        </Grid>
    </Window>
    I want to show page1.xaml using slide transition effect, but I got error when I pressed BtnClick where page1.xaml not exist within mainform.xaml

    Please help me.

    regards

  3. #3

    Thread Starter
    Addicted Member
    Join Date
    Jan 2010
    Posts
    250

    Re: Help WPF Slide Transition Effect between Views

    Finally i manage to make transition effect on my project by applying MahApps.Metro TransitioningContentControl. Here what I did on XAML :

    Code:
      <Controls:MetroWindow x:Class="MainWindow"
                              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                              xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
                              Title="MainWindow" 
                              Height="350" 
                              Width="525">
        
            <Grid Margin="0,40,0,0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <StackPanel HorizontalAlignment="Left" Height="32" Margin="1,-37,0,0" VerticalAlignment="Top" Width="379">
                    <Button x:Name="btnClick" Content="Show" HorizontalAlignment="Left" Height="14" Margin="10,0,0,0" Width="71"/>
                </StackPanel>
        
                <Controls:TransitioningContentControl x:Name="transitioning" Transition="Left"   Margin="0,0,0,0" />
        
            </Grid>
        </Controls:MetroWindow>
    And the code behind as follow

    Code:
      Imports MahApps.Metro.Controls
        Partial Public Class MainWindow
        
            Private Sub btnClick_Click(sender As Object, e As RoutedEventArgs) Handles btnClick.Click
                Dim pageww As New page1
                transitioning.Content = pageww
            End Sub
        End Class
    Maybe can be useful for anyone like to apply transition effect on project
    N.B : still I want to find out the hard way by using storyboard and trigger

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width