1

i'm using example take from project "japf_fr_slide_animation". i've added button to trigger appropriate page but is stuck and dont know how to trigger them. Here are all the pages to the referenced project with the added buttons. Can anyone help on how I can trigger the pages based on the button?

view1.xaml

<UserControl x:Class="FirstTry.view1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="300" Width="300">
    <Grid Background="LightBlue">
        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Top" Text="view1" />
        <Button Name="show2" Content="show second xaml" VerticalAlignment="Center" Width="150"></Button>
    </Grid>
</UserControl>

view2.xaml

<UserControl x:Class="FirstTry.view2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="300" Width="300">
    <Grid Background="LightCoral">
        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Top" Text="view2"/>
        <Button Name="show3" Content="show third xaml" VerticalAlignment="Center" Width="150"></Button>
    </Grid>
</UserControl>

view3.xaml

<UserControl x:Class="FirstTry.view3"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="300" Width="300">
    <Grid Background="LightGreen">
        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Top" Text="view3"/>
        <Button Name="show1" Content="show first xaml" VerticalAlignment="Center" Width="150"></Button>
    </Grid>
</UserControl>

Window1.xaml

<Window x:Class="FirstTry.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" SizeToContent="WidthAndHeight" ResizeMode="NoResize">

    <Window.Resources>
        <XmlDataProvider x:Key="views">
            <x:XData>
                <Views xmlns="">
                    <View Title="View1">
                        <Page Source="view1.xaml"/> 
                    </View>
                    <View Title="View2">
                        <Page Source="view2.xaml"/>
                    </View>
                    <View Title="View3">
                        <Page Source="view3.xaml"/>
                    </View>
                </Views>
            </x:XData>
        </XmlDataProvider>

        <Storyboard x:Key="slideLeftToRight"  
                    TargetProperty="RenderTransform.(TranslateTransform.X)"
                    AccelerationRatio=".4"
                    DecelerationRatio=".4">
            <DoubleAnimation Storyboard.TargetName="viewer" Duration="0:0:0.6" From="300" To="0"/>
            <DoubleAnimation Storyboard.TargetName="bordervisual" Duration="0:0:0.6" From="0" To="-300"/>
        </Storyboard>

        <Storyboard x:Key="slideRightToLeft" 
                    TargetProperty="RenderTransform.(TranslateTransform.X)"
                    AccelerationRatio=".4"
                    DecelerationRatio=".4">
            <DoubleAnimation Storyboard.TargetName="viewer" Duration="0:0:0.6" From="-300" To="0"/>
            <DoubleAnimation Storyboard.TargetName="bordervisual" Duration="0:0:0.6" From="0" To="300"/>
        </Storyboard>

        <VisualBrush x:Key="VisualBrush1" Visual="{Binding ElementName=viewer}"/>

    </Window.Resources>

    <Grid>
        <StackPanel>

            <StackPanel Orientation="Horizontal">
                <ListBox x:Name="viewList" Height="20" Width="300" SelectedIndex="0"
                    ItemsSource="{Binding Source={StaticResource views}, XPath=Views/View}"
                    DisplayMemberPath="@Title"                    
                    SelectionChanged="viewList_SelectionChanged">
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                </ListBox>
            </StackPanel>

            <Grid Width="300" Height="300">



                <Border x:Name="bordervisual" Width="300">
                    <Rectangle x:Name="rectanglevisual"/>
                    <Border.RenderTransform>
                        <TranslateTransform/>
                    </Border.RenderTransform>
                </Border>

                <ItemsControl x:Name="viewer" DataContext="{Binding Path=SelectedItem, ElementName=viewList}"
                    ItemsSource="{Binding XPath=Page}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Frame x:Name="frame" Source="{Binding XPath=@Source}"/>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                    <ItemsControl.RenderTransform>
                        <TranslateTransform/>
                    </ItemsControl.RenderTransform>
                </ItemsControl>
            </Grid>
        </StackPanel>       
    </Grid>
</Window>

Window1.xaml.cs

public partial class Window1 : Window
    {
        private static int oldSelectedIndex = 0;

        public Window1()
        {
            InitializeComponent();
        }

        public RenderTargetBitmap RenderBitmap(FrameworkElement element)
        {
            double topLeft = 0;
            double topRight = 0;
            int width = (int)element.ActualWidth;
            int height = (int)element.ActualHeight;
            double dpiX = 96; // this is the magic number
            double dpiY = 96; // this is the magic number

            PixelFormat pixelFormat = PixelFormats.Default;
            VisualBrush elementBrush = new VisualBrush(element);
            DrawingVisual visual = new DrawingVisual();
            DrawingContext dc = visual.RenderOpen();

            dc.DrawRectangle(elementBrush, null, new Rect(topLeft, topRight, width, height));
            dc.Close();

            RenderTargetBitmap bitmap = new RenderTargetBitmap(width, height, dpiX, dpiY, pixelFormat);

            bitmap.Render(visual);
            return bitmap;
        } 

        private void viewList_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            XmlElement root = (XmlElement)viewer.DataContext;
            XmlNodeList xnl = root.SelectNodes("Page");

            if (viewer.ActualHeight > 0 && viewer.ActualWidth > 0)
            {
                RenderTargetBitmap rtb = RenderBitmap(viewer);
                rectanglevisual.Fill = new ImageBrush(BitmapFrame.Create(rtb));
            }

            viewer.ItemsSource = xnl;

            if (oldSelectedIndex < viewList.SelectedIndex)
            {
                viewer.BeginStoryboard((Storyboard)this.Resources["slideLeftToRight"]);
            }
            else
            {
                viewer.BeginStoryboard((Storyboard)this.Resources["slideRightToLeft"]);
            }

            oldSelectedIndex = viewList.SelectedIndex;
        }
    }
4

1 回答 1

2

一个非常简单的方法是在每个按钮被点击时触发一个命令。应该选择的新页码可以通过向命令传递参数来发送给命令。

在 Window 中，我们可以创建与命令的绑定，以便在单击按钮时接收通知，然后我们可以在 ListBox 中选择新页面，这会导致动画运行。

我已经编写了一些代码来演示这一点，并且只是对您已经拥有的内容添加了一点：

view1.xml

<UserControl x:Class="FirstTry.view1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:FirstTry"
    Height="300" Width="300">
    <Grid Background="LightBlue">
        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Top" Text="view1" />

        <!-- Button fires command with the value 1 as next pageindex --> 
        <Button Name="show2" Content="show second xaml" VerticalAlignment="Center" Width="150"
                Command="{x:Static local:Commands.SlideToPage}" CommandParameter="1"></Button>
    </Grid>
</UserControl>

view2.xml

<UserControl x:Class="FirstTry.view2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:FirstTry"
    Height="300" Width="300">
    <Grid Background="LightCoral">
        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Top" Text="view2"/>

        <!-- Button fires command with the value 2 as next pageindex -->
        <Button Name="show3" Content="show third xaml" VerticalAlignment="Center" Width="150"
                Command="{x:Static local:Commands.SlideToPage}" CommandParameter="2 </Button>
    </Grid>
</UserControl>

view3.xaml

<UserControl x:Class="FirstTry.view3"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:FirstTry"
    Height="300" Width="300">
    <Grid Background="LightGreen">
        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Top" Text="view3"/>

        <!-- Button fires command with the value 0 as next pageindex -->
        <Button Name="show1" Content="show first xaml" VerticalAlignment="Center" Width="150"
                Command="{x:Static local:Commands.SlideToPage}" CommandParameter="0"></Button>
    </Grid>
</UserControl>

Window1.xaml

<Window x:Class="FirstTry.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:FirstTry"
        Title="MainWindow" SizeToContent="WidthAndHeight" ResizeMode="NoResize">
    <Window.CommandBindings>
        <!-- Make the window listen for the SlideToPage command -->
        <CommandBinding Command="{x:Static local:Commands.SlideToPage}"
                        CanExecute="SlideToPage_CanExecute"
                        Executed="SlideToPage_Executed" />
    </Window.CommandBindings>

    <Window.Resources>
        <XmlDataProvider x:Key="views">
            <x:XData>
                <Views xmlns="">
                    <View Title="View1">
                        <Page Source="view1.xaml"/> 
                    </View>
                    <View Title="View2">
                        <Page Source="view2.xaml"/>
                    </View>
                    <View Title="View3">
                        <Page Source="view3.xaml"/>
                    </View>
                </Views>
            </x:XData>
        </XmlDataProvider>

        <Storyboard x:Key="slideLeftToRight"  
                    TargetProperty="RenderTransform.(TranslateTransform.X)"
                    AccelerationRatio=".4"
                    DecelerationRatio=".4">
            <DoubleAnimation Storyboard.TargetName="viewer" Duration="0:0:0.6" From="300" To="0"/>
            <DoubleAnimation Storyboard.TargetName="bordervisual" Duration="0:0:0.6" From="0" To="-300"/>
        </Storyboard>

        <Storyboard x:Key="slideRightToLeft" 
                    TargetProperty="RenderTransform.(TranslateTransform.X)"
                    AccelerationRatio=".4"
                    DecelerationRatio=".4">
            <DoubleAnimation Storyboard.TargetName="viewer" Duration="0:0:0.6" From="-300" To="0"/>
            <DoubleAnimation Storyboard.TargetName="bordervisual" Duration="0:0:0.6" From="0" To="300"/>
        </Storyboard>

        <VisualBrush x:Key="VisualBrush1" Visual="{Binding ElementName=viewer}"/>
    </Window.Resources>

    <Grid>
        <StackPanel>

            <StackPanel Orientation="Horizontal">
                <ListBox x:Name="viewList" Height="20" Width="300" SelectedIndex="0"
                    ItemsSource="{Binding Source={StaticResource views}, XPath=Views/View}"
                    DisplayMemberPath="@Title"                    
                    SelectionChanged="viewList_SelectionChanged">
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                </ListBox>
            </StackPanel>

            <Grid Width="300" Height="300">
                <Border x:Name="bordervisual" Width="300">
                    <Rectangle x:Name="rectanglevisual"/>
                    <Border.RenderTransform>
                        <TranslateTransform/>
                    </Border.RenderTransform>
                </Border>

                <ItemsControl x:Name="viewer" DataContext="{Binding Path=SelectedItem, ElementName=viewList}"
                    ItemsSource="{Binding XPath=Page}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Frame x:Name="frame" Source="{Binding XPath=@Source}"/>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                    <ItemsControl.RenderTransform>
                        <TranslateTransform/>
                    </ItemsControl.RenderTransform>
                </ItemsControl>
            </Grid>
        </StackPanel>       
    </Grid>
</Window>

Window1.xaml.cs

public partial class Window1 : Window
{
    private static int oldSelectedIndex = 0;

    public Window1()
    {
        InitializeComponent();
    }

    public RenderTargetBitmap RenderBitmap(FrameworkElement element)
    {
        double topLeft = 0;
        double topRight = 0;
        int width = (int)element.ActualWidth;
        int height = (int)element.ActualHeight;
        double dpiX = 96; // this is the magic number
        double dpiY = 96; // this is the magic number

        PixelFormat pixelFormat = PixelFormats.Default;
        VisualBrush elementBrush = new VisualBrush(element);
        DrawingVisual visual = new DrawingVisual();
        DrawingContext dc = visual.RenderOpen();

        dc.DrawRectangle(elementBrush, null, new Rect(topLeft, topRight, width, height));
        dc.Close();

        RenderTargetBitmap bitmap = new RenderTargetBitmap(width, height, dpiX, dpiY, pixelFormat);

        bitmap.Render(visual);
        return bitmap;
    }

    private void viewList_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        XmlElement root = (XmlElement)viewer.DataContext;
        XmlNodeList xnl = root.SelectNodes("Page");

        if (viewer.ActualHeight > 0 && viewer.ActualWidth > 0)
        {
            RenderTargetBitmap rtb = RenderBitmap(viewer);
            rectanglevisual.Fill = new ImageBrush(BitmapFrame.Create(rtb));
        }

        viewer.ItemsSource = xnl;

        if (oldSelectedIndex < viewList.SelectedIndex)
        {
            viewer.BeginStoryboard((Storyboard)this.Resources["slideLeftToRight"]);
        }
        else
        {
            viewer.BeginStoryboard((Storyboard)this.Resources["slideRightToLeft"]);
        }

        oldSelectedIndex = viewList.SelectedIndex;
    }

    private void SlideToPage_CanExecute(object sender, CanExecuteRoutedEventArgs e)
    {
        //The command can always be executed
        e.CanExecute = true;
    }

    private void SlideToPage_Executed(object sender, ExecutedRoutedEventArgs e)
    {
        //When the command is executed, we find the new pagenumber passed as a parameter
        //and switch the selected item of the ListBox, so the animation will run.
        int pagenumber = 0;

        if (int.TryParse(e.Parameter.ToString(), out pagenumber))
        {
            viewList.SelectedIndex = pagenumber;
        }
    } 
}

命令.cs

using System;
using System.Windows.Input;

namespace FirstTry
{
    public static class Commands
    {
        public static readonly RoutedCommand SlideToPage = new RoutedCommand();
    }
}
于 2012-10-29T21:53:45.957 回答