C # WPF Frame จะสร้างเอฟเฟกต์สไลด์บนหน้าได้อย่างไร?

ฉันต้องการสร้างเอฟเฟกต์สไลด์หน้าบน WPF, Frame control ไปเลย.

ก่อนอื่นฉันใส่กรอบและปุ่ม 2 ปุ่มสำหรับการนำทาง:

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

จากนั้น ฉันสร้างเพจ 3 หน้าด้วยสีที่ต่างกัน: Page1.xaml, Page2.xaml และ Page3.xaml

ตอนนี้เมื่อคลิกปุ่มนำทาง ระบบจะนำทางไปยัง uri:

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

เสร็จแล้ว. ตอนนี้ฉันต้องการให้แต่ละหน้าสไลด์เมื่อนำทาง (ใครๆ ก็ต้องการ) ดังนั้นแผนของฉันคือตั้งค่า Loaded EventTrigger ของทุกหน้า:

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

และมันก็ได้ผล! ทุกอย่างเป็นไปด้วยดีจนกระทั่งฉันพบว่าหน้าต่างๆ ไม่ต่อเนื่องกัน หมายความว่าเมื่อคุณไปที่หน้าที่ 2 หน้าที่ 1 จะยกเลิกการโหลดทันที แทนที่จะเริ่มเหตุการณ์ที่โหลดหน้าที่ 2 ฉันพยายามตั้งค่าเหตุการณ์ยกเลิกการโหลดของ page1 แต่ไม่ได้ผล

สิ่งที่อยากได้คือเมื่อเพจ1เริ่มออก หน้า2ก็ควรจะขึ้นเวทีทันทีเหมือนรถไฟทีละคน

แล้วจะทำยังไงล่ะ? ขอบคุณ.


c# wpf slide
person Oh My Dog    schedule 08.01.2016    source แหล่งที่มา
comment
codeproject.com/Articles/197132/Simple-WPF-Page-Transitions< /ก>   -  person Joby James    schedule 08.01.2016

คำตอบ (1)


arrow_upward
5
arrow_downward

ฉันได้ทำมันโดยใช้แยก Frame ต่อ Page ราวกับว่าเราพยายามแสดงหน้าเว็บใหม่ในเว็บไซต์ มันเป็นไปไม่ได้เลยหากไม่มีกลอุบายบางอย่าง เป็นกรณีเดียวกันที่นี่ และสำหรับเอฟเฟกต์การเลื่อน StackPanel กับ Orientation=Horizontal ก็ดูโอเค

หมายเหตุ : ในรูปแบบ Frame ฉันได้ใช้ main Grid(Grd) เพื่อตั้งค่าความกว้าง เนื่องจากเมื่อเราเพิ่มลูกๆ (Frame ใหม่) ลงใน StackPanel ความกว้างจะเพิ่มขึ้น

คุณสามารถต่อยอดแนวคิดนี้ได้

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

รหัสอยู่ข้างหลัง

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);          
        }

การเลื่อนหน้าโดยใช้ stackpanel

person AnjumSKhan    schedule 08.01.2016