I am trying to stream a desktop screen from one PC to another. I've started with just sending an image first which was really easy. My next thought was to just display the image using WPF and by continuously editing the saved image I would have a live stream of the desktop. After trying this I noticed that editing an image that is currently being used results in an exception.
The process cannot access the file 'D:\Desktop\ConsoleApp1\WpfApp1\img\Bild1.jpeg' because it is being used by another process.
So when I tried using two different images that would just swap every time, the same exception kept appearing.
The code below deletes the unbound image and creates a new file that will be bound to an Image.
// The Image that is currently not binded will be deleted with the code below
if (img1){
if (File.Exists("./../../img/Bild2.jpeg"))
{
File.Delete("./../../img/Bild2.jpeg");
}
}
else
{
if (File.Exists("./../../img/Bild1.jpeg"))
{
File.Delete("./../../img/Bild1.jpeg");
}
}
// This code save the Image
if (File.Exists("../../img/Bild1.jpeg")) // Image1 exists so I am editing image2
{
bmp.Save("../../img/Bild2.jpeg", ImageFormat.Jpeg);
ms.Position = 0;
FileInfo fi = new FileInfo("../../img/Bild2.jpeg");
ImageBind = fi.FullName; // Image Bind is a string property which is binded to a Image Tag
img1 = false; // To check which img has been edited last
}
else if (File.Exists("../../img/Bild2.jpeg"))
{
bmp.Save("./../../img/Bild1.jpeg", ImageFormat.Jpeg);
ms.Position = 0;
FileInfo fi = new FileInfo("../../img/Bild1.jpeg");
ImageBind = fi.FullName;
img1 = true;
}
else // If neither Image1 or Image2 exists
{
bmp.Save("../../img/Bild1.jpeg", ImageFormat.Jpeg);
ms.Position = 0;
FileInfo fi = new FileInfo("../../img/Bild1.jpeg");
ImageBind = fi.FullName;
img1 = true;
}
I do not think that copying and swapping images is the right approach for live desktop streaming in many ways, but that is another question. I will only focus on the exception that you get.
The image files that you assign by file path to Image are locked until the application is shut down. In order to change that, you have to change caching options of the underlying BitmapImage.
You can create a value converter to do this, so you can keep the ImageBind property as string.
public class PathToBitmapSourceConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var bi = new BitmapImage();
var uriString = (string)value;
bi.BeginInit();
bi.UriSource = new Uri(uriString, UriKind.RelativeOrAbsolute);
bi.CacheOption = BitmapCacheOption.OnLoad;
bi.CreateOptions = BitmapCreateOptions.IgnoreImageCache;
bi.EndInit();
return bi;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new InvalidOperationException();
}
}
This code will convert your file path to a BitmapImage. The OnLoad and IgnoreImageCache will prevent the image from being locked. From the documentation:
OnLoad - Caches the entire image into memory at load time. All requests for image data are filled from the memory store.
IgnoreImageCache - Loads images without using an existing image cache. This option should only be selected when images in a cache need to be refreshed.
In your XAML you have to create an instance of the converter in any resource dictionary and adapt the binding of your Image to use the converter, assuming its key is PathToBitmapSourceConverter.
<Image Source="{Binding ImageBind, Converter={StaticResource PathToBitmapSourceConverter}}" ... />
I have some problems while trying to serialize an object containing a BitmapSource field.
In fact, at the beginning, I had an ImageSource but it seems not to be serializable.
So I tried to use the associated property to store a string and to convert & convert back the image to/from the string.but no image is displayed now :-(
here is the XAML image tag:
<Image
x:Name="bookCover"
Grid.Row="0"
Grid.RowSpan="1"
Grid.Column="0"
MaxWidth="200"
MaxHeight="320"
Margin="5"
Source="{Binding Image}" SizeChanged="bookCover_SizeChanged" >
</Image>
here is the Image property & field in the model class:
public string _image;
public BitmapSource Image
{
get => Base64ToImage(_image);
set
{
_image =ImageToBase64(value);
OnPropertyChanged("Image");
}
}
and their associated methods:
public static string ImageToBase64(BitmapSource bitmap)
{
var encoder = new JpegBitmapEncoder();
var frame = BitmapFrame.Create(bitmap);
encoder.Frames.Add(frame);
using (var stream = new MemoryStream())
{
encoder.Save(stream);
return Convert.ToBase64String(stream.ToArray());
}
}
public static BitmapSource Base64ToImage(string base64)
{
byte[] bytes = Convert.FromBase64String(base64);
using (var stream = new MemoryStream(bytes))
{
return BitmapFrame.Create(stream);
}
}
and here my program retrieves an image from internet via its URI and stores it:
var myUri=new Uri(book0.LargeImage.URL);
bookToInsert.Image = new BitmapImage(myUri);
thank you.
When you create a BitmapSource from a stream that is closed immediately after creation, you have to set BitmapCacheOption.OnLoad. Otherwise the stream would have to be kept open until the BitmapSource is actually used, e.g. displayed in an Image element.
public static BitmapSource Base64ToImage(string base64)
{
using (var stream = new MemoryStream(Convert.FromBase64String(base64)))
{
return BitmapFrame.Create(
stream, BitmapCreateOptions.None, BitmapCacheOption.OnLoad);
}
}
A couple of notes:
base64 encoding and decoding seems unnecessary. Better serialize a byte array.
Do not initially create a BitmapImage from the URL. Better directly get the image buffer by a web request.
You can bind the Source property of an Image element not only to an ImageSource, but also to a string, Uri or byte array. So your property may be declared as byte[] Image.
Try a much simpler view model like this:
public class ViewModel : INotifyPropertyChanged
{
private byte[] image;
public byte[] Image
{
get => image;
set
{
image = value;
OnPropertyChanged(nameof(Image));
}
}
}
and set the Image property like this:
var webClient = new WebClient();
viewModel.Image = webClient.DownloadData(book0.LargeImage.URL);
Or asynchronously:
var httpClient = new HttpClient();
viewModel.Image = await httpClient.GetByteArrayAsync(book0.LargeImage.URL);
I am trying to display an image from a StorageFile after selecting it from a FilePicker. Since the Source of an Image has to be either a URI or an ImageSource, I am trying to get either of those from the StorageFile.
I am having a hard time getting data binding to work on an Image in XAML. I have tried the following:
<Image Width="300"
Height="300"
x:Name="LogoImage">
<Image.Source>
<BitmapImage UriSource="{Binding ImagePath}" />
</Image.Source>
</Image>
This way doesn't work, as the Path property of a StorageFile is not a URI. Also, I can't bind directly to the StorageFile itself, as it is not an ImageSource.
I tried to use this method:
public async Task<Image> GetImageAsync(StorageFile storageFile)
{
BitmapImage bitmapImage = new BitmapImage();
FileRandomAccessStream stream = (FileRandomAccessStream)await storageFile.OpenAsync(FileAccessMode.Read);
bitmapImage.SetSource(stream);
Image image = new Image();
image.Source = bitmapImage;
return image;
}
But, it returns a Task<Image>, which is also not an ImageSource or URI. It seems like it should be something more straightforward than what I am trying to do, but I am just not seeing it. Also, I have tried just specifying a file in the XAML for the Image.Source and it works fine. I just haven't been able to link it up based on the selected file from the FilePicker.
My ultimate goal is: select a file from FilePicker, update the ImageSource of the displayed Image, encode to base64 for storage in database. Then later, load existing base64 string from database, convert back to Image to be displayed.
Edit:
I was able to accomplish this task using the solution I posted below. Thanks in great part to Jerry Nixon's blog post: http://blog.jerrynixon.com/2014/11/reading-and-writing-base64-in-windows.html
The best solution would be to set the source in code behind instead of using a binding as it would let you handle things like cancellation in case the ImagePath gets updated while the previous image is still loading.
Alternatively, you could create a bitmap, start a task of loading it and return before that task is complete, e.g.
public Image GetImage(StorageFile storageFile)
{
var bitmapImage = new BitmapImage();
GetImageAsync(bitmapImage, storageFile);
// Create an image or return a bitmap that's started loading
var image = new Image();
image.Source = bitmapImage;
return image ;
}
private async Task GetImageAsync(BitmapImage bitmapImage, StorageFile storageFile)
{
using (var stream = (FileRandomAccessStream)await storageFile.OpenAsync(FileAccessMode.Read))
{
await bitmapImage.SetSource(stream);
}
}
If anyone else comes across this question looking for an answer, what I ultimately ended up doing for my situation, is take the StorageFile that is selected from the FilePicker, encode that as a base64 string (which I will save to my database for later retrieval).
Once I have the base64 string, I can decode that string into an ImageSource to set in code-behind. Here is my full ButtonClick event handler:
private async void ChooseImage_Click(object sender, RoutedEventArgs e)
{
var filePicker = new FileOpenPicker();
filePicker.FileTypeFilter.Add(".jpg");
filePicker.ViewMode = PickerViewMode.Thumbnail;
filePicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
filePicker.SettingsIdentifier = "picker1";
filePicker.CommitButtonText = "Open File to Process";
var files = await filePicker.PickMultipleFilesAsync();
if (files.Count > 0)
{
// encode the storage file to base64
var base64 = await Encoding.ToBase64(files[0]);
// asynchronously save base64 string to database
// ...
// decode the base64 and set the image source
LogoImage.Source = await Encoding.FromBase64(base64);
}
}
The base64 encoding/decoding I found at the great Jerry Nixon's blog here: http://blog.jerrynixon.com/2014/11/reading-and-writing-base64-in-windows.html
I have a WinRT app that takes pictures and displays them in an Image. The first picture correctly takes and displays the Image. However, subsequent pictures, which are set to overwrite the original picture, throw an UnauthorizedAccessException with ACCESSDENIED. I'm also binding the Image source to the Uri of the student. I'm also positive the binding is what is causing the issue in that WinRT doesn't like me replacing a file that is currently in use. I've tried setting the source to null before the file replace, etc, but that is not working. What is an elegant way to handle this? Also note that I bind this file on the page before this one also and I needed to remove the binding on that page also in order to avoid the error.
private async void btnTakePic_Click(object sender, RoutedEventArgs e)
{
await CameraCapture();
}
private async Task CameraCapture()
{
CameraCaptureUI camUI = new CameraCaptureUI();
camUI.PhotoSettings.AllowCropping = true;
camUI.PhotoSettings.MaxResolution = CameraCaptureUIMaxPhotoResolution.MediumXga;
camUI.PhotoSettings.CroppedAspectRatio = new Size(4, 3);
Windows.Storage.StorageFile imageFile = await camUI.CaptureFileAsync(CameraCaptureUIMode.Photo);
if (imageFile != null)
{
IRandomAccessStream stream = await imageFile.OpenAsync(FileAccessMode.Read);
BitmapImage bitmapCamera = new BitmapImage();
bitmapCamera.SetSource(stream);
// Use unique id for image name since name could change
string filename = student.StudentID + "Photo.jpg";
await imageFile.MoveAsync(ApplicationData.Current.LocalFolder, filename, NameCollisionOption.ReplaceExisting);
student.UriPhoto = new Uri(string.Format("ms-appdata:///local/{0}", filename), UriKind.Absolute);
}
}
Here is the binding portion just for fun:
<Image x:Name="imgStudent" Grid.Row="0" Width="400" Height="300" Margin="15" Grid.ColumnSpan="2">
<Image.Source>
<BitmapImage DecodePixelWidth="200" UriSource="{Binding UriPhoto}" />
</Image.Source>
</Image>
Ok, well after several hours of research, I've concluded that it is near impossible to bind to a Uri, and the alternative is to bind a BitmapImage. I couldn't find the exact reason, but it has something to do with the fact that using a Uri leaves the BitmapImage open and binding quickly breaks this paradigm. The solution is to bind the BitmapImage and set the BitmapImage to a stream, which seems to support binding quite well.
I liked the idea of the Uri since its easily seriliazable, while the BitmapImage is more difficult and takes up significantly more space (since you are serializing the picture data as opposed to a link). The solution that I decided on and that works is to serialize the Uri, and use the OnDeserialized attribute to create the BitmapImage on startup. I then needed a method/event to reset the BitmapImage whenever the Uri changed.
Here's the final code to recap:
private async Task CameraCapture()
{
CameraCaptureUI camUI = new CameraCaptureUI();
camUI.PhotoSettings.AllowCropping = true;
camUI.PhotoSettings.MaxResolution = CameraCaptureUIMaxPhotoResolution.MediumXga;
camUI.PhotoSettings.CroppedAspectRatio = new Size(4, 3);
Windows.Storage.StorageFile imageFile = await camUI.CaptureFileAsync(CameraCaptureUIMode.Photo);
if (imageFile != null)
{
// Use unique id for image name since name could change
string filename = student.StudentID + "Photo.jpg";
// Move photo to Local Storate and overwrite existing file
await imageFile.MoveAsync(ApplicationData.Current.LocalFolder, filename, NameCollisionOption.ReplaceExisting);
// Open file stream of photo
IRandomAccessStream stream = await imageFile.OpenAsync(FileAccessMode.Read);
BitmapImage bitmapCamera = new BitmapImage();
bitmapCamera.SetSource(stream);
student.BitmapPhoto = bitmapCamera // BitmapImage
// Save Uri to photo since we can serialize this and re-create BitmapPhoto on startup/deserialization
student.UriPhoto = new Uri(string.Format("ms-appdata:///local/{0}", filename), UriKind.Absolute);
}
}
And the new XAML binding to the student BitmapImage
<Image x:Name="imgStudent" Source="{Binding BitmapPhoto}" Grid.Row="0" Width="400" Height="300" Margin="15" Grid.ColumnSpan="2"/>
I'm trying to set a WPF image's source in code. The image is embedded as a resource in the project. By looking at examples I've come up with the below code. For some reason it doesn't work - the image does not show up.
By debugging I can see that the stream contains the image data. So what's wrong?
Assembly asm = Assembly.GetExecutingAssembly();
Stream iconStream = asm.GetManifestResourceStream("SomeImage.png");
PngBitmapDecoder iconDecoder = new PngBitmapDecoder(iconStream, BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.Default);
ImageSource iconSource = iconDecoder.Frames[0];
_icon.Source = iconSource;
The icon is defined something like this: <Image x:Name="_icon" Width="16" Height="16" />
After having the same problem as you and doing some reading, I discovered the solution - Pack URIs.
I did the following in code:
Image finalImage = new Image();
finalImage.Width = 80;
...
BitmapImage logo = new BitmapImage();
logo.BeginInit();
logo.UriSource = new Uri("pack://application:,,,/AssemblyName;component/Resources/logo.png");
logo.EndInit();
...
finalImage.Source = logo;
Or shorter, by using another BitmapImage constructor:
finalImage.Source = new BitmapImage(
new Uri("pack://application:,,,/AssemblyName;component/Resources/logo.png"));
The URI is broken out into parts:
Authority: application:///
Path: The name of a resource file that is compiled into a referenced assembly. The path must conform to the following format: AssemblyShortName[;Version][;PublicKey];component/Path
AssemblyShortName: the short name for the referenced assembly.
;Version [optional]: the version of the referenced assembly that contains the resource file. This is used when two or more referenced assemblies with the same short name are loaded.
;PublicKey [optional]: the public key that was used to sign the referenced assembly. This is used when two or more referenced assemblies with the same short name are loaded.
;component: specifies that the assembly being referred to is referenced from the local assembly.
/Path: the name of the resource file, including its path, relative to the root of the referenced assembly's project folder.
The three slashes after application: have to be replaced with commas:
Note: The authority component of a pack URI
is an embedded URI that points to a
package and must conform to RFC 2396.
Additionally, the "/" character must
be replaced with the "," character,
and reserved characters such as "%"
and "?" must be escaped. See the OPC
for details.
And of course, make sure you set the build action on your image to Resource.
var uriSource = new Uri(#"/WpfApplication1;component/Images/Untitled.png", UriKind.Relative);
foo.Source = new BitmapImage(uriSource);
This will load a image called "Untitled.png" in a folder called "Images" with its "Build Action" set to "Resource" in an assembly called "WpfApplication1".
This is a bit less code and can be done in a single line.
string packUri = "pack://application:,,,/AssemblyName;component/Images/icon.png";
_image.Source = new ImageSourceConverter().ConvertFromString(packUri) as ImageSource;
Very easy:
To set a menu item's image dynamically, only do the following:
MyMenuItem.ImageSource =
new BitmapImage(new Uri("Resource/icon.ico",UriKind.Relative));
...whereas "icon.ico" can be located everywhere (currently it's located in the 'Resources' directory) and must be linked as Resource...
Simplest way:
var uriSource = new Uri("image path here");
image1.Source = new BitmapImage(uriSource);
This is my way:
internal static class ResourceAccessor
{
public static Uri Get(string resourcePath)
{
var uri = string.Format(
"pack://application:,,,/{0};component/{1}"
, Assembly.GetExecutingAssembly().GetName().Name
, resourcePath
);
return new Uri(uri);
}
}
Usage:
new BitmapImage(ResourceAccessor.Get("Images/1.png"))
You can also reduce this to one line. This is the code I used to set the Icon for my main window. It assumes the .ico file is marked as Content and is being copied to the output directory.
this.Icon = new BitmapImage(new Uri("Icon.ico", UriKind.Relative));
Have you tried:
Assembly asm = Assembly.GetExecutingAssembly();
Stream iconStream = asm.GetManifestResourceStream("SomeImage.png");
BitmapImage bitmap = new BitmapImage();
bitmap.BeginInit();
bitmap.StreamSource = iconStream;
bitmap.EndInit();
_icon.Source = bitmap;
If your image is stored in a ResourceDictionary, you can do it with only one line of code:
MyImage.Source = MyImage.FindResource("MyImageKeyDictionary") as ImageSource;
Here is an example that sets the image path dynamically (image located somewhere on disc rather than build as resource):
if (File.Exists(imagePath))
{
// Create image element to set as icon on the menu element
Image icon = new Image();
BitmapImage bmImage = new BitmapImage();
bmImage.BeginInit();
bmImage.UriSource = new Uri(imagePath, UriKind.Absolute);
bmImage.EndInit();
icon.Source = bmImage;
icon.MaxWidth = 25;
item.Icon = icon;
}
Reflections on Icons...
First thought, you would think that the Icon property can only contain an image. But it can actually contain anything! I discovered this by accident when I programmatically tried to set the Image property directly to a string with the path to an image. The result was that it did not show the image, but the actual text of the path!
This leads to an alternative to not have to make an image for the icon, but use text with a symbol font instead to display a simple "icon". The following example uses the Wingdings font which contains a "floppydisk" symbol. This symbol is really the character <, which has special meaning in XAML, so we have to use the encoded version < instead. This works like a dream! The following shows a floppydisk symbol as an icon on the menu item:
<MenuItem Name="mnuFileSave" Header="Save" Command="ApplicationCommands.Save">
<MenuItem.Icon>
<Label VerticalAlignment="Center" HorizontalAlignment="Center" FontFamily="Wingdings"><</Label>
</MenuItem.Icon>
</MenuItem>
There's also a simpler way. If the image is loaded as a resource in the XAML, and the code in question is the code-behind for that XAML content:
Uri iconUri = new Uri("pack://application:,,,/ImageNAme.ico", UriKind.RelativeOrAbsolute);
NotifyIcon.Icon = BitmapFrame.Create(iconUri);
Put the frame in a VisualBrush:
VisualBrush brush = new VisualBrush { TileMode = TileMode.None };
brush.Visual = frame;
brush.AlignmentX = AlignmentX.Center;
brush.AlignmentY = AlignmentY.Center;
brush.Stretch = Stretch.Uniform;
Put the VisualBrush in GeometryDrawing
GeometryDrawing drawing = new GeometryDrawing();
drawing.Brush = brush;
// Brush this in 1, 1 ratio
RectangleGeometry rect = new RectangleGeometry { Rect = new Rect(0, 0, 1, 1) };
drawing.Geometry = rect;
Now put the GeometryDrawing in a DrawingImage:
new DrawingImage(drawing);
Place this on your source of the image, and voilà!
You could do it a lot easier though:
<Image>
<Image.Source>
<BitmapImage UriSource="/yourassembly;component/YourImage.PNG"></BitmapImage>
</Image.Source>
</Image>
And in code:
BitmapImage image = new BitmapImage { UriSource="/yourassembly;component/YourImage.PNG" };
There's also a simpler way. If the image is loaded as a resource in the XAML, and the code in question is the codebehind for that XAML:
Here's the resource dictionary for a XAML file - the only line you care about is the ImageBrush with the key "PosterBrush" - the rest of the code is just to show context
<UserControl.Resources>
<ResourceDictionary>
<ImageBrush x:Key="PosterBrush" ImageSource="..\Resources\Images\EmptyPoster.jpg" Stretch="UniformToFill"/>
</ResourceDictionary>
</UserControl.Resources>
Now, in the code behind, you can just do this
ImageBrush posterBrush = (ImageBrush)Resources["PosterBrush"];
How to load an image from embedded in resource icons and images (corrected version of Arcturus):
Suppose you want to add a button with an image. What should you do?
Add to project folder icons and put image ClickMe.png here
In properties of 'ClickMe.png', set 'BuildAction' to 'Resource'
Suppose your compiled assembly name is 'Company.ProductAssembly.dll'.
Now it's time to load our image in XAML
<Button Width="200" Height="70">
<Button.Content>
<StackPanel>
<Image Width="20" Height="20">
<Image.Source>
<BitmapImage UriSource="/Company.ProductAssembly;component/Icons/ClickMe.png"></BitmapImage>
</Image.Source>
</Image>
<TextBlock HorizontalAlignment="Center">Click me!</TextBlock>
</StackPanel>
</Button.Content>
</Button>
Done.
I am a new to WPF, but not in .NET.
I have spent five hours trying to add a PNG file to a "WPF Custom Control Library Project" in .NET 3.5 (Visual Studio 2010) and setting it as a background of an image-inherited control.
Nothing relative with URIs worked. I can not imagine why there is no method to get a URI from a resource file, through IntelliSense, maybe as:
Properties.Resources.ResourceManager.GetURI("my_image");
I've tried a lot of URIs and played with ResourceManager, and Assembly's GetManifest methods, but all there were exceptions or NULL values.
Here I pot the code that worked for me:
// Convert the image in resources to a Stream
Stream ms = new MemoryStream()
Properties.Resources.MyImage.Save(ms, ImageFormat.Png);
// Create a BitmapImage with the stream.
BitmapImage bitmap = new BitmapImage();
bitmap.BeginInit();
bitmap.StreamSource = ms;
bitmap.EndInit();
// Set as source
Source = bitmap;
You just missed a little bit.
To get an embedded resource from any assembly, you have to mention the assembly name with your file name as I have mentioned here:
Assembly asm = Assembly.GetExecutingAssembly();
Stream iconStream = asm.GetManifestResourceStream(asm.GetName().Name + "." + "Desert.jpg");
BitmapImage bitmap = new BitmapImage();
bitmap.BeginInit();
bitmap.StreamSource = iconStream;
bitmap.EndInit();
image1.Source = bitmap;
If you already have a stream and know the format, you can use something like this:
static ImageSource PngStreamToImageSource (Stream pngStream) {
var decoder = new PngBitmapDecoder(pngStream,
BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.Default);
return decoder.Frames[0];
}
Here is if you want to locate it next to your executable (relative from the executable)
img.Source = new BitmapImage(new Uri(AppDomain.CurrentDomain.BaseDirectory + #"\Images\image.jpg", UriKind.Absolute));
Force chose UriKind will be correct:
Image.Source = new BitmapImage(new Uri("Resources/processed.png", UriKind.Relative));
UriKind options:
UriKind.Relative // relative path
UriKind.Absolute // exactly path