Level Extreme platform
Subscription
Corporate profile
Products & Services
Support
Legal
Français
Why does design time and runtime size differ?
Message
From
28/10/2009 04:31:08
 
 
To
27/10/2009 20:24:08
General information
Forum:
ASP.NET
Category:
Windows Presentation Foundation (WPF)
Environment versions
Environment:
C# 3.0
OS:
Windows XP SP2
Miscellaneous
Thread ID:
01431413
Message ID:
01431830
Views:
30
>>>>>Hi Viv
>>>>>
>>>>>Thanks for taking the time to look into this.
>>>>>
>>>>>>
>>>>>>Further to my original post *please* , *please* post the XAML for this - without it the discussion raging on this thread will not reach a resolution !
>>>>>
>>>>>I have posted the XAML in another reply.
>>>>>
>>>>>But this gets worse again. I am up to Chapter 4 in the book and opened a form from the CD samples. This form has 2 "Windows Forms Hosts" controls in it with the DateTime control embedded. Unfortunately the book does not explain how to do this but I found out using Google.
>>>>>
>>>>>The problem is that with this form (I added the 2 blue rectangles for alignment), the left alignment is correct for IDE and runtime. But the right side alignment is totally off as seen from this image:
>>>>>
>>>>>http://www.foxite.com/uploads/b29cf803-3dd1-424d-92fd-4768c0aeaac0.jpg
>>>>>
>>>>>I drew the red lines to show the alignment. Also the Quit button has the Bottom edge below where it is supposed to be. That I understand since the "Windows Forms Hosts" is only a container. I wish I could visually adjust the embedded control but that appears impossible. The only method appears to be to add code to manually resize the embedded control and "run it and see".
>>>>>
>>>>>However I cannot see why the right edges of each control are so badly off.
>>>>>
>>>>>Again here is the XML generated by VS (not by me):
>>>>>
>>>>>
>>>>><Window x:Class="Selection.Window1"
>>>>>    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
>>>>>    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>>>>>    xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
>>>>>    Title="Dates" Height="314" Width="373">
>>>>>    <Grid>
>>>>>    <Label HorizontalAlignment="Left" Margin="20,25,0,0" Name="label1" Width="35.63" Height="23.2766666666667" VerticalAlignment="Top">First</Label>
>>>>>    <Label Height="23.2766666666667" HorizontalAlignment="Left" Margin="20,56,0,0" Name="label2" VerticalAlignment="Top" Width="52.63">Second</Label>
>>>>>	<WindowsFormsHost Name="hostFirst" Margin="85,25,0,0" Height="23" VerticalAlignment="Top">
>>>>>      <wf:DateTimePicker Name="first"/>
>>>>>    </WindowsFormsHost>
>>>>>    <WindowsFormsHost Name="hostSecond" Margin="85,56,63,0" Height="23.277" VerticalAlignment="Top">
>>>>>	  <wf:DateTimePicker Name="second"/>
>>>>>    </WindowsFormsHost>
>>>>>    <Button Height="23" HorizontalAlignment="Left" Margin="20,100,0,0" Name="compare" VerticalAlignment="Top" Width="75" Click="compareClick">Compare</Button>
>>>>>    <TextBox Margin="20,131,104,20" Name="info" TextWrapping="WrapWithOverflow" AcceptsReturn="False" IsReadOnly="True" TextChanged="info_TextChanged" />
>>>>>    <Button Height="23.277" HorizontalAlignment="Right" Margin="0,56,0,0" Name="quit" VerticalAlignment="Top" Width="57" Click="quitClick">Quit</Button>
>>>>>        <Rectangle Height="19" HorizontalAlignment="Left" Margin="85,0,0,0" Name="rectangle1" Stroke="Black" VerticalAlignment="Top" Width="60" Fill="Azure" />
>>>>>        <Rectangle Height="19" HorizontalAlignment="Left" Name="rectangle2" Stroke="Black" VerticalAlignment="Top" Width="81" Fill="CornflowerBlue" />
>>>>>    </Grid>
>>>>></Window>
>>>>>
>>>>>
>>>>>Basically I want some consistent way,( even a workaround will do), to get my forms looking the same in runtime as I design them in the VS IDE, using WPF in VS 2008. I don't want to have to "run the form and see" and make adjustments by trial and error as with more complicated forms that would soon become tedious.
>>>>>
>>>>>Thanks for your time.
>>>>
>>>>Hi,
>>>>I think what's causing the problem here is the fact that the Window size is not neccessarily shown at exactly the right size at design time - probably because the IDE can't know what theme may be in place at runtime.
>>>
>>>Since any theme applied is usually to the border and titlebar of a formI don't see how a theme will effect this as long as the controls are within the grid and the grid is within the form. Any theme effect will happen outside this area so I don't accept this explanation.
>>>
>>>To avoid the controls running right to the edge of the form simply stop them running to the edge of the grid. Something like
<Grid Margin="4">
>>>
>>>It is not the control at the edge of the form I am talking about. That was done purposely. It is the fact that the "Windows Forms Hosts" with the DateTime control in it that takes on a mind of its own and resizes at runtime. I thought the image and the red lines I had drawn were clear enough. The image clearly shows the "Windows Forms Hosts" control has un necessarily expanded to be a different width at runtime. That is totally wrong that I have to be forced to adjust the width using Trial and error to get a proper fit.
>>
>>I'm afraid you are mis-understanding the whole ethos of WPF controls. It you want a control to be of a set width or height then you must *explicitly* set that value. Neither of the WindowsFormsHost controls has a Width set so, in exactly the way they are meant to, they stretch to fit the containing control ( the Grid in this example which, in turn, having no explict width or height, also stretches to fit the Window). Often (not in this case perhaps but, say, with a ListBox, TreeView etc.) this is a behaviour you will want. Buttons are probably one of the few examples where you will rarely or never want this behaviour.
>>
>>Can I suggest that, although using a Grid as a container is the easiest way to get WinForms behaviour, you experiment with using, say, a StackPanel as the top-level container. Also, to get a clearer idea of what is happening, set the background colours of various controls so that the setup of each and the effect of Margin and Padding settings is more obvious.
>>
>>To get a low level understanding of the process WPF goes through when working out the final layout read up on the UIElement.Measure() and UIElement.Arrange() methods.
>>HTH,
>>Viv
>
>Thanks Viv, I will.
>
>As you explain it, by default, unless I explicitly set a width property, the control will expand.
>This occurs because the control is in the grid which is in the form.
>So if no explicit width is set for the grid, it expands to the form widthand the same with the controls, which is why the button in my example appears "anchored" to the form's edges.
>
>This I can understand and accept.
>
>However yesterday I was testing another simple form and now certain controls like the ComboBox are shrinking at runtime.
>
>See the image here:
>http://www.foxite.com/uploads/4f293999-336e-4cb9-8719-d4706297608c.jpg
>
>and the XAML for this form:
>
><Window x:Class="WpfApplication2.Window1"
>    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
>    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>    Title="Window1" Height="201" Width="386">
>    <Grid>
>        <TextBox Height="23" Margin="24,27,134,0" Name="textBox1" VerticalAlignment="Top" />
>        <Button HorizontalAlignment="Right" Margin="0,27,53,0" Name="button1" Width="75" Height="23" VerticalAlignment="Top">Button</Button>
>        <ComboBox Margin="24,71,0,69" Name="comboBox1" HorizontalAlignment="Left" Width="206" />
>        <Button HorizontalAlignment="Right" Margin="0,71,53,69" Name="button2" Width="75">Button</Button>
>    </Grid>
></Window>
>
>
>If you have the time, the project is also here zipped up:
>http://www.foxite.com/uploads/99375930-8ab3-48ac-b51c-2d308037d932.zip

Shouldn't need the project - one of the beauties of XAML is that all the information as to the layout is right there (unless you're positioning controls in code as well).....
>
>The combobox in question has a width property explicitly set to 206:
>
><ComboBox Margin="24,71,0,69" Name="comboBox1" HorizontalAlignment="Left" Width="206" />
>
>
>However, as the image shows, the combo resizes itself at runtime to not expand but to actually shrink which is quite different to what you have said so far.
>
>You explained the growing of controls which I understood (although this concept of NOT having default properties is quite different from anything else). But now I also have controls shrinking on me.
>
>In fact as you can see from the image, the form (alignment and size) looks perfect at design time but look what happens at runtime. It is all screwed up with some controls growing and some shrinking.
>
>I am at a loss to find some consistent behaviour here. Either a control shrinks or grows. What is happening with WPF here?

It is the Width of the Textbox that has changed - not the ComboBox.
Play with the size of the form at runtime - when it is at the same size as the design then the position and size of all controls will match the design time layout exactly

Again - I suggest you try working using something other than a Grid as the top-level container. The XAML you are using is not something that would commonly be used - the Grid has no Rows or Columns defined and the positioning of each control in the entire form is solely governed by it's own Alignment and Margin settings and, I agree, working out how the interaction between these two affects the final positioning and size of a UIElement is not the simplest part of XAML

If you really want to exactly control the positioning and size of every object then use a Canvas instead of a Grid - but that would defeat the whole point of using the WPF UI.....
Best,
Viv
Previous
Next
Reply
Map
View

Click here to load this message in the networking platform