RotateTransform Webview in Windows 8 Metro apps - c#

I'm facing issues in rotating the Webview control in Windows 8 metro Apps using RotateTransform on click of a button.
RotateTransform rt = new RotateTransform();
rt.CenterX = webView.Width / 2;
rt.CenterY = webView.Height / 2;
rt.Angle = 90;
webView.RenderTransform = rt;
As you can check, I'm rotating Webview to 90 degrees, but Webview is not rotating.
please refer:
http://social.msdn.microsoft.com/Forums/en-US/winappswithcsharp/thread/d25bb7bd-d7ac-4e15-a4ee-882bf21464da
Any help/solution/reason will be helpful for me?

WebViews are special and cannot be rotated in a XAML application. It's due to the fact that a WebView is an instance of Internet Explorer, which is an ActiveX component (likely still hosted that way) that cannot be rotated in the same way as XAML content. WebViews always are aligned to the rotation of the device. For what it's worth, WPF has a similar design limitation.
Depending on what you're trying to accomplish, an HTML based Win8 application might be a better choice as you can rotate HTML content using CSS3 transforms. Or, you might be able to rotate content inside of the browser in a XAML application as long as you didn't need anything but right angles (0, 90, 180, 270).

Since Windows 8.1 the WebView should be able to rotate.
<WebView x:Name="WebView1" RenderTransformOrigin="0.5,0.5">
<WebView.RenderTransform>
<CompositeTransform Rotation="30" ScaleX="1" ScaleY="1" SkewX="15" SkewY="0" />
</WebView.RenderTransform>
See: What’s new in WebView in Windows 8.1

Related

VLC.Dotnet.WPF control stretches portrait video. How can I get the control to not stretch the video

VLC.Dotnet.WPF control stretches portrait video. How can I get the control to not stretch the video. Landscape videos play fine, its when I have a video recorded on a phone e.g. .mov in portrait mode it stretches the video.
How can I play the video without being stretched? Is there an option I can pass through the CreatePlayer method?
.xaml
<Grid>
<vlc:VlcControl x:Name="MediaPlayerOne"
VerticalAlignment="Center"
HorizontalAlignment="Center" />
</Grid>
.cs
var currentAssembly = Assembly.GetEntryAssembly();
var currentDirectory = new FileInfo(currentAssembly.Location).DirectoryName;
// Default installation path of VideoLAN.LibVLC.Windows
var libDirectory = new DirectoryInfo(Path.Combine(currentDirectory, "libvlc", IntPtr.Size == 4 ? "win-x86" : "win-x64"));
MediaPlayerOne.SourceProvider.CreatePlayer(libDirectory);
MediaPlayerOne.SourceProvider.MediaPlayer.Play(new Uri("text.mov"));
You can try various aspect ratios like this
MediaPlayerOne.Video.AspectRatio = "4:3";
MediaPlayerOne.Video.AspectRatio = "16:9";
Either there is an issue here https://github.com/ZeBobo5/Vlc.DotNet/blob/develop/src/Vlc.DotNet.Wpf/VlcVideoSourceProvider.cs or libvlc doesn't send the correct ratio for the video (i.e. original dimensions before rotation, while you're expecting the opposite). Can you try to clone Vlc.DotNet and investigate further?

How to change orientation of one component in windows phone 8 page with locked orientation

I'm working on Windows Phone 8/8.1 C#/XAML .NET 4.5 Application and I'd like to know how to change orientation of just one control/item on page (rotate it 90 degrees).
I have a webBrowser on my portrait page (that stays locked on that orientation) and the webbrowser needs to be in landscape orientation (and does not rotate).
How can I set the webbrowser to be rotated 90 degrees and stay that way?
So, I've figured one way to do it on my own.
I'm going to put the answer as community wiki so that anyone who comes later can edit and add more options to do this.
The rotation transformation
One of the options is to rotate the element.
This is done by rotation transformation (answer combined from this ans this question).
It can be done in code behind:
//Create a transformation
RotateTransform rt = new RotateTransform();
//and set the rotation angle
rt.Angle = 90; //number of degrees to rotate clockwise
//for counterclockwise rotation use negative number
//default rotation is around top left corner of the control,
//but you sometimes want to rotate around the center of the control
//to do that, you need to set the RenderTransFormOrigin
//of the item you're going to rotate
//I did not test this approach, maybe You're going to need to use actual coordinates
//so this bit is for information purposes only
controlToRotate.RenderTransformOrigin = new Point(0.5,0.5);
//the name of the control is controlToRotate in this instance
controlToRotate.RenderTransform = rt;
Or in XAML:
the browser in this instance is taken from my own code and everything is set so that the item is rotated and takes the full place assigned to it
the browser is in the grid, positioned dynamically, the grid is named so that I can gain access to it simply
the browser needs to have width and height specified, in this case I'm taking it from the width and height of the grid, otherwise it is set automatically somehow and the result is pretty small somehow
The vertical and horizontal alignments are set to center so that the resulting rotation is centered too, otherwise it is not (in dynamic layout)
Code:
<Grid x:Name="ContentPanel">
<phone:WebBrowser x:Name="controlToRotate"
VerticalAlignment="Center"
HorizontalAlignment="Center"
RenderTransformOrigin=".5, .5"
Width="{Binding ElementName=ContentPanel, Path=ActualHeight}"
Height="{Binding ElementName=ContentPanel, Path=ActualWidth}">
<phone:WebBrowser.RenderTransform>
<RotateTransform Angle="90"/>
</phone:WebBrowser.RenderTransform>
</phone:WebBrowser>
</Grid>

Windows phone - draw graphics

I seem to be unable to figure out how to Draw graphics in a Windows phone app in C#.
I want to Draw e.g. a line. In old school Windows forms i add an event handler to the Windows paint event. And then use a GDI+ Graphics object. But there is no paint event in any controls?
So how do i draw a line on a canvas in a Windows phone app?
I think I need to clarify.
I want to create dynamic graphics and I want to use C#.
I want an update frequency arround 30 fps and I only need a few graphics elements approximately 100.
if you need a line, use the Line class:
<Page xmlns="whatever">
<Grid>
<Line X1="0" Y1="0" X2="10" Y2="10" Stroke="Blue" StrokeThickness="2"/>
</Grid>
</Page>
Other than that, refer to MSDN.
Forget whatever procedural paradigms you might have learned in archaic technologies. Modern technologies are declarative.
You start by adding Canvas to the form and then .Add() graphical objects to the canvas children - it makes the object scaled for you by the engine, which is kind of neat. Usually looks like this:
line = new **Line**();
line.Stroke = Brushes.Yellow;
line.X1 = 0;
line.Y1 = 0;
line.X2 = 100;
line.Y2 = 100;
line.StrokeThickness = 2;
yourCanvas.Children.**Add(line)**;
Just drop the **s from the code - they are for attention grabbing.
Actually, as I drew dynamic hypercubes, I have never used the XAML version, but if you need a static structure or even substructure XAML is the way to go. As I understand, Children.Add() dynamically creates node in the parsed XAML tree, that .NET keeps in memory. If you can not take slight performance hit for dynamicly positioned graphics that WPF imposes, you will have to stick with DirectX or OpenGL for better performance.
If you want low level access to draw 2D or 3D like when using DirectX you can take a look to SharpDX
There are some samples for Windows Phone in Github like:
MiniCube: Display a rotating cube in a DrawingSurfaceBackgroundGrid

How can I animate MatrixTransform.Matrix at center?

I am developing a WPF application that allows the user to use multi-touch to manipulate an image using the MatrixTransform.Matrix on RenderTransform. Using this very helpful snippet of code, I was able to animate it with a storyboard created in C#.
The trouble is that currentItem seems to always rotate and scale in relation to the top left hand corner.
How can I make it so it rotates around the center of the FrameworkElement?
Here is what I have so far, a basic example of using the animation:
Matrix fromMatrix = ((MatrixTransform)currentItem.RenderTransform).Matrix;
Matrix toMatrix = new MatrixTransform().Matrix;
//Making sure location of the toMatrix is in the same place as the fromMatrix
toMatrix.OffsetX = fromMatrix.OffsetX;
toMatrix.OffsetY = fromMatrix.OffsetY;
MatrixAnimation myDoubleAnimation = new MatrixAnimation();
myDoubleAnimation.From = fromMatrix;
myDoubleAnimation.To = toMatrix;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(.5));
Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
Storyboard.SetTarget(myDoubleAnimation, currentItem);
Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath("(FrameworkElement.RenderTransform).(MatrixTransform.Matrix)"));
myStoryboard.Begin(this);
I feel as though I need to add or subtract from the fromMatrix.OffsetY and fromMatrix.OffsetX. I have tried doing this with half the width/height of the currentItem, but this either puts it rotating and scaling around the center (good) OR twice as far away from the center (twice as bad), depending on which way I have the currentItem turned when it begins to animate.
Super late answer here - but I believe you just use the XAML attribute
RenderTransformOrigin="0.5, 0.5"
Place that on your XAML where the Transform is applied. Not really sure you need to do that in code-behind unless you built up that object in code.
Reference: RenderTransformOrigin from MS Docs

Animated Gif support for WP8

I have been trying to display an animated gif on my app (c# + xaml). Here its given that gif format is supported by WP8 then why is my gif not visible. Any idea how to make an animated gif run?
Most apps use the ImageTools library. It's a memory hog, but it works. Alternatively, you can try to embed a WebBrowser control in your app and have it load the animated gif.
The application Baconography is so far the only WP8 application I've heard of that uses a custom GIF renderer. The application is open-source, but I don't know if their license allows you to re-use the code in your own app. https://github.com/Synergex/Baconography
Another option as if you do not want to add a dependency is to modify the image so that each frame exists sequentially width ways and only show each frame at a time. So in the xaml:
<Canvas Grid.Column="0" Width="32" Height="32">
<Image x:Name="Image" Source="/Resources/animation.gif">
<Image.Clip>
<RectangleGeometry Rect="0 0 32 32"></RectangleGeometry>
</Image.Clip>
</Image>
</Canvas>
In C# in a timer only show a particular frame:
image.Clip = new RectangleGeometry {
Rect =
new Rect(
frame * width,
0,
width,
height)
};
Canvas.SetLeft(image, -1 * width * frame)
Where width is the width of each frame, height is the height of the image, and frame is the current position of the animation. The width and height should map the clipping in the xaml.
I just released a new library to display animated GIFs on WPF, Windows 8.1 and Windows Phone 8.1: https://github.com/XamlAnimatedGif/XamlAnimatedGif
Unlike ImageTools, it's very memory efficient because it only decodes the current frame on the fly and discards the previous frame (it's probably a bit more CPU-intensive, though)

Categories