I am trying to create a pageFlip animation. Now on swipe gesture myStoryboard.Begin() is called.
The animation begins in code, but the screen doesn't show the animation happening. But if i switch away from the window and switch back (say 5 seconds after myStoryboard.Begin() was called then the animation is visible (from 5th second onwards) as though Storyboard was working as usual.
<Storyboard x:Name="myStoryboard">
<DoubleAnimation
Storyboard.TargetName= "RightPageImageOverlay"
Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)"
EnableDependentAnimation="True"
From="0" To="10" Duration="0:0:10" />
</Storyboard>
The Image :
<Grid Grid.Row="1" x:Name="flipViewGrid" >
<Canvas x:Name="flipViewCanvas" >
<WebView x:Name="flipViewWebView" NavigationCompleted="WebView_NavigationCompleted" Source="http://127.0.0.1:2121" Height="{Binding ElementName=flipViewCanvas, Path=ActualHeight}" Width="{Binding ElementName=flipViewCanvas, Path=ActualWidth}" Canvas.Left="0" Canvas.Top="0">
</WebView>
<StackPanel Orientation="Horizontal" Canvas.Left="0" Canvas.Top="0" Canvas.ZIndex="1">
<Image x:Name="LeftPageImageOverlay" Height="{Binding ElementName=flipViewCanvas, Path=ActualHeight}" Width="{Binding ElementName=flipViewCanvas, Path=ActualWidth }" Loaded="PageImageOverlay_Loaded" ></Image>
<Image x:Name="RightPageImageOverlay" Height="{Binding ElementName=flipViewCanvas, Path=ActualHeight}" Width="{Binding ElementName=flipViewCanvas, Path=ActualWidth }" Loaded="PageImageOverlay_Loaded" ManipulationMode ="All" ManipulationCompleted="RightPageImageOverlay_ManipulationCompleted" ManipulationDelta="RightPageImageOverlay_ManipulationDelta" >
<Image.Projection >
<PlaneProjection RotationY="0" CenterOfRotationX="0" x:Name="flipViewPlaneProjection"/>
</Image.Projection>
</Image>
</StackPanel>
</Canvas>
</Grid>
Update : I have expanded on the context of Image. How the code is supposed to work is as follows. When FlipViewWebView is loaded, 2 screenshots of the left and right half of the page are taken and laid over FlipViewWebView. When swipe gesture is detected, myStoryboard plays. Below is the code which triggers the page flip animation when I swipe.
private void RightPageImageOverlay_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
if (e.Velocities.Linear.X > .5 || e.Velocities.Linear.X < -.5) //say
if (myStoryboard.GetCurrentState() == Windows.UI.Xaml.Media.Animation.ClockState.Stopped)
myStoryboard.Begin();
Debug.WriteLine("Velocity : " + e.Velocities.Linear.X.ToString());
}
Update 2 :Another thing i noticed was that the flipping animation is visible if you swipe immediately after the page loads. But if you swipe say after a second or two, it is not visible.
I asked this on MSDN forums and they replied that there seems to be bugs involving PlaneProjection and that a report had been filed.
In the mean time, I have found a work-around. It seems the control being animated doesn't want to move away from 0 degrees.If you change the From value of DoubleAnimation to any value other than "0", say "0.01" it will work.
Related
So i have stacked canvasses and an image inside a scrollviewer that i can pan and scroll into using the mouse event, think Map with overlays.
<ScrollViewer Name="scrollViewer" Panel.ZIndex="99" Grid.Column="1"
VerticalScrollBarVisibility="Hidden"
HorizontalScrollBarVisibility="Hidden"
IsTabStop="False" Focusable="False">
<Grid Width="{Binding ElementName=map_image, Path=Width}"
Height="{Binding ElementName=map_image, Path=Height}"
VerticalAlignment="Center" HorizontalAlignment="Center"
RenderTransformOrigin="0.5,0.5">
<Grid.LayoutTransform>
<TransformGroup>
<ScaleTransform x:Name="zoomScale"/>
</TransformGroup>
</Grid.LayoutTransform>
<Grid x:Name="grid_draggable"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
Cursor="ScrollAll">
<Image x:Name="map_image"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Width="0"
Height="0"
Stretch="Fill"
Panel.ZIndex="1"
Visibility="Visible"/>
<Canvas x:Name="Canvas_complexPath"
Visibility="Collapsed"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
IsHitTestVisible="False"
Panel.ZIndex="7"/>
<Image x:Name="Bitmapforpath"
Visibility="Collapsed"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Panel.ZIndex="7"/>
<local:UCcustomCanvas x:Name="CustomPathCanvas"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Panel.ZIndex="7"/>
</Grid>
</Grid>
</ScrollViewer>
code for panning:
private void OnMouseMove(object sender, MouseEventArgs e)
{
if (lastDragPoint.HasValue)
{
Point posNow = e.GetPosition(scrollViewer);
double dX = posNow.X - lastDragPoint.Value.X;
double dY = posNow.Y - lastDragPoint.Value.Y;
lastDragPoint = posNow;
//check whether mouse is near border
if (sender != maingrid && mouse_near_border(posNow))
{
AutoMoveStart();
return;
}
map_drag[0] += Math.Abs(dX);
map_drag[1] += Math.Abs(dY);
scrollViewer.ScrollToHorizontalOffset(scrollViewer.HorizontalOffset - dX);
scrollViewer.ScrollToVerticalOffset(scrollViewer.VerticalOffset - dY);
}
}
All is smooth until i put a very large and complex path inside the canvas.
Then as soon as i zoom into the complex path, the map laggs when panning. As soon as the path is not in view anymore, panning is smooth again.
I can get smooth panning if i turn the canvas containing the path into a bitmap, but this is then dependent on the resolution of the bitmap. So RAMuse is going up if i want a large bitmap.
Is there another way using vector graphics?
I tried exchanging the canvas with path shapes for a image with GeometryGroup turned DrawingImage... this gives me a region inside the path where there is no lag.. no idea how this is determined.
i tried exchanging the canvas for a custom canvas with DrawingContext, but this behaves identical to alternative 1.
I know my CPU climbs up to 10+% for solution 1. as soon as lag happens, in the mysterious lag-free region CPU stays low 1-3%.
I read that WPF sometimes has issues with the Mousemove command, but i am not sure how to access the Scrollviewer internally to change that.
I am trying to make a smooth transition from a closed panel to an open panel and vice versa.
But I don't know how to do it ((
I have an element
<SplitView Style="{StaticResource SplitViewEditMusicTraskStyle}"
CompactPaneLength="0"
PaneBackground="Transparent"
DisplayMode="CompactInline"
IsPaneOpen="{Binding EditPanelIsOpen, Mode=TwoWay}"
OpenPaneLength="308"
Background="Transparent"
PanePlacement="Right">
I could not attach the standard element template because stackoverflov has a limit on the number of characters per stack
How to make a smooth transition from one state to another SplitView UWP
During the testing, if set PanePlacement right, for making SplitView panel open smoothly, please set DisplyMode as Overlay or CompactOverlay.
<SplitView x:Name="splitView" PaneBackground="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}"
IsPaneOpen="False" OpenPaneLength="328" CompactPaneLength="56" DisplayMode="CompactOverlay">
For your requirement, you could also make pop control and set ChildTransitions as PaneThemeTransition to archive smooth transition from a closed panel to an open panel. For more please refer following code.
Xaml code
<Popup
x:Name="RightMeun"
Width="200"
Height="{Binding ElementName=RootGrid, Path=ActualHeight}"
HorizontalAlignment="Right"
IsOpen="False">
<Popup.ChildTransitions>
<TransitionCollection>
<PaneThemeTransition Edge="Right" />
</TransitionCollection>
</Popup.ChildTransitions>
<Grid
Width="200"
Height="{Binding ElementName=RightMeun, Path=Height}"
Background="LightBlue">
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="Hello" />
</Grid>
</Popup>
I'm looking for a sample wizard control for UWP. I am looking for a control that uses forward and backward buttons to transition from one panel to the next.
I have tried to implement my own by animating the width of panels in a horizontally oriented StackPanel, but it doesn't work as expected (the width is not animated and reverts back).
<Page.Resources>
<Storyboard x:Name="GoToNextAnimation" Storyboard.TargetName="LeftPanel">
<DoubleAnimation Storyboard.TargetProperty="Width" From="100" To="0" AutoReverse="False" Duration="0:0:1" />
</Storyboard>
</Page.Resources>
<StackPanel Orientation="Horizontal" Width="100" Tapped="StackPanel_Tapped" Background="Red" Height="50">
<Button x:Name="LeftPanel" Background="Yellow" Width="100" Height="50" />
<Button x:Name="RightPanel" Background="Green" Width="100" Height="50" />
</StackPanel>
with the event handler beginning the animation:
bool isLeft = true;
private void StackPanel_Tapped(object sender, TappedRoutedEventArgs e)
{
if (isLeft)
{
GoToNextAnimation.Begin();
}
else
{
LeftPanel.Width = 100;
}
isLeft = !isLeft;
}
When I tep the control it briefly (much quicker than the animation is intended to run for) changes to the red color (background of StackPanel) before reverting back to yellow (*never showing the green for the RightPanel).
I am trying to create a user control similar to a stock ticker. It will slowly scroll the items to the left. So far I am unable to get something going because:
I am new to WPF/XAML and everywhere I search seems to apply to
silvelight
I am using an ItemTemplate within a ItemsControl, and cant find any
examples showing how to add a storyboard for a item within an item template.
here is my XAML:
<UserControl x:Class="WpfApplication.Ctrls.MessageTicker"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
xmlns:ctrls="clr-namespace:WpfApplication.Ctrls"
d:DesignHeight="300" d:DesignWidth="300">
<Grid Background="Honeydew">
<ItemsControl ItemsSource="{Binding}" Name="_items">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid x:Name="_panel">
<Grid.Triggers>
<EventTrigger RoutedEvent="Grid.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="(Grid.RenderTransform).(TranslateTransform.X)"
Storyboard.TargetName="_panel"
From="0"
To="360"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Path=Word}" Grid.Column="0" Margin="0" FontWeight="Normal" FontFamily="Segoe UI Semibold"/>
<TextBlock Text="{Binding Path=Percent}" Grid.Column="1" Margin="5,0,3,0" FontFamily="Segoe UI Mono" Foreground="Blue"/>
<Polygon Points="0,10 5,0 10,10" Stroke="Black" Fill="Green" Grid.Column="2" Margin="0,3,10,0"/>
<Polygon Points="5,10 10,0 0,0" Stroke="Black" Fill="Red" Grid.Column="2" Visibility="Collapsed"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</UserControl>
From what I have read, I should be putting the storyboard within the template. When I add a new item to the ItemsControl, nothing happens. I need to have it start at the end of the ItemsControl and scroll to the right all the way to the beginning of the ItemsControl.
Ok so you're close, but you're missing some key things that might explain why it's not firing as you'd expect.
So your first issue lies with how you're using _panel. We'll want to actually move that to an RenderTransform on this Grid that's acting as your parent.
So instead of;
<Grid x:Name="_panel">
We'll say;
<Grid>
<Grid.RenderTransform>
<TranslateTransform x:Name="_panel">
</Grid.RenderTransform>
...
Because your TargetProperty setting in your storyboard isn't going to magically append that Transform on demand like it looks you're thinking it might (at least I've never seen it done that way I don't think).
So we have that, now let's go talk to that Transform via your Storyboard and have it talk to an actual property of your Transform thusly;
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="X"
Storyboard.TargetName="_panel">
<SplineDoubleKeyFrame KeyTime="0:0:0" Value="360" />
</DoubleAnimation>
</Storyboard>
So what we're doing is basically saying "HEY _panel, guess what? You get to animate, and before you start I want you to know you're moving 360 across your X axis"
We could add a keytime here to make this happen over more keyframes to allow it to fill in the blanks of an actual animation sequence (your ticker anime, hint hint) but for now, we're just telling that bugger to move.
Other than that, you should work. Hope this helps, cheers.
Oh and PS, you'd be surprised how much XAML can work between WPF/SL/WP, etc. etc. if you just know the fundamentals. Best of luck!
I have a MediaElement object in my XAML, which loads my movie just fine. What I want to do is render the play, pause and stop buttons right in the center my MediaElement object, kind of like how if you embed a YouTube video on a web page, you get the big play button in the center of the video. Can I do this in WPF using MediaElement?
In case anyone else ever needs to do this, I figured it out. I simply created a Canvas and stuck the MediaElement and the Button both inside the Canvas. I then used ZIndex to change the ZOrdering so the button was on top. Finally, I centered the button on top of my movie. Here is the XAML:
<StackPanel Orientation="Horizontal" Background="LightGray" DockPanel.Dock="Bottom" Height="100">
<Canvas Width="100">
<Button Canvas.ZIndex="2" Canvas.Left="42" Canvas.Top="35">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Polygon Points="0,0 0,26 17,13" Fill="#80000000" Stroke="White" />
</ControlTemplate>
</Button.Template>
</Button>
<MediaElement Canvas.ZIndex="1" Canvas.Top="0" Canvas.Left="0"
x:Name="mediaElement1" UnloadedBehavior="Manual" LoadedBehavior="Manual" ScrubbingEnabled="True"
Loaded="mediaElement1_Loaded" Width="100" Height="100">
</MediaElement>
</Canvas>
</StackPanel>
Or you need to place mediaElement and Buttons to same Grid and set Canvas.ZIndex to higher number than 0:
<Grid>
<Button VerticalAlignment="Center" HorizontalAlignment="Center" Height="50" Width="100" Canvas.ZIndex="1">Button</Button>
<MediaElement Source="/Assets/ladybug.wmv">
</MediaElement>
</Grid>
(actually you don't need Canvas [works on UWP]):