Brand new WPF, slap down button, hit run, and it's not displaying correctly. Why?
The problem you are experiencing is due to the use of margins. Basically, when you placed the buttons on the designer and moved them about you are setting their margins within the grid.
69 Replies
You can sort of think of these margins as const coordinates for those elements and as such when you run the application the window size is not exactly the same as the designer preview and so you lose the buttons on the right and bottom since their margins place them out of bounds.
Think of it like this, you dragged a button to the coordinate X: 200 Y: 200 in the designer but when you run the program the window is only 150x150 so you cant see the button.
The simplest remedy for this is to place the button within the size bounds of the window but that is actually not really ideal.
Ideally you should be using better layout techniques like dock panels or setting column and rows on the grid and forcing the elements to remain aligned within those cells. Margins should only be used for providing padding around an element and not for positioning them.
Its unfortunately that is the behavior of the designer.
An example of how to use layout techniques to effectively do what you showed in the video would be to have some xaml like this:
You can find a working example of the above here: https://github.com/AlexLexicon/Discord.Example.LayoutTechniques
GitHub
GitHub - AlexLexicon/Discord.Example.LayoutTechniques
Contribute to AlexLexicon/Discord.Example.LayoutTechniques development by creating an account on GitHub.
@Alexicon Well, how do i just make the designer be the same size as the window it creates?
Also
i think you are incorrect
if i create a column next to the button, suddenly the button will show
the important part meaning without changing the pixel resolution of anything, it now shows properly, except in a column
if it was simply the designer being a diffrent size, why would clicking to add a column, where neither the designer nor window change size, fix it?
atleast so far as it being related to pixel width of designer vs window
Yes I only explained margins in your example like coordinates however they aren't actually coordinates. when you added a column you are now applying the margin only within that column and by default the column will automatically scale by default to fit the window.
how are they not coordinates?
here this is 947 pixels from the left
when i make a column, its 914 + 33 pixels (947 pixels)
so it should be the exact same location
it is still a total of 947 pixels from the left
i assume some fucky scaling thing is happening, and some sub-pixel bullshit is occuring, but i can't fix it if i don't..uh...know what menu turns it off, or whatever. or even what it is to begin with.
columns are in scale not pixels that is "914*" (note the star) not 914 pixels. if you want it to be pixels you need it to just be "914"
i tried using
[assembly: System.Windows.Media.DisableDpiAwareness] but didn't help, so its not that.
Okay, fine.
wpf is a vector based graphics system so it generally avoids pixels by default most of the time.
922 pixels + 25 pixels is 947 pixels
oh
and so its now out of bounds....because its pixels and not..."star"
right
Well, the grid is 1075 pixels, but when launched some pixels disappear
What i see in the designer is just straight up lieing to me
about what size it is or whatever
in some way
the designer in wpf doesn't know your operating systems window shell and as such you often lose some pixels to the border and title bar in windows. (this is different sizes in windows-10 windows-7, etc.)
That argument might work for losing the button because the top bar changes sides, but the left right borders are 1 pixels
well the border is slightly bigger than it looks do to shadows and things. Also windows addes extra transparent pixels around the edges to make it easier to grab and resize and things.
Ohh, the shadows are part of it, hrmmm
well, as much as i'd love to complain for a few minutes about MICROSOFT visual studio not displaying properly for MICROSOFT computer, more importantly, is there anything i can do to make the designer show me how it would look like when launched on windows?
or should i just dock a thin bar to the bottom and right sides in the designer to know what is out of bounds
use a grid, i did this mistake aswell, just stopusing the editor
And also, how the heck does adding a column in star mode fix it. Wouldn't the problem still exist, just i guess the mixxing pixels be taken from end of column 1 instead of end of column 2?
like fr someone told me to stop using it and it was such a great advice
i am using a grid, it seemed to me that grid is the WPF version of a panel. Unless im wrong?
Ohh, well
no clue what a panel is
without a grid, i can't put things on the screen?
i think you can but margings are hell
how do i put 2 buttons onto the screen without a grid? WPF doesn't even let me move an existing button without a grid it seems
oh
yes you need a grid defined
but you should make a grid and define positions with Rows and Columns
so then "stop using a grid" isn't very good advice? no? :p
even when i make columns and rows, the pixels get eaten anyway
ohh
i meant
the editor
designer
or whatever its called
I think Alexicon was probably giving better / more insightful advice :p
i mean
what?
that just loops back to me saying i literally cant do that because it doesn't allow things to exist
or, like.
what is "the editor"
is it not this?
wait i dont understand, i just gave an advice that you shouldnt use the designer
this thing
and the advice is to not use a grid here, right?
Do you know what row and calumn definitions are?
the advice is to use a grid
and as i said, rows and columns don't fix it
you can make a grid(literally) with columns and rows and then define which object should go into which row and columns, but thats a general advice, this is probably something with resizing the window, appears for me aswell
There is a editor, with a grid and rows and columns, and it is missing pixels, even if colums exist or do not exist
what do you mean "appears for me as well"
as in you get the same problem
or...?
oh
add this to your window
might help
yup it will
It worked! :0
it was 1 minute of googling tho
Stack Overflow
How to automatically resize to content a Window with an Expander co...
I'm trying to figure out how to resize the Window of my application after an Expander control has been expanded or collapsed. It must grow or shrink. All the cases I've seen before on the StackOver...
"wpf window resize content"
just google keywords you will find your answers 😄
well, that involvs knowing the keywords, and as my first day in WPF, i don't know any words :p
This...Would something with a scrollbar still work with this?
oh
mb
well
while your here
there is another strange thing i can't think of as anything less then a bug
il record a short video with moving colums
okay
@Nevemlaci https://youtu.be/8IDESamZQZQ
(In 3 minutes it will be HD)
Moving a column around seems to change the properties of other things, even things its not even close to
like a virus o_0
designer stuff, idk what is going on really
xD
oh right
THANK YOU
hey I had to take a work call, Maybe you already understand but in that most recent video what's happening is you are adjusting the constraints of the grid column but because you are in the designer it is automatically adjusting the margins on the elements which have margins attached to that grid column (its hard to explain sorry). Like Nevemlaci said avoiding the designer and just writing the xaml manually is the better way to work with wpf but I spent a couple of years just using the designer when I started so I get the annoying strangeness of it. You can make the designer work but you will have to get used to the weird ways it functions. It is not as nice and easy as the winforms designer but then wpf is purposely not as easy as winforms (But provides so much more that makes it worth it).
My biggest recommendation would be avoid exact sizes for anything but padding, IE when you make a button do not give it a width or height only make it fill its parent and use things like dock panels to adjust their positions. This will make your ui responsive to any window size and should also make using the designer easier. (Not there will be times when providing specific sizes is necessary but they should be relatively few and far between).
@Alexicon Actually, i guess you missed it. It is NOT adjusting just the margins attached to it, but even margins not attached to it. At the start, every button is left aligned, and as i move, the left buttons have nothing happen. But as i more furiously move, suddenly at random, the left buttons change from left aligned to center aligned. That is the problem. It even happens sometimes for things to its right.
AT first, all 3 buttons are left aligned. Then suddenly Launch changes to center aligned. Then workshop changed to center aligned. Finally Dummy changes to center aligned.
right, so this is what's hard to explain, but I will try.
Basically when you move the column definition size, the elements try and sort of keep their positions relative to the column, so when your moving your column around at some threshold the designer is changing your buttons to be center aligned instead of left aligned because it thinks you want that with the new column size.
Here is a simplified video showing this happening: https://youtu.be/Ar4MU1CocsA
Again this is all the intricacies of the wpf designer in visual studio. If you modify the column width in xaml the same effect doesn't happen since its just changing the column size.
@Dawnbomb sorry if I'm going to repeat something that was already said here (I can't read the entire conversation). What you need to understand about WPF is that the designer is shit and you should stop using it completely! Period. There's nothing you can do about it. All of us experienced WPF developers don't touch the designer. What you should do instead is learn to manually write XAML. This takes some time to master, but it's really rewarding and results are going to always be far better than what designer would could ever generate for stop using the designer, don't even rely on it for preview purposes. Some people completely disable it and rely on Hot-Reload. Learning to manually write XAML is not really that difficult. Visual Studio IntelliSense will help you with that quite a bit.
Some html knowledge helps alot in xaml too
or use CSharpForMarkup and get full intellisense experience