How to get controls resizable correspondingly to screen resolution?
How to get controls resizable correspondingly to screen resolution?
Just faced with a following issue:
I've tried to resize my simpliest WPF app and noticed that controls are not responsive at all.
Note: I've tried symbiosis of various controls like Grid, WievBox, Canvas etc., to no avail.
here is XAML code, to be exact controls which I need to get resizable (responsive) correspondingly different resolutions (aspect ratios).
<Window x:Class="WpfApplication6.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication6"
mc:Ignorable="d"
Title="MainWindow" Height="768" Width="1024" MinHeight="768" MinWidth="1024" MaxHeight="1080" MaxWidth="1920" WindowStartupLocation="CenterScreen" >
<Grid>
<Ellipse HorizontalAlignment="Left" Height="100" Margin="576,278,0,0" Stroke="Black" VerticalAlignment="Top" Width="100"/>
<Rectangle HorizontalAlignment="Left" Height="100" Margin="559,518,0,0" Stroke="Black" VerticalAlignment="Top" Width="100"/>
<Label x:Name="label" Content="Label" FontStretch="Normal" FontSize="24" HorizontalAlignment="Left" Margin="595,230,0,0" VerticalAlignment="Top" Height="43" Width="64"/>
<Button x:Name="button" Content="Button" FontSize="24" HorizontalAlignment="Left" Margin="720,427,0,0" VerticalAlignment="Top" Width="83" Height="38"/>
</Grid>
P.S. Such writers as Nathan and McDonald in their books are broadcasting that WPF that's you need for adaptive and responsive application making. However, I'm in doubts after couple of days of looking for solution. I think WPF not much went ahead in contrast with Windows Form at least in terms of adaptation and responsiveness of applications.
So could someone help me in that matter.
Thanks in advance!
3 Answers
3
Don't use Margin to position controls, use your grid properties like ColumnDefinition and RowDefinition with things values like Auto and *
Margin
ColumnDefinition
RowDefinition
Auto
*
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
Nice little tutorial
Use RowDefinition and ColumnDefiniton for your Grid control instead of using Margin to place your controls. Also replace the Height and Width properties for the Ellipse and Rectangle with Stretch.
<Window x:Class="WpfApplication6.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication6"
mc:Ignorable="d"
Title="MainWindow" Height="768" Width="1024" MinHeight="768" MinWidth="1024" MaxHeight="1080" MaxWidth="1920" WindowStartupLocation="CenterScreen" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Ellipse Grid.Row="0"
Stretch="Fill"
Stroke="Black" />
<Rectangle Grid.Row="1"
Stretch="Fill"
Stroke="Black" />
<Label Grid.Row="2"
x:Name="label"
Content="Label"
FontStretch="Normal"
FontSize="24" />
<Button Grid.Row="3"
x:Name="button"
Content="Button"
FontSize="24" />
</Grid>
</Window>
Isn't this answer looks exactly like one that was already posted by @TheGeneral?
– vasily.sib
Aug 21 at 7:52
@vasily.sib I was AFK for quite a bit and didn't see that there was an an answer already. No reason for downvoting.
– dontbyteme
Aug 21 at 8:32
First answer was here for 1.5 hours before yours, but ok, you where AFK. Anyway, isn't this answer looks exactly like one that was already posted by @TheGeneral?
– vasily.sib
Aug 21 at 8:48
@vasily.sib yes, TheGeneral's answer is correct but I guess it's just not complete. Pew also want to have responsive controls if I got it correctly? Therefor it's also important to remove the static heights and widths of the controls. I've updated my answer a few times. But yeah, I've could have written this as a comment as well.
– dontbyteme
Aug 21 at 9:00
there is a link in his answer with much more info
– vasily.sib
Aug 21 at 9:05
Thanks guys, of course, however it's not a solution. See screens below.
As you can see , all important to me controls "swam" to left.
~D-D-Double Post!
– vasily.sib
Aug 21 at 8:18
This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - From Review
– Jesse de Bruijne
Aug 21 at 8:28
Who did invent such "useful" interface? There are lots of nice forum engines with user-friendly interfaces.
– Pew
Aug 21 at 8:35
Who did invent such "useful" interfase. Dislike to him! There are lots of nice user-frindly forum engines!
– Pew
Aug 21 at 8:37
If SO is too annoying for you, your are welcome on those user-frindly forum. By the way, there was a link on registration page - take a tour
– vasily.sib
Aug 21 at 8:51
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
I think you are trying to work with WPF designer like you do with WinForms - that is your problem. Simple "drag-n-drop controls from toolbox to form" is not how we do it in WPF. Almost all time you just write a raw XAML and use designer just as preview window. It is much like building a HTML, and this is a key for adaptation and responsiveness. Anyway, there is an answer below.
– vasily.sib
Aug 21 at 6:41