I want to show an image in a Grid
Only the image shows when I use this XAML:
<Image Source="/Assets/O.png"
Grid.Column="6"
Grid.Row="5"/>
In C# it shows the picture with a border outside:
Image img = new Image();
BitmapImage bi = new BitmapImage();
bi.UriSource = new Uri("/Assets/O.png", UriKind.Relative);
img.Stretch = Stretch.Fill;
img.Source = bi;
Grid.SetColumn(img, 6);
Grid.SetRow(img, 7);
gridGameBoard.Children.Add(img);
Image img1 = new Image();
img1.Source = new System.Windows.Media.Imaging.BitmapImage(new Uri("/Assets/X.png", UriKind.Relative));
Grid.SetColumn(img1, 4);
Grid.SetRow(img1, 4);
gridGameBoard.Children.Add(img1);
I tried googling to find any differences between BitmapImage and other Image types but was unsuccessful.
The problem is the Stretch property of your Image. In XAML, you do not define it, so a default value of Uniform is used. In C# code you have img.Stretch = Stretch.Fill;
My guess is that the border is in the image, but in the C# code with Fill the image is scaled down, the XAML variant with Uniform scales up the image and centers it so the border is not visible.
Related
I am using in xaml with some fix image source, later on I wanted to use local image and wanted to assign to the xaml. But I am not able to use stretch in new image created .
Is there any way to use the stretch in other way ?
My code in xaml :
<Image Source="/Assets/Images/fix.png" Visibility="Visible" x:Name="ContentImage" Stretch="UniformToFill" />
and in C#
if (File.Exists(imagePath))
{
Image newImage = new Image();
BitmapImage logo = new BitmapImage();
logo.BeginInit();
logo.UriSource = new Uri(imagePath);
logo.EndInit();
newImage.Source = logo;
newImage.Stretch = Stretch.UniformToFill;
ContentImage.Source = newImage.Source;
}
It makes no sense to create another Image element. It is also not necessary to call Begin/EndInit. Use the BitmapImage constructor that takes an Uri argument instead.
This should be sufficient:
if (File.Exists(imagePath))
{
ContentImage.Source = new BitmapImage(new Uri(imagePath));
}
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 want to convert the grid background to image through code behind,how to do this-
I have tried this-
ImageBrush gridBackground = (ImageBrush)(((Grid)sender).Background);
System.Windows.Controls.Image gridBackImage = new System.Windows.Controls.Image();
gridBackImage.Source = gridBackground.ImageSource;
it is giving error-
Unable to cast object of type 'System.Windows.Media.SolidColorBrush' to type 'System.Windows.Media.ImageBrush'.
I feel you need to clarify your requirements more, because what you might be attempting might be a wrong approach. I feel you haven't set any image to the background of the grid but only a color.
So setting background to a color it will return an SolidColorBrush and not an Image, i.e. ImageBrush.
If you have set it to an Image background then your code will work fine. But the question is what is that you are intending to do with gridBackImage? because I feel we are converting it to something which is not necessary. If you say what you intent to do it would be better to solve.
var grid = sender as Grid;
Image gridBackImage =new Image();
gridBackImage.Source = grid.Background.ImageSource;
ImageBrush myBrush = new ImageBrush();
Image image = new Image();
image.Source = new BitmapImage(
new Uri(
"pack://application:,,,/MyClassLibrary;/Images/Image1.jpg"));
myBrush.ImageSource = image.Source;
Grid grid = (Grid)sender;
grid.Background = myBrush;
You can easily be acheived in the xaml by adding the following code in the grid
<Grid>
<Grid.Background>
<ImageBrush ImageSource="/MyProject;component/Images/bg.png"/>
</Grid.Background>
</Grid>
Left for you to do, is adding a folder to the solution called 'Images' and adding an existing file to your new 'Images' folder, in this case called 'bg.png'
You can convert the Backround to ImageBrush instead of Image.
ImageBrush img = (Grid_Image.Background as ImageBrush);
You should be able to reverse Saritha.S.R's answer like:
ImageBrush myBrush = (ImageBrush)(((Grid)sender).Background);
Image image = new Image();
image.Source = myBrush.ImageSource;
Is that what you're after?
Edit:
Your edit:
Unable to cast object of type 'System.Windows.Media.SolidColorBrush' to type System.Windows.Media.ImageBrush'.
Indicates that you don't really have an image set as background. You need something like:
<Grid.Background>
<ImageBrush ImageSource="YourBackgroundImage.jpg"/>
</Grid.Background>
Or in code behind:
ImageBrush myBrush = new ImageBrush();
Image image = new Image();
image.Source = new BitmapImage(
new Uri("pack://application:,,,/YourProject;component/YourBackgroundImage.jpg"));
myBrush.ImageSource = image.Source;
yourGrid.Background = myBrush;
For this to work. You simply can't get an image from a SolidColorBrush
Please check whether the Image Background is set as ImageBrush, like
<Grid Height="300" Width="100" x:Name="Grid_Image">
<Grid.Background>
<ImageBrush ImageSource="ms-appx:///Assets/SmallLogo.scale-100.png"/>
</Grid.Background>
</Grid>
Then you can cast in code behind as mentioned by you.
ImageBrush im = ((ImageBrush)(((Grid)sender).Background);
Image gridBackImage =new Image();
gridBackImage.Source = im.ImageSource;
Solved,My code is-
ImageBrush gridBackground;
if (((Grid)sender).Children.Count > 0)
{
gridBackground = (ImageBrush)(((Grid)sender).Background);
System.Windows.Controls.Image gridBackImage = new System.Windows.Controls.Image();
gridBackImage.Source = gridBackground.ImageSource;
ImageCar.Source = gridBackImage.Source;
}
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.