The customized controls have two images, a background and a foreground image. I use the following code to display the controls. This function is called twice, once for background image displaying and then for the foreground image displaying
BitmapImage src = new BitmapImage();
src.BeginInit();
src.UriSource = new Uri(imgpath, UriKind.Absolute);
src.CacheOption = BitmapCacheOption.OnLoad;
src.EndInit();
ImageBrush ib = new ImageBrush(src);
ib.Viewbox = new Rect(UVRectangle.X / src.PixelWidth, UVRectangle.Y / src.PixelHeight, UVRectangle.Width / src.PixelWidth, UVRectangle.Height / src.PixelHeight);
Image image = new Image();
image.Source = ib.ImageSource;
gr.Children.Add(image); //gr is of type Grid
The buttons are displayed perfectly but I realized that their alignment is incorrect. When I place one button right below another button, the one below appears to be shifted to the right.
This problem of alignment is rectified by changing
Image image = new Image();
image.Source = ib.ImageSource;
gr.Children.Add(image);
to
gr.Background = ib;
But, this makes the foreground image completely cover the background image like I had asked here
What should I do to prevent this alignment problem? Also, what is causing this problem in the first place?
Did you try putting the buttons inside stackpanel? http://msdn.microsoft.com/en-us/library/system.windows.controls.stackpanel.aspx
Related
I have problem with setting Image Source property... So I tried use every variation of this code and for some reason it won't work.
When I set property manually it works, but when I want to change picture in code it is just blank.
`BitmapImage` bm = new BitmapImage();
bm.UriSource=new Uri(this.BaseUri,#"\\Assets\logo6.png");
this.image.Source = image;
I use this code inside of button event so I can change picture inside image control.
you are setting the path in wrong way. try any of these two options it will work.
Also make sure your image property Build Action is should set to Content and Copy To OutPut Directory to Copy to newer or Copy Always
BitmapImage bm = new BitmapImage();
bm.UriSource = new Uri(#"\Assets\Tiles\IconicTileSmall.png",UriKind.Relative);
image.Source = bm;
And
BitmapImage bm = new BitmapImage();
bm.UriSource = new Uri("\\Assets\\Tiles\\IconicTileSmall.png",UriKind.Relative);
image.Source = bm;
Basically you are mixing these two ways.
I am developing a WPF application, a messenger client. The user should be able to change his avatar image. When he right-clicks his avatar, a open file dialog appears and there he can select the image he wants. After he has made his decision I delete his current avatar and copy the new one in the same place with the same name. The avatar image is a rectangle with an imagebrush fill. The problem is that the image does not update until I restart the application. Here is the piece of code used to load the new image.
if (x.ShowDialog() == true)
{
ImageBrush img = new ImageBrush();
BitmapImage bit = new BitmapImage();
Bitmap bmp = new Bitmap(x.FileName);
System.IO.File.Delete(System.IO.Directory.GetCurrentDirectory() + "/data/images/avatar/x.png");
bmp.Save(System.IO.Directory.GetCurrentDirectory() + "/data/images/avatar/x.png", System.Drawing.Imaging.ImageFormat.Png);
bit.BeginInit();
bit.CacheOption = BitmapCacheOption.OnLoad;
bit.UriSource = new Uri(#"pack://siteoforigin:,,,/data/images/avatar/x.png");
bit.EndInit();
img.ImageSource = bit;
ProfileImage.Fill = img;
}
I hope you can help me solve this issue or offer me some alternatives. Thank you all!
In order to make BitmapImage reload the image file (with identical file path), you could set the BitmapCreateOptions.IgnoreImageCache option:
bit.BeginInit();
bit.CreateOptions = BitmapCreateOptions.IgnoreImageCache;
bit.CacheOption = BitmapCacheOption.OnLoad;
bit.UriSource = new Uri(#"pack://siteoforigin:,,,/data/images/avatar/x.png");
bit.EndInit();
img.ImageSource = bit;
After looking for the answer in both Microsoft documentation and forums, I am at a loss. I am loading a png image as a background for an inkCanvas (WPF) which works fine, however, it always resizes the image to fit in the canvas, despite the image size..
Here was my last attempt with no success:
BitmapImage ii = new BitmapImage(new Uri(path));
Image img = new Image();
img.Stretch = Stretch.None;
img.Source = ii;
InkCanvas1.Background = new ImageBrush(ii);
Here is what it looks like using Stretch.None and Stretch.Fill
Here is what I am trying to achieve:
Can this be done?
The problem is that you're trying to set properties on an Image object that you're not using while ignoring the same settings on the ImageBrush that you are using. The Image in this case is just being thrown away and the ImageBrush just happens to be using the same source image. Set the Stretch property on the ImageBrush instead:
BitmapImage ii = new BitmapImage(new Uri(path));
ImageBrush imageBrush = new ImageBrush(ii);
imageBrush.Stretch = Stretch.Uniform;
InkCanvas1.Background = imageBrush;
I'm new to WPF. I was programming for Windows Forms Applications, and there was Picture Box with Image property. But in WPF there is Image instead of Picture Box. How to get it's value? I mean the image data.
you can do that by using Image.Source property.
You will find a lot of samples on internet about it. For example code below sets image source, you can get the image similarly
Image myImage3 = new Image();
BitmapImage bi3 = new BitmapImage();
bi3.BeginInit();
bi3.UriSource = new Uri("smiley_stackpanel.PNG", UriKind.Relative);
bi3.EndInit();
myImage3.Stretch = Stretch.Fill;
myImage3.Source = bi3;
//get the source
BitmapImage imgSource = myImage3.Source;
I would like to display an image composed of two images.
I want image rectangle.png to show with image sticker.png on top of it with its left-hand corner at pixel 10, 10.
Here is as far as I got, but how do I combine the images?
Image image = new Image();
image.Source = new BitmapImage(new Uri(#"c:\test\rectangle.png"));
image.Stretch = Stretch.None;
image.HorizontalAlignment = HorizontalAlignment.Left;
Image imageSticker = new Image();
imageSticker.Source = new BitmapImage(new Uri(#"c:\test\sticker.png"));
image.OverlayImage(imageSticker, 10, 10); //how to do this?
TheContent.Content = image;
You need a Panel to add both Image controls to. A Grid or Canvas will allow this, but I would go with the Grid as it will constrain the Image controls (thereby stretching or shrinking them as appropriate).
Image image = new Image();
image.Source = new BitmapImage(new Uri(#"c:\test\rectangle.png"));
image.Stretch = Stretch.None;
image.HorizontalAlignment = HorizontalAlignment.Left;
Image imageSticker = new Image();
imageSticker.Source = new BitmapImage(new Uri(#"c:\test\sticker.png"));
imageStiker.Margin = new Thickness(10, 10, 0, 0);
Grid grid = new Grid();
grid.Children.Add(image);
grid.Children.Add(imageSticker);
TheContent.Content = grid;
You can just put one Image control over the top of the other Image control in your View. Place both into a Grid or Canvas, and just overlay one of the images on top of the other. This also lets you using opacity to do blending, and works very well.
If you need to get them into the same image, there are a couple of options....
You could make a WritableBitmap out of the first image, then manually "paint" the other image pixels on top of the first one. This then can act as an image source for your image in the display.
Alternatively, you could do the overlay I mentioned above, and render this into a RenderTargetBitmap. This could then be used as your image source.