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)
Related
I want to optimize the memory usage in my WPF app.
I want to load from the disk an jpg image and show it with its real size.
And then I want to show 5 cropped square section of the original image loaded from the disk.
(No resize is applied on any image).
I want to do all this by loading the original image once and sharing that data among the image controls, in such a way that no memory is wasted and all controls fetch data from the same memory location.
I tried by using a memory stream object but in the end due to some convertions between bitmap and bitmapimage I ended up copying the data.
I found an interesting way to crop an image from a BitmapImage here that I think will solve your problem. Doing it this way, you can display all of your images just using a single BitmapImage
In your xaml your full resolution image would just be a regular image element, but your cropped images would be a rectangle element using an image brush with a specific viewbox. Just define the rectangle with the height and width of the cropped image that you want, and then the viewbox is defined as "x y width height" (in my example it is "10 20 100 200") and remember that x starts at 0 for left and is positive moving right, and y starts at 0 for the top and is positive moving down.
<Image Source="{Binding Image}"></Image>
<Rectangle Height="200" Width="100">
<Rectangle.Fill>
<ImageBrush ViewboxUnits="Absolute" Viewbox="10,20,100,200" ImageSource="{Binding Image}"></ImageBrush>
</Rectangle.Fill>
</Rectangle>
Note that the binding for the Image and the ImageBrush are the same, so you only need to define Image once, and it is used across both elements.
I read this link How to TILE a background image in WinRT?
I need to have a background image for example 300*1000 pixel i have base image in 300*10 pixel and i want to repeat this base image for the background
i use this line and really TileMode is not in this version of Metro/XAML.
<ImageBrush ImageSource="ms-appx:///Assets/Note.png" Stretch="None" AlignmentY="Top" x:Name="my_image" >
i want to have to repeat "my_image" for 100times!
have can i do that? is there any idea?
thnak for your attention
I am trying to create a secondary tile that will display a string in it. I am building the app for windows phone 8.1. I have the following code for the tile but I would like the text in the center of the app:
SecondaryTile("TestTile",
numDays + " days",
tileActivationArguments,
blankPic,
TileSize.Square150x150);
Is there a way to accomplish this or to build an image from the text to display?
Solution:
XAML
<Grid x:Name="TextGrid" Width="150" Height="150" Background="Red">
<TextBlock x:Name="numDay" FontSize="36" />
</Grid>
C#
NumDay.Text = numDays + " days"
RenderTargetBitmap renderTargetBitmap = new RenderTargetBitmap();
await renderTargetBitmap.RenderAsync(TextGrid);
I used this code to create my image and then set it as background picture in SecondaryTile.
Creating custom tile with image is rougly done in these steps:
1) Render your image. WriteableBitmap class can render UIElement you pass to it:
WriteableBitmap wb = new WriteableBitmap(300, 300);
wb.Render(myGrid);
wb.Invalidate();
So you need to construct your tile from UI elements like container + controls. In your case it would be for example Grid (with max width) and aligned TextBlocks
2) Once you have this image, save it as PNG (for better quality) into folder
"isostore:/Shared/ShellContent/"
otherwise your tile cannot access it.
3) Now all you need to do is create StandardTileData and set BackgroundImage to your newly created image.
You can also download and use IsoStoreSpy while debugging. It can show you your phone's internal storage. So you can see whether and how the image been rendered.
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
I'm running into a problem of "jitters" when moving the X, Y coordinates of controls. Basically, I got an animation to work two different ways: 1) TranslateTransform of the X property, and 2) A Timer that calls Canvas.SetLeft. Both of which cause the image to move, but not smoothly.
XAML:
<Canvas Margin="0" Name="CanvasContainer">
<Canvas Margin="0" Name="FirstCanvas" Background="White">
<Image Name="FirstImage" Opacity="1" Margin="0,0,0,0" Canvas.Left="0" Canvas.Top="0" Source="someImage.png" />
</Canvas>
<Canvas Margin="0" Name="SecondCanvas" Background="DarkOrange">
<Image Name="SecondImage" Opacity="1" Margin="0,0,0,0" Canvas.Left="0" Canvas.Top="0" Source="anotherImage.png" />
</Canvas>
</Canvas>
TranslateTransform:
private void StartMovement(double startX, double endX, double milliseconds = 1000)
{
GuiDispatcher.Invoke(DispatcherPriority.Normal, new Action<Canvas, double, double, double>(MoveTo), Canvas, startX, endX, milliseconds);
}
private void MoveTo(Canvas canvas, double startX, double endX, double milliseconds)
{
canvas.RenderTransform = new TranslateTransform();
var animation = new DoubleAnimation(startX, endX, TimeSpan.FromMilliseconds(milliseconds));
canvas.RenderTransform.BeginAnimation(TranslateTransform.XProperty, animation);
}
Is there a better method for accomplishing this, or do I have something set up wrong? Any help would be appreciated.
Either of those methods are generally fine for animations in WPF. If the image isn't moving smoothly, I have a few of questions.
How big is the image?
Large images take longer to render, and will therefore not animate as well.
Are you rendering the image at its native resolution?
Like large images, scaling can slow down the render, as it takes longer to calculate the rendered pixels.
How good is your graphics card? And are your drivers up to date?
WPF uses your graphics card to render, unless it isn't good enough. If it has to fallback to software rendering, everything gets sluggish.
How far is the image moving?
The further the image moves, the fewer frames will be drawn per second, which could leave to the appearance of the animation being jerky.
If it is a framerate issue because the image is moving too far too quickly, you can increase the desired framerate by setting the Timeline.DesiredFrameRate property:
Timeline.SetDesiredFrameRate(animation, 120);;
In WPF, the default target framerate is 60, and is by no means guaranteed. But one of the primary uses for this attached property is to decrease horizontal tearing, so it might help.