如何使用按钮触发合适的xaml页面

Question

我使用示例来自项目“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; 
     } 
    } 

Answer 1

一个非常简单的方法来做到这一点，将有来自每个按钮的命令火灾，被点击每当他们。应该选择的新页面号可以通过传递参数发送给命令。

在窗口中，我们可以创建一个绑定到命令，因此当单击按钮时它会收到通知，然后我们可以选择ListBox中的新页面，这会导致动画运行。

我已经写了一些代码，演示了这一点，只是增加了一点点，你有什么已经：

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