1

プロジェクト「japf_fr_slide_animation」からの例を使用しています。適切なページをトリガーするボタンを追加しましたが、スタックしていて、トリガーする方法がわかりません。これが、ボタンが追加された参照プロジェクトのすべてのページです。ボタンに基づいてページをトリガーする方法を教えてもらえますか？

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

これを行う非常に簡単な方法は、ボタンがクリックされるたびに、各ボタンからコマンドを起動することです。選択する必要のある新しいページ番号は、パラメーターをコマンドに渡すことでコマンドに送信できます。

ウィンドウでは、コマンドへのバインディングを作成できるため、ボタンがクリックされたときに通知を受け取り、リストボックスで新しいページを選択してアニメーションを実行できます。

私はこれを実証するいくつかのコードを書きました、そしてあなたがすでに持っているものに少しだけ追加します：

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"
    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.xaml

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

Commands.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 に答える