1

I want to make a full screen WPF app that looks the same on all machines with different screen resoltion. I created my MainWindow.xaml with a 800*480 px resoultion. I made a menu on the top of the window like this:

<Grid Height="480" Width="800">
    <Menu FontSize="25" Margin="0,0,0,442" >
        <MenuItem Header="File" />
    </Menu>
</Grid>

But when I started the app in Debug Mode, the menu was in the center of the screen. I guess it was because my screen resoultion is 1366*768 px. So what should I do to make my program look the same on different resoultions in full screnn mode?

UPDATE: I want it to be like Photoshop for example. Photoshop looks almost the same on different resoultions. Images: https://i.stack.imgur.com/W1SL6.png https://i.stack.imgur.com/7KYxX.png

UPDATE : I just want to know what these values should be to make the program work like I want it to: Height of Window, Width of Window, Height of Grid, Width of Grid,

Sorry bros, I'm such a beginner :\

  • 1
    They can never truly look the same; either the content will be stretched out or you'll have blank space around the pre-sized window. And what happens if the available screen resolution is too small? What do you mean by "the same"? Or are you just asking how to pin the menu to the top of the screen? – BradleyDotNET Oct 30 '14 at 20:46
  • 1
    If you want it to look similar don't use with and height and make everything dynamic stretches, fill and so on – Arsen Mkrtchyan Oct 30 '14 at 20:47
  • i'm not a pro as you are so could you please tell me about your idea in more detail @ArsenMkrt –  Oct 30 '14 at 20:58
  • Not clear what you are asking Peteri, please clearify question, put some images and etc. – Arsen Mkrtchyan Oct 30 '14 at 20:59

2 Answers2

8

Another method is to use ViewBox:

<Viewbox StretchDirection="Both" Stretch="Uniform" />

For example:

<Window 
Height="480"
Width="800">
 <Viewbox StretchDirection="Both" Stretch="Uniform">
   <Grid Height="480" Width="800">
   </Grid>
 </ViewBox>
</Window>

Now when you resize your window, all elements resize too.

Patrick
  • 141
  • 6
  • The next step is to get the ratio of your window format. Look here for example: http://stackoverflow.com/questions/2471867/resize-a-wpf-window-but-maintain-proportions – Patrick Nov 03 '14 at 06:50
2

It's not really going to be possible to make an application look exactly the same in every resolution. One of the problems with this is text - it's difficult to scale text in the same sense as you can a button, or a ListBox, or whatever.

But, one of the things you can do to make it so that your application looks substantially similar is to use relative positioning and sizing rather than absolute, as you are now.

I've rarely found it's useful or successful to use margins like the one you have above, where the Menu is offset by 400-some pixels. Typically, this ends up making your design look good only at the exact size at which you designed them. If you want this at the top of the control, you could do the following:

<Menu ... VerticalAlignment="Top"  ...>

This would always have this menu aligned to the top of your Window. Likewise, if you wanted the menu to take up the same amount of relative vertical space in the window regardless of the absolute size of the window, you could use the Grid.RowDefinitions property:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="10*"/>
        <RowDefinition Height="90*"/>
    </Grid.RowDefinitions>

   <Menu Grid.Row=0 />
</Grid>

This way, the Menu occupies the entire top row, and will consume 10% of the vertical space in the window regardless of resizing. There are some edge cases, obviously, particularly when controls get resized to the point where the text they contain cannot be seen anymore - if these are concerns you should use MinHeight and MinWidth on your Window or a specific control in order to provide a floor at which the control in question doesn't shrink anymore.

Note that, if you don't explicitly set the size of the Grid, it fills the entirety of its parent container by default - the entirety of the Window in this case. If you want your application to look the same, you can't give the parent Grid an absolute size like 800x480.

furkle
  • 5,019
  • 1
  • 15
  • 24
  • i just signed up here today, and i don't know how could we talk in private @furkle but i guess you do so please contact me in private –  Oct 30 '14 at 21:54