C# WPF Frame bagaimana cara membuat efek slide pada halaman?

Saya ingin membuat efek slide halaman di WPF, kontrol Bingkai. Ini dia.

Pertama-tama, saya memasang bingkai dan 2 tombol untuk navigasi:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="25"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="25"/>
    </Grid.ColumnDefinitions>
    <Frame x:Name="frame" Source="page1.xaml" Grid.Column="1" />
    <Button Grid.Column="0" Content="&lt;" Click="GoPrevious"/>
    <Button Grid.Column="2" Content="&gt;" Click="GoNext"/>
</Grid>

Lalu saya membuat 3 Halaman dengan warna berbeda: Page1.xaml, Page2.xaml dan Page3.xaml

sekarang ketika mengklik tombol navigasi, cukup navigasikan ke uri:

frame.Navigate(new Uri("page2.xaml", UriKind.Relative));

Selesai. Sekarang saya ingin membuat setiap halaman meluncur saat dinavigasi (semua orang menginginkannya). Jadi rencana saya adalah mengatur Loaded EventTrigger setiap halaman:

<Page.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard>
            <Storyboard>
                <ThicknessAnimation Duration="0:0:0.75" Storyboard.TargetProperty="Margin" From="500,0,-500,0" To="0" />
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
    <EventTrigger RoutedEvent="FrameworkElement.Unloaded">
        <BeginStoryboard>
            <Storyboard>
                <ThicknessAnimation Duration="0:0:0.75" Storyboard.TargetProperty="Margin" From="0" To="-500,0,500,0" />
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</Page.Triggers>

Dan itu berhasil! Semuanya berjalan baik-baik saja sampai saya menemukan halaman-halaman tersebut tidak berkesinambungan, artinya, ketika Anda menavigasi ke halaman2, halaman1 akan segera dibongkar, kemudian memulai acara pemuatan halaman2. Saya mencoba mengatur acara unload halaman1, tetapi tidak berhasil.

Yang saya inginkan adalah, ketika halaman1 mulai keluar, halaman2 harusnya langsung naik ke panggung, seperti kereta api satu per satu.

Jadi bagaimana cara melakukannya? Terima kasih.


c# wpf slide
person Oh My Dog    schedule 08.01.2016    source sumber
comment
codeproject.com/Articles/197132/Simple-WPF-Page-Transitions   -  person Joby James    schedule 08.01.2016

Jawaban (1)


arrow_upward
5
arrow_downward

Saya telah melakukannya menggunakan Frame per Page terpisah. Seolah-olah kita mencoba menampilkan halaman web baru di sebuah situs web, hal itu tidak mungkin dilakukan tanpa menggunakan beberapa trik. Hal yang sama juga terjadi di sini. Dan untuk efek geser, StackPanel dengan Orientation=Horizontal terlihat oke.

Catatan : Dalam gaya Bingkai, saya telah menggunakan Grid utama (Grd) untuk mengatur lebar, karena ketika kita menambahkan anak (Bingkai baru) ke StackPanel, Lebarnya akan bertambah.

Anda dapat mengembangkan konsep ini.

<Grid Background="#FF33CF2C" x:Name="Grd">
    <StackPanel x:Name="StkPnl" Orientation="Horizontal">
        <StackPanel.Resources>
            <Style TargetType="Frame">
                <Setter Property="Margin" Value="0,50,0,0"/>
                <Setter Property="Width" Value="{Binding ActualWidth, ElementName=Grd}"/>
                <Setter Property="NavigationUIVisibility" Value="Hidden"/>
            </Style>                
        </StackPanel.Resources>
        <Frame x:Name="FramePage1" Source="/WpfNavigation;component/Sliding/Page1.xaml" />
    </StackPanel>
    <Button Content="Goto Page2" HorizontalAlignment="Left" Margin="114,18,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click">
        <Button.Triggers>
            <EventTrigger RoutedEvent="ButtonBase.Click">
                <BeginStoryboard>
                    <Storyboard Storyboard.TargetName="FramePage1" Storyboard.TargetProperty="Margin">
                        <ThicknessAnimation To="-2000 , 50 , 0, 0" Duration="0:0:5"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Button.Triggers>
    </Button>
</Grid>

di belakang kode

private void Button_Click(object sender, RoutedEventArgs e)
        {
            Frame f = new Frame();
            f.Source = new Uri("pack://application:,,,/Sliding/Page2.xaml", UriKind.Absolute);

            StkPnl.Children.Add(f);          
        }

Menggeser halaman menggunakan stackpanel

person AnjumSKhan    schedule 08.01.2016