We Keep Coding

Wrong images loaded

I was developing an UWP app. I am using UWP "Image" control to show images in my app. All images are loaded properly most of the time. But occasionally few images not loading properly. Sometimes it is loaded in cropped version and sometimes loaded a black box which is never set from app. My code to set image:
XAML:
<Image x:Name="FavoritePen"
Source="{Binding FavPenSource, Mode=OneWay}"
Height="44"
Width="44"
Margin="0,10,10,0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Stretch="Uniform"/>
CS:
private string favPenSource =
"ms-appx:///Assets/Images/NoteList/ic_main_tb_favorite_on.svg";
public string FavPenSource
{
get
{
return favPenSource;
}
set
{
SetProperty(ref favPenSource, value);
}
}
Black box loaded:
Wrong image loaded with cropped version:
Additionally, this is a very rare case, may be 1/100 frequency.
I googled and tried many solutions but it didn't help. I found that some people faced same issue but didn't find a proper solution yet. (Issue_1 , Issue_2, Issue_3 , Issue_4)
Can anyone please help me to solve the issue!!

Add View Box element, This is the x, y coordinates of the image inside the element along with the height and width. The default size is 300×150 size. Since I do not see the full container source, check if the SVG element is not beyond the parent container. You can remove the Horizontal/Vertical Alignment.

Sometimes it is loaded in cropped version and sometimes loaded a black box which is never set from app. My code to set image:
The problem is the svg file has been specified height and width property, when you render them with fix size image control, the svg content will display beyond the bound.
For this problem, please edit svg content and set it's height and width property as auto
<svg width="auto" height="auto" viewBox="0 0 469 476" version="1.1" xmlns="http://www.w3.org/2000/svg">

Find pixel width after Horizontal Stretch

I am using a third party control called TimelineTool for WPF and on load i want the timeline to stretch the width of the Grid column i have specified.
This is how a Timeline row is used:
<tt:TimeLineControl Height="115"
ItemTemplate="{StaticResource UsedTemplateProperty}"
HorizontalAlignment="Left"
x:Name="TimeLine2"
UnitSize="20"
MinimumUnitWidth="20"
Background="Blue"
DrawTimeGrid="True"
MinWidth="300"
SynchedWithSiblings="True" d:IsHidden="True" />
As you can see a MinWidth is set here and also HorizontalAlign="Left".
In the C# code I am retreiveing the MinWidth property from this element and using it as a startup width.
double setWidth = MinWidth;
Is it possible to set the MinWidth to the value of HorizontalAlign="Stretch"?

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)

Stretch image to fill available width / height (separately)

Is it any way to fill available width / height with image in xaml?
I need something like UniformToFill, but where I can control stretch direction (width or height)
Assume I have have following code:
<UniformGrid Columns="2" Rows="2">
<Image Source="Desert1.jpg" Stretch="Uniform"/> //
<Image Source="Desert2.jpg" Stretch="UniformToFill"/> //
<Image Source="Desert3.jpg" />
<Image Source="Desert4.jpg" />
</UniformGrid>
EDIT:
for examle (width): if image is half as wide as I want to show, I don't care about height and just scale x2 image height and width. So image must fit width, and don't care about height. It's desired behaviour, but if it's not possible - ok. So you can rethink question as IF it possible, HOW can I do it in xaml.
Also all images may have different width and height

I think that you might be able to get the effect you desire in certain conditions. If your images are all bigger than the size that they will be displayed, you could possibly use this:
<Image Source="Desert.jpg" Stretch="UniformToFill" StretchDirection="DownOnly" />
A ViewBox has the same Stretch properties as an Image and there is a good example of the differences between the different combinations in the How to: Apply Stretch Properties to the Contents of a Viewbox article on MSDN.

This might be what you are looking for...
TransformedBitmap
Here is a static method I made in an ImageUtility class.
public static TransformedBitmap GetScaledBitmapImageSprite(BitmapSource src, double x_scale, double y_scale)
{
return (new TransformedBitmap(src, new ScaleTransform(x_scale, y_scale)));
{
The x_scale and y_scale are doubles in the form of:
desired_width / original_width
Maybe a little different than what you are looking for but I think it can get you started on the right track.
You can store your TransformedBitmap in memory and apply new transforms through:
TransformedBitmap x = new TransformedBitmap();
x.Transform = new ScaleTransform(x,y);

You should use
<Image Source="{Binding Image}" Stretch="Fill"/>
like if you use Stretch="UnifrmtoFill" then it will change both length and width in a ratio or I say both together.
so if you use
Stretch="Fill", it gives you chance to change either height or width at a time whatever is changed.

Why is my image being displayed larger?

I'm trying to display an image on a splash screen and it's being stretched upon display. The image I'm trying to display is a simple bmp file. Any ideas why?
In SplashWindow.xaml:
<Window ... SizeToContent="WidthAndHeight">
<Grid>
...
<Image Grid.Row="0" Source="{Binding SplashImage}"></Image>
</Grid>
</Window>
In SplashViewModel.cs
public ImageSource SplashImage
{
get
{
return ImageUtilities.GetImageSource(_splashImageFilenameString);
}
}
From ImageUtilities.cs
public static ImageSource GetImageSource(string imageFilename)
{
BitmapFrame bitmapFrame = null;
if(!string.IsNullOrEmpty(imageFilename))
{
if(File.Exists(imageFilename))
{
bitmapFrame = BitmapFrame.Create(new Uri(imageFilename));
}
else
{
Debug.Assert(false, "File " + imageFilename + " does not exist.");
}
}
return bitmapFrame;
}

In your XAML, set the "Stretch" property to "None" (I believe it defaults to "Fill"):
<Image Grid.Row="0" Source="{Binding SplashImage}" Stretch="None"></Image>
You can also explicitly set the Width and Height properties if you like.

typically you want:
<Image Source="{Binding ImagePath}" Stretch="Uniform" />
this value will enlarge the image as much as possible while still fitting entirely within your parent control. It will not distort it, it will maintain the source's aspect ratio. If you use
Stretch="None"
it will display the image (or what fits of the image, it will clip) at it's native size which is not always what you want.
Anyhow, you have some choices but setting Stretch to what you want will effect the way the image stretches or not.

WPF doesn't display things in pixels (at least not on the surface). WPF displays things in device-independent units, specifically 1/96ths of an inch.
Image files have DPI/resolution information in their metadata which tells the computer how big that image is in inches. If your image file has been programmed to say it is 8 inches wide, that's going to be equal to 768 units in WPF, regardless of how many pixels the image is.
You can use an image editing program like Photoshop or equivalent to change the DPI of your image, or just give it an explicit Width and Height when you display it in WPF.