Please, tell me, how can I place the image inside in the middle?
Stretch: Uniform to fill.
I want to focus was on the middle of the picture
Why dont you Try setting your Image control set Stretch =Fill
<Image height="20" width="20" Stretch="Fill"/>
If the aspect ratio of the image you want to put inside an Image control is not 1:1 and you set the aspect ratio of your Image control to 1:1 (e.g. Width="20" and Height="20" you will have a deformed image.
So, the best approach is, set the Width="20" but don't set the Height, let it calculate that automatically. Then, set Stretch="Uniform" (not uniform to fill). It should display the image correctly.
Hope this helps.
You can wrap the image inside a Border and set the HorizontalAlignment and VerticalAlignment attributes of your image to 'Center'.
Related
I'm making a sort-of toolbar in WPF (StackPanel containing Buttons containing StackPanels containing Images and TextBlock...)
Here is the code for one button :
<Button x:Name="btnGraph" FontWeight="Normal" Background="{DynamicResource accentColor}" BorderBrush="{DynamicResource accentColor}">
<StackPanel>
<Image Source="Resources/diagnostic_chart1.png" Stretch="None"/>
<TextBlock HorizontalAlignment="Center" Text="Graph"/>
</StackPanel>
</Button>
As you can see, the image in the button is stretched, but the same image code outside the button (in the container StackPanel), it works correctly : image
I've tried a lot of things, but nothing worked.
Is there a way to make it works ?
EDIT: I also tried changing the DPI of images from 72 to 96, no effect.
The image doesn't look stretched to me; the size seems right. It actually looks like it's rendering across pixel boundaries, giving it a blurred appearance. Try setting UseLayoutRounding="True" on your root visual.
I have a WPF image, and I'm trying to draw something on it (Lets say a smiley, 2 blue circles for eyes and and a red ellipse for the mouth).
I've made a small Rectangle over the image, and made it stretched.
<Grid Name="mGrid">
<Rectangle Height="0" HorizontalAlignment="Stretch" Stretch="Fill" Name="mImageFrame" VerticalAlignment="Stretch" Width="0" />
</Grid >
I used a DrawingBrush to draw the circles in the rectangle.
Obviously this is wrong, because I have 2 problems:
1. The DrawingBrush seems to have a different scale. It will scale according to the largest item it's drawing.
2. I can only use one brush color.
So, how can I somehow draw over an image so it keeps the same proportions ?
And how can I use a different color for each shape ?
You can put Shapes on a Canvas that overlays the Image, and put the whole thing in a Viewbox. This requires that you define absolute coordinates by either setting the Image's Stretch property to None (and thus force the Image size to that of its Source bitmap) or explicitly set is Width or Height.
<Viewbox>
<Grid>
<Image Source="C:\Users\Public\Pictures\Sample Pictures\Koala.jpg"
Stretch="None"/>
<Canvas>
<Ellipse Canvas.Left="420" Canvas.Top="480"
Fill="Red" Width="100" Height="100"/>
... more shapes here ...
</Canvas>
</Grid>
</Viewbox>
One solution would be to put both the drawing and the Image into a ViewBox control. You can find out more about the Viewbox from the Viewbox Class page at MSDN. Basically, it provides the same stretching capabilities as the Image control.
You may also like to view the Shapes and Basic Drawing in WPF Overview page at MSDN.
I am developing a Windows Store app and I've done this before, months ago, but all of a sudden, in this new app, I can't get the image to display inside the button (properly).
<Button x:Name="ShowView" Grid.Column="1" Width="32" Height="32" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,61,20,33">
<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Image x:Name="ShowViewImage" Source="/Assets/ShowView.png" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</StackPanel>
</Button>
As you can see, the code is fine (unless things have changed drastically, which by the looks of it they haven't). So what gives? This is the only code I have so far in my XAML file other than the defauls that VS generates as it's a new Project.
P.S. I've also tried taking out the StackPanel and just having Button > Image, but this produces the same result.
So, when the BUtton displays at runtime, all I can see is a very tiny, 2pixels of the image (but the image is actually 32x32pixels. How do I properly display an "Image Button"?
The problem is that your Width and Height for the button are far too small. You've made it 32x32 pixels, but the button will use almost all of that itself for the space it leaves around the visible border, the border itself, and the padding between the border and the button's content.
(It leaves space around the edge to provide a larger hit target than the visible appearance. This is useful on touchscreens, where accurate finger placement is difficult.)
All that's left for your image is a few pixels.
You'll need to make the button about 62x52 pixels to leave enough space in the middle for a 32x32 pixel bitmap.
You could get away with a slightly smaller button if you explicitly set smaller Margin and Padding properties, although as mentioned above, the margin is there for a reason.
You have a couple options, the Padding property for instance is Template bound with some pre-set padding added to it. So with your Button having a fixed Height and Width set to 32 something as simple as setting Padding="0" could fix it for you depending on the actual size of your Image.
If worse comes to worse though, you could always just make your own Button Template. There's a couple easy ways to do this. One of which would be just go make a copy of the default Button Template, rip out all the Padding/Margin/Height/Width crap preset in there and just change its name then apply your new template directly to your button like;
<Button x:Name="ShowView" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,61,20,33"
Style="{StaticResource YourCustomButtonTemplateForImages}">
<Image x:Name="ShowViewImage" Source="/Assets/ShowView.png"/>
</Button>
Or... another option would be, embed your Image inside of a ViewBox inside your button and it will fit and re-scale itself accordingly to its set available size.
Oh, you might also want to make your Background="Transparent" while you're at it to make it look a little cleaner as just an image.
Hope this helps.
I want to place an Image on the top of a certain tile in a tile based game I am making. Problem is, when I generate the random map, when the Rectangle children of the Canvas is drawn, it draws over the Image. I solved this issue by placing making the Image part of the outer Grid of the Window. Problem is that when I want to place the Image on a certain Rectangle within the Canvas, the co-ordinates are off since the Grid is larger than the Canvas. How can I limit the Image Margins to only that of the Canvas (the canvas borders as the limit) as opposed to the Grid borders as the limits?
E.g. Giving the Image a value of Margin.Left = 50 will place it in the perfect spot in the canvas, but it would be placed on a different location in the grid since its scale is larger.
// Image displays, but does not display when I add child Rectangles to the Canvas
<Canvas Height="700" HorizontalAlignment="Left" Name="canvas1" VerticalAlignment="Top" Width="700">
<Image Name="heroImage" Stretch="Fill" Source="hero.png" Height="74" Canvas.Left="558" Canvas.Top="602" />
</Canvas>
<Grid>
<Canvas Height="700" HorizontalAlignment="Left" Name="canvas1" VerticalAlignment="Top" Width="700">
// Removed the Image
</Canvas>
// Placed the Image outside the Canvas, but now it will draw according to the Grid's Margin limits and not the Canvas Margin limits
<Image Name="heroImage" Stretch="Fill" Source="hero.png" Height="74" Canvas.Left="558" Canvas.Top="602" />
</Grid>
Image inside the Canvas, perfectly positioned
Image in the grid, wrongly placed since I used Canvas Margin co-ordinates
The first way you did it was good, your image should be a child of your Canvas to do Canvas.Left...
To solve you problem can you just put your image on top of all other rectangle, with ZIndex?
Canvas.ZIndex="3 or whatever"
The image with value 2 is drawn over the Rectangle with value 1. So you can pu a high number...
I think that you could use your image inside the Canvas and if you want the image over the Rectangle, the you need set the image's (Palen.ZIndex or Canvas.ZIndex) property greater than the Rectangles one.
For instance:
<Canvas Height="700" HorizontalAlignment="Left" Name="canvas1" VerticalAlignment="Top" Width="700">
<Image Name="heroImage" Stretch="Fill" Source="hero.png" Height="74" Canvas.Left="558" Canvas.Top="602" Canvas.ZIndex="1000" />
<Rectangle x:Name="Some Rectangle" Canvas.ZIndex="1"/>
</Canvas>
The image will be showed over the rectangle. I think this is the solution. Putting the image out the canvas cause will be very complex to set the exactly position you want.
I have a Viewbox with Stretch=Uniform in order to not distort the content.
However, when the frame window is wider or taller than the content, the Viewbox content is always centered.
I cannot seem to find any content alignment options on the Viewbox.
Is there a way to do this?
Try VerticalAlignment="Top" and HorizontalAlignment="Left" on your viewbox. It will cause it to be anchored to the top and left side.
<Grid>
<Viewbox VerticalAlignment="Top" HorizontalAlignment="Left">
...
</Viewbox>
</Grid>
If you want it to completely fill (but keep it uniform) you can use Stretch="UniformToFill"
According to MSDN the Viewbox is used to stretch the child elements. Since the child elements would be stretched, you would have to set the content alignment of the children.
You may want to look at this for more information on the Viewbox: How do I keep aspect ratio on scalable, scrollable content in WPF?