I would like to add the image directly to the image box, so imgVarschaubild.Source = sa;
Unfortunately this does not work, how do I do it? Without which I have to save the picture first but must directly insert the picture?
My solution at the moment:
System.Drawing.Image sa;
....
if (saveFileDialog.ShowDialog() == true)
{
sa.Save(saveFileDialog.FileName);
MessageBox.Show(saveFileDialog.FileName);
ImageSource imageSource = new BitmapImage(new Uri(saveFileDialog.FileName));
imgVorschaubild.Source = imageSource;
}
System.Drawing.Image is a Windows Form class. You could try to convert it to a BitmapSource using any of the suggestions and code samples from here:
Show Drawing.Image in WPF
Once you have done that you could set the Source property of the Image element to the BitmapSource:
imgVorschaubild.Source = GetImageStream(sa);
It seem's like you are not using the MVVM pattern. I hardly recommend it.
If you use it you could easily bind your imagePath to an Image.
You just need a string property in your ViewModel and bind to it in your View like
<Image Source="{Binding ImagePath}" />
Related
I put crypto.png image into drawable folder under Resources in Android Project.
After I right click on the image -> Build Action -> Embedded Resource.
In MainPage.xaml on the main project I try to load the image like that:
<Image x:Name="HeadImage"
WidthRequest="100"
HeightRequest="100"
MinimumHeightRequest="100"
MinimumWidthRequest="100"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand"
Aspect="AspectFit"
Source="crypto.png"/>
But the image not load.
I try a second method like this in the c# code:
var HeadImage = new Image { Aspect = Aspect.AspectFit };
HeadImage.Source = ImageSource.FromFile("crypto.png");
And this method not worked again..
You need to let your image in drawable folder as Android Resource instead of Embedded Resource, and to use it, you need to:
HeadImage.Source = "crypto.png";
Also, before set the image, is a good practice to remove MinimumWidthRequest and MinimumHeightRequest. This is safe ONLY if you are sure the image have this minimum size. Otherwise, your image will not appear.
To know more about image in Xamarin, see here.
And to understand the difference between the ways of set an ImageSource see here.
I am trying to bind an imageSource within an ellipse on my XAML page to an ImageSource property in my ViewModel, as I am using MVVM approach in my project. I can confirm by breakpoints that the property in c# gets the image and gets filled, but for some odd reason it doesn't show up in XAML, and when I analyze source property with livepropertyExplorer in the blend, the source in ImageSource shows "0". Here is my code.
XAML
<Ellipse x:Name="ProfileImage" Style="{StaticResource ProfilePicStyle}">
<Ellipse.Fill>
<ImageBrush ImageSource="{x:Bind ViewModel.Banner, Mode=OneWay}"
Stretch="UniformToFill"/>
</Ellipse.Fill>
</Ellipse>
ViewModel
public AllVideosViewModel() : base()
{
//var bit = new BitmapImage();
//bit.UriSource = (new Uri("ms-appx:///Assets/Storelogo.png"));
//Banner = bit;
//Above 3 lines were test code and it works perfect and binding works in this case, but I want the binding as coded in the Initialize method below, because I want that image to bind with the thumbnails of the collection.
Initialize();
}
private async void Initialize()
{
var VideoFiles = (await KnownFolders.VideosLibrary.GetFilesAsync(CommonFileQuery.OrderByName)) as IEnumerable<StorageFile>;
foreach (var file in VideoFiles)
{
<...some code to fill grid view on the same XAML page which works perfect...>
Banner = await FileHelper.GetDisplay(file);//this method returns Image just fine because I am using the same method to display thumbnails on the same XAML page which work fine.
}
}
Thanks in advance.
UPDATE Sample project
sample project to test on github
A few things I have noticed in your code.
Your MainViewModel needs to implement INotifyPropertyChanged and your Banner property needs to raise the property changed event. This is why you don't see any image displayed on the UI.
You should use await bit.SetSourceAsync() instead of bit.SetSourceAsync() as it doesn't block the UI thread.
Since you are not using the Image control but the ImageBrush directly, you should set the decode size to how much you need so you don't waste memory there. Note the Image control does this for you automatically.
bit = new BitmapImage
{
DecodePixelWidth = 48,
DecodePixelHeight = 48
};
Hope this helps!
i have a image control in wpf like this
<Image x:Name="Img" Source="{Binding IsAsync=True}" />
i set the image by fetching from a url like this
Img.DataContext = ImageUrl;
it shows fine and when i want to clear it i just use
Img.DataContext=null;
for the same control i have a browse button as well to select the image from local path like this
BitmapImage image = new BitmapImage(new Uri(path));
Img.Source=image;
now i want to clear that as well so i do
Img.Source=null;
after that the control wont show the image from url only local images can be opened
Edit: probably i need to set the binding again after making source to null, not sure how to do that
You are abusing bindings horribly. Please stop.
<Image x:Name="Img" Source="{Binding IsAsync=True}" />
Says "Bind to the data context", which isn't all that great. Bind to a property of your view model, something like:
<Image x:Name="Img" Source="{Binding Path=ImageLocation, IsAsync=True}" />
And then only ever change the image using ImageLocation. At the very least, only set it via the DataContext.
Once you set the source to a binding, you should never be changing it via code-behind. Period. Do that, and your problem will "magically" disappear, as you are doing it the right way now.
To clear image control, clear image url.
e.g imgControlName.ImageUrl = "";
I have two .png files added to my resources which I need to access their Uri when doing binding.
My xaml code is as followed:
<Grid>
<Image>
<Image.Source>
<BitmapImage DecodePixelWidth="10" UriSource="{Binding Path=ImagePath}"/>
</Image.Source>
</Image>
</Grid>
and the binding code using ImagePath is:
ImagePath = resultInBinary.StartsWith("1") ? Properties.Resources.LedGreen : Properties.Resources.ledRed;
However
Properties.Resources.LedGreen
returns a Bitmap instead of String containing the Uri of that particular image.
I just want to know how to extract that value without a need to address a path of the image in the directory that it's stored. (Which honestly I am not sure is a right thing to do as I couldn't find any similar situation on the net).
Please let me know if there is even a preferred method to the one I am trying to use if available.
In a WPF application you would usually not store images in Properties/Resources.resx and access them by means of the Properties.Resources class.
Instead you just add the image files to your Visual Studio project as regular files, perhaps in a folder named "Images" or the like. Then you would set their Build Action to Resource, which is done in the Properties window. You get there e.g. by right-clicking the image file and select the Properties menu item. Note that the default value of the Build Action should be Resource for image files anyways.
In order to access these image resources from code you would then use a Pack URI. With the above folder name "Images" and an image file named "LedGreen.png", creating such an URI would look like this:
var uri = new Uri("pack://application:,,,/Images/LedGreen.png");
So you could perhaps declare your property to be of type Uri:
public Uri ImageUri { get; set; } // omitted INotifyPropertyChanged implementation
and set it like this:
ImageUri = resultInBinary.StartsWith("1")
? new Uri("pack://application:,,,/Images/LedGreen.png")
: new Uri("pack://application:,,,/Images/LedRed.png");
Finally your XAML should look like shown below, which relies on built-in type conversion from Uri to ImageSource:
<Grid>
<Image Width="10" Source="{Binding Path=ImageUri}" />
</Grid>
Declare the Properties.Resources.LedGreen property as ImageSource and set it to Uri location rather than the Bitmap object.
Or if you insist of storing it as a bitmap you can get the source by returning Properties.Resources.LedGreen.ImageSource which will be of type ImageSource.
I would prefer the first approach.
In the main window XAML I added resource Image my_image.
In the code, find its function FindResource
The function returns a non-null.
But inside the img.Source is empty.
What am I doing wrong?
//xaml
<Window.Resources>
<Image x:Key="my_image" Source="Properties/images/device1.png"/>
</Window.Resources>
//c# code
Image img=this.FindResource("my_image") as Image;
UPDATE:
The problem was solved by pointing assembly type as a resource.
And also had to create a new instance of the Image img_new.
And give it a Source of what has been obtained from resources.
Then to normal, we can work with img_new.
Image img=this.FindResource("my_image") as Image;
Image img_new=new Image();
img_new.Source=img.Source;
Change the Build Action of your device1.png to Resource from Content