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;
}
}
A pretty simple way to do this, would be to have a command fire from each of the buttons, whenever they are being clicked. The new page number that should be selected, could be sent to the command by passing a parameter to it.
In the Window we can create a binding to the command, so it receives notifications when a button is clicked, and we can then select the new page in the ListBox, which causes the animation to run.
I have written some code that demonstrates this, and just adds a little to what you have already:
view1.xaml
view2.xaml
view3.xaml
Window1.xaml
Window1.xaml.cs
Commands.cs