Create a portable WPF UI deployed on different resolution - c#

I have tried viewbox which stretch the views to the border of the window distorting the views.
What are the methods out there to resize the views of the all controls, textfont dynamically when the application runs on different monitors?

SystemParameters Class allows you to retrieve primary screen size (and many other values). With a simple binding like
<Window ...
Height="{x:Static SystemParameters.PrimaryScreenHeight}"
Width="{x:Static SystemParameters.PrimaryScreenWidth}" />
you will be able to change the size of your view (Window or UserControl doesn't make difference). But, if you need an adaptive layout (e.g. your Grid must fill the entire Window) it's necessary to set Dock properties, Alignment values and so on.

I would go on with HorizontalAlignment, VerticalAlignment and MinSize in this case. One of the main principle in WPF is a sizeless design. If you define them right it does not matter what is the current resolution. You also can define ratio, when you design grid columns and rows.
And as #Francesco De Lisi said, docking.

Beware of the zoom factor of your windows (100% / 125% / 150% / 200%). You can get the real screen size (visible pixel) by using the following property:
SystemParameters.FullPrimaryScreenHeight
SystemParameters.FullPrimaryScreenWidth

Related

WPF stretch fullscreen app to cover whole screen

I'm creating simple presentation app. It have to be fullscreen and UI have to be responsive eg. it have to scale depending on resolution. Is there a way to strech WPF window to over whole screen?
You should only need to do a couple things:
On your Window, set WindowState="Maximized", ResizeMode="NoResize", and WindowStyle="None".
Wrap your "slide" presenter in a Viewbox with Stretch="Uniform". That will cause the slides to scale uniformly to fill the window, while maintaining their original aspect ratio.
Set the window's background to whichever matte color you want. If the slide aspect ratio does not match the display aspect ratio, there will be empty regions to the left/right or top/bottom of the slides, and you may want to control the color of those regions. I recommend Black.
Setting the WindowState to Maximized should do the trick.
Something like this:
<Window WindowState="Maximized" WindowStyle="None">
...
</Window>

How to reflow layout for narrow screen in Windows 8

I have a layout that contains some controls in a red panel and right panel, both contain a listview with some items, so are scrollable by themselves, as seen on the top part of the picture.
I'd like to change the layout on narrow screen (when user resizes my app), because both panels in the same orientation will not fit. I'd like to know what is a good way to achieve this.
So far I've tried to create a grid that initially contains both red and blue panels, and when the window size changes, I "animate" property Grid.Column from 1 to 0 and Grid.Row from 0 to 1 on the blue panel. However, while this does indeed place the blue panel under the red one, I don't know how would I make the entire layout scrollable, because part of the blue layout will now be offscreen.
I think that maybe I could achieve my plan by having both panels in a StackPanel and just changing its orientation, but I'm unsure how to evenly split the StackPanel for its children in the wide layout (and the scrolling problem is still here).
Or should I just prepare two separate layouts and switch between them by using VisualStateManager?
"Just prepare two separate layouts and switch between them by using VisualStateManager"
Basically create layouts for all supported window sizes and put them all in the page with Visibility="Collapsed". Then handle the SizeChanged event and use VSM to switch to the state appropriate for the new size. You can easily define and view the different visual states in Blend. If you don't plan on ever using Blend - you can skip VSM and simply set Visibility of each layout panel manually in the event handler.
There are some other options like dynamically re-configuring the different orientations and ScrollViewer modes or even implementing your own layout panels, but I wouldn't try to optimize prematurely and in most cases the VSM route works well.

Windows Forms: Auto Scale Application

I have a WinForms Application that was designed to support Full HD resolutions (so 1920x1080). Now this App is also supposed to run on a lower resolution: 1600x900.
Is there a way to let the application auto scale itself to fit the lower resolution? Like you would just downscale an image, basically resizing and relocating each control.
My current forms and panels have set their size to 1900x1080, so they just extend out of the screen on the lower resolution.
I have played around with AutoScaleModes and AutoSize, but the best I could get were Scrollbars so that you at least navigate through the forms. Is such a thing as downscaling an application even possible (retaining dimensions/ relative sizes and positions of the controls)?
Thanks in advance for any inputs on this!
If your main form starts in a maximized mode, it will adjust its size automagically.
But (and this is a huge "but" according to your question): the inner controls won't be scaled as you would see on a smartphone. WinForm is not "vector based" as WPF. If you have a fully loaded form in 1920x1080, when the main form is sized down, the controls won't fit and you will get scrollbars.
So the answer is: No.
The solution is available.
Form.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Dpi;
and
Make all control autosize = false.
make a suitable size of your wish.
The property you are looking for is called Dock, it's a property of the controls.
http://msdn.microsoft.com/en-us/library/system.windows.forms.control.dock(v=vs.110).aspx
This basically tells the control how to fill the available space.
Creating a resolution independent application is not a simple logic. Everything in the window should be resize as per the selected resolution. Not only controls' size you have to change the font size also as per the changes. Here is the example how to create a resolution independent form using C# code. Another way is use DevExpress Tool. This tool provides Layout Countrol Container. You can place each control in separate layout item and assign the minimum and maximum size of control.

How to get the Design time height/width of a wpf usercontrol

Is there a way to get the size at runtime ?
I need to display the usercontrol in a dialog and need to size the window accordingly
Since there are multiple usercontrols, looking for make it generic if possible !!
Sounds like you might need to rethink the problem? If you need the design time height and width, then just set the Width and Height of the control you are working with explicitly. This will 'default' the control to a specific size. Normally, you'd probably want the control's width and height to be set to Auto and have the container or layout manager decide what the size should be. So if you put the control in a Grid, assign it to a quadrant and set the size there.
Finally, if you're asking because you are designing with Blend and resizing the user control sets the design time, you can resize the control explicitly by selecting the inside corner notch instead of the outside corner notch with the bigger handle. The inside notch will result in Height and Width being set explicitly.
You can use SizeToContent
<Window x:Class="WindowSample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WPF Window"
SizeToContent="WidthAndHeight" >
This will make your window automatically resize itself to fit the preferred size of your window contents.

How do I create a user control that can be sized larger than its created size with WPF

I've created a user control using WPF and I want to add it to window. I've done that, but I can't make my control have a height higher than the height it has in its own xaml file. My MaxWidth and MaxHeight are both infinity, but I can't make the control any taller than what it is in its xaml file.
To get around this, I have to make all my user control enormous so I'll be able to size them to whatever I want. This doesn't seem right, I have to be missing something.
Removing the height and width is the way to go. The designer(blend) has some special designer width and height properties that they can use to design in, but won't set the height for runtime.
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="412" d:DesignHeight="230"
That is the xaml that will be at the top of the Window/UserControl. This should help explain things.
Why do you want your control to have a height higher than the height it has in its own XAML file? Couldn't you just remove the height in the control's XAML file, and explicitily set the height of the control when you declare it in the other XAML files (or code) that use it?
If I remove the height and width in the controls XAML file I lose the ability to use the designer for my user control. So short answer, that did solve my problem, but now I can't use the designer for user controls. Doesn't seem like I'm any better off.
The problem could be that the inner controls in your user control aren't stretching to your control. Try setting HorizontalAlignment="Stretch" or Width="Auto" on the inner controls, or you could try binding the Width property.
Ok, after some further investigation, I've misspoken. its the Grid thats causing the problem. If I set the grid Width and Heigth to Auto then everything works fine, but I lose the ability to use the designer.
I have all of the alignments set to Stretch for both the Grid and its controls.
So in summary, everything works fine if I set Grid.Width = Auto and Grid.Height = Auto, but when i do that, I lose the ability to use the designer.
I'm not aware of any width/height attributes for the VS designer if that's what you're using. I've used the MinWidth/MinHeight attributes in my xaml pretty effectively, however, to deal with the situation that I think you're describing.

Categories