Question How to bind a window's size to an image's size?

glasswizzard

Well-known member
Joined
Nov 22, 2019
Messages
126
Programming Experience
Beginner
I have two windows, one of which is solely to display an image. The image is determined in the other window. I have all the functionality done except one thing, I can't figure out how to make the window's size always match the image in it's viewbox.
The window in question contains one grid (one row and one column). Inside that is the viewbox, then inside that is the image. I'm trying to go for an unstyled window with no borders, so you just see the image and nothing else.

I really thought I wouldn't need help with one :/

Thanks
 
Bind both the viewbox's width/height and the windows width/height to separate width/height properties, got it. Thanks.
 
I'm actually having trouble doing doing this. Is a viewbox even needed? Or even a grid? Should I just put the image on the window alone since I don't need anything else?

Edit: Never mind, solved it. I was doing things in an awkward way, I didn't even need to bind.
 
Last edited:
You should also know that if you want to size a control to its parent in WPF, then you should not specify a size for either height or width for that control. Doing-so will size the control to its parent container/control. Opposite to Winforms again, whereas in Winforms; you are required to set a default height or width of a control and simply set the anchor properties instead, or dock the control. In Winforms one can also call on the Autosize property too to size itself to its contents, which we don't use any of this in WPF.

As an aside note, you should know that if you are not binding something, you are likely doing it wrong. WPF works best on a mvvm basis, and that model would include strict bindings as is what WPF was designed for. Following the mvvm pattern, allows you to ensure your data-flow is constant and always updated when something changes. Try to make a habit of binding your objects. While this is an old article, I do find it useful to refer back to for an explanation on the subject : Patterns - WPF Apps With The Model-View-ViewModel Design Pattern
 
What I ended up doing was setting it up like this: Window -> Grid -> Viewbox -> Image. I set the window's width/height to auto, SizeToContent set to WidthAndHeight, Also the grid's one row and column are both set to auto. This almost perfectly gives the effect I want, the image seems to be displayed a bit bigger then 100% resolution.

You say using autosuizing is not the way to go, I wish I knew how to do this without it it but I tried everything I could think of and could not get the image/viewbox to update the property, therefore the window (which was also bound to that property) never changed size. It was a complete dead end. Then when I found this way of doing it I thought it was the right way due to how much simpler it was.

I am curious and ready to correct this. My first question would be if you were going to do this, what controls would you use. Obviously you can't do it without an image control, but would that be on a one cell grid? Would you use a viewbox?

My second question is this, I have the source attribute of the image bound to a string property, a Uri essentially, that changes when necessary and points to a different image. Since it's not bound directly to a BitmapImage object, could this be why the SourceUpdated event never fired (the test code in there was never exceuted). The problem I had was not being able to get the image control to update the property with it's new size when the image changed. It seems like a simple thing, no more difficult then any other binding I've done but for the life of me I couldn't figure it out. I'm propbably overlooking some simple basic thing.
 
I set the window's width/height to auto
I wouldn't have set it to Auto. I just wouldn't have set a value.
SizeToContent set to WidthAndHeight
As I told you previously, not setting the height or width of a control will size it to its parents max size, so that wasn't needed.
the grid's one row and column are both set to auto.
That's fine, given how the grid has limited functionality, You could do that. Or you could set it to auto and set the width of the column definitions thereafter :
C#:
<Grid.ColumnDefinitions>
                <ColumnDefinition Width="
You say using autosuizing is not the way to go,
See the second quote again...
could this be why the SourceUpdated event never fired
I don't know. You don't show your code so how can i possibly advise?

Setting the image is something you can Goggle. There are many examples on how to do it, including the MSDN Docs.
 
Back
Top Bottom