Resize Wpf Window and Contents Depening on Screen Resolution

Resize WPF Window and contents depening on screen resolution

Just simply make a binding like that:

<Window x:Class="YourApplication.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="YourApplication" 
    Height="{Binding SystemParameters.PrimaryScreenHeight}" 
    Width="{Binding SystemParameters.PrimaryScreenWidth}">

Sizing the content to fit into screen resolution

Viewbox is quite useful if you need the content of your window to scale proportionally when you resize the window (for example maximize it). In this minimalistic page

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Viewbox>
        <StackPanel>
            <TextBlock FontSize="14">Example</TextBlock>
            <Border Background="Aqua" Width="100" Height="100"></Border>                    
        </StackPanel>
    </Viewbox>
</Window>

you have a TextBlock and a colored Border stacked vertically; if you start this xaml the window will have a size of 300x300, the font of the TextBlock will be 14 in size and the colored border will be 100x100. If you rescale the window you will see both the TextBlock and the Border scale accordingly (so they'll be no more of the size you've specified in the xaml), keeping relative proportions. Viewbox is really useful, in this respect, if you need a window whose internal components layout look always the same independently from the final resolution it will be displayed (what does matter is aspect-ratio, thought). This obviously work with any contents you'll put inside the Viewbox (we had an application with videos and 3D views for example). Note that in Visual Studio 2008 you'll not be able to see the content of the Viewbox in the Designer.

Hope this help.

What screen size to use?

In my experience screen resolution would be more of a factor in usability.

See here for a solution:

• resize-wpf-window-and-contents-depening-on-screen-resolution

The TL;DR

<Window x:Class="YourApplication.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="YourApplication" 
    Height="{Binding SystemParameters.PrimaryScreenHeight}" 
    Width="{Binding SystemParameters.PrimaryScreenWidth}">

How can I set WPF window size is 25 percent of relative monitor screen

In your MainWindow Constructor add

this.Height = (System.Windows.SystemParameters.PrimaryScreenHeight * 0.25);
this.Width = (System.Windows.SystemParameters.PrimaryScreenWidth * 0.25);

Also don't set WindowState="Maximized" in your MainWindows.xaml otherwise it won't work.
Hope this helps.

WPF Window size have monitor size

use this in code-behind:

a.WindowState = WindowState.Maximized;

and remove SizeToContent from your XAML.

With this code:

a.Width = System.Windows.SystemParameters.PrimaryScreenWidth;
a.Height = System.Windows.SystemParameters.PrimaryScreenHeight;

you will have problems when using secondary screen with different resolution.

How to make all controls resize accordingly proportionally when window is maximized?

In WPF there are certain 'container' controls that automatically resize their contents and there are some that don't.

Here are some that do not resize their contents (I'm guessing that you are using one or more of these):

StackPanel
WrapPanel
Canvas
TabControl

Here are some that do resize their contents:

Grid
UniformGrid
DockPanel

Therefore, it is almost always preferable to use a Grid instead of a StackPanel unless you do not want automatic resizing to occur. Please note that it is still possible for a Grid to not size its inner controls... it all depends on your Grid.RowDefinition and Grid.ColumnDefinition settings:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100" /> <!--<<< Exact Height... won't resize -->
        <RowDefinition Height="Auto" /> <!--<<< Will resize to the size of contents -->
        <RowDefinition Height="*" /> <!--<<< Will resize taking all remaining space -->
    </Grid.RowDefinitions>
</Grid>

You can find out more about the Grid control from the Grid Class page on MSDN. You can also find out more about these container controls from the WPF Container Controls Overview page on MSDN.

Further resizing can be achieved using the FrameworkElement.HorizontalAlignment and FrameworkElement.VerticalAlignment properties. The default value of these properties is Stretch which will stretch elements to fit the size of their containing controls. However, when they are set to any other value, the elements will not stretch.

UPDATE >>>

In response to the questions in your comment:

Use the Grid.RowDefinition and Grid.ColumnDefinition settings to organise a basic structure first... it is common to add Grid controls into the cells of outer Grid controls if need be. You can also use the Grid.ColumnSpan and Grid.RowSpan properties to enable controls to span multiple columns and/or rows of a Grid.

It is most common to have at least one row/column with a Height/Width of "*" which will fill all remaining space, but you can have two or more with this setting, in which case the remaining space will be split between the two (or more) rows/columns. 'Auto' is a good setting to use for the rows/columns that are not set to '"*"', but it really depends on how you want the layout to be.

There is no Auto setting that you can use on the controls in the cells, but this is just as well, because we want the Grid to size the controls for us... therefore, we don't want to set the Height or Width of these controls at all.

The point that I made about the FrameworkElement.HorizontalAlignment and FrameworkElement.VerticalAlignment properties was just to let you know of their existence... as their default value is already Stretch, you don't generally need to set them explicitly.

The Margin property is generally just used to space your controls out evenly... if you drag and drop controls from the Visual Studio Toolbox, VS will set the Margin property to place your control exactly where you dropped it but generally, this is not what we want as it will mess with the auto sizing of controls. If you do this, then just delete or edit the Margin property to suit your needs.

resize datagrid based on a screen resolution

Try this:

<Grid>
    <DataGrid Name="tabela"
              HorizontalAlignment="Stretch" 
              VerticalAlignment="Stretch"
              IsReadOnly="True"
              AlternatingRowBackground="#eeeeee"
              ItemsSource="{Binding}"
              AutoGenerateColumns="False"
              RowDetailsVisibilityChanged="tabela_RowDetailsVisibilityChanged" 
              SelectionChanged="tabela_SelectionChanged" >
    </DataGrid>
</Grid>

If you want your controls to resize according to their parent size (in this case it's your window), you can't set Width and Height at all. You can play with MinWidth, MinHeight, MaxWidth and MaxHeight if you want to, but in most cases, controls just stretch to take all available space. It's being set by HorizontalAlignment="Stretch" and VerticalAlignment="Stretch" (in most cases those are default values, but I have set them explicitly in case you have it overriden somewhere else).

Another thing is if you set up a Grid with ColumnDefinitions and RowDefinitions, don't do it if you are not using it. Just Grid is enough to be a container for a single control such as DataGrid. If you do set Rows and Columns, you can set their Width and Height to one of three value types:

• Exact value (e.g. 100)
• Auto - Rows or Columns will resize to take just as much space as their content
• * - this is a proportion marking, so setting star width to one column while you have three of them, will make this column to take all available space. On the other hand if you have two columns and you set Width="*" to the first one and Width="2*" to the second one, all available space will be divided into 3 parts and the first column will get 1/3 of it and the second one 2/3 (you can play with it however you want).

---

Related Topics