Form controls visual changes on starting form

Question

Its my first WPF project and I am enjoying it till I reached this problem. I have designed a form as per my will. It looks like this in the visual studio.

enter image description here

But when I debug it from Visual Studio it gives me distorted view. Screenshot below.

enter image description here

But when I located my .exe file and double clicked it or simply press ctrl+F5 in Visual Studio it is giving me required Output/View. Can anyone tell me whats happening?

Try to resize the window inside of VS, its a problem with your layout I think. The size of the window in the VS designer may differ from the actual window size of you running app. — GameScripting, Jun 04 '13 at 14:32
Then why its working fine when I start the application without debugging? — Sandy, Jun 04 '13 at 14:33
hm very strange ... I think I also had this problem ... did not find a solution unfortunately — GameScripting, Jun 04 '13 at 14:36
Nobody uses the Visual Studio WPF designer. It produces shitty, resolution dependent output, which does not scale well to different screen sizes and window sizes. You must learn to do layout properly (by writing XAML) as we all do. — Federico Berasategui, Jun 04 '13 at 15:01

score 0 · Answer 1 · edited May 23 '17 at 10:30

This is the XAML that produces an output similar to what you depicted:

<Window x:Class="MiscSamples.Layout"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Layout" Height="300" Width="300">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height=".5*"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
            <RowDefinition Height=".5*"/>
        </Grid.RowDefinitions>

        <Button Grid.Row="0" Grid.Column="0" Margin="2" Content="Source1"/>
        <Button Grid.Row="0" Grid.Column="1" Margin="2" Content="Source2"/>
        <Button Grid.Row="0" Grid.Column="2" Margin="2" Content="Target"/>

        <TextBox Grid.Row="1" Grid.Column="0" Margin="2"/>
        <TextBox Grid.Row="1" Grid.Column="1" Margin="2"/>
        <TextBox Grid.Row="1" Grid.Column="2" Margin="2"/>

        <DataGrid Grid.Row="2" Grid.ColumnSpan="2" Grid.RowSpan="2" Margin="2"/>

        <CheckBox Grid.Row="2" Grid.Column="2" Margin="2" VerticalAlignment="Top" Content="Select All"/>

        <Button Grid.Row="3" Grid.Column="2" Margin="2"/>
    </Grid>
</Window>

Delete all the designer-generated XAML and replace it by that.
This XAML generates resolution-independent output. It will stretch all UI elements to the available Window / Screen size.
Notice that the Visual Studio WPF designer will NOT produce resolution-independent content. Therefore it's completely useless and nobody uses that.
Writing XAML is a pleasant activity, very much better than hand-coding UIs in crappy dinosaur technologies such as winforms. That's why winforms requires a visual designer, whereas WPF does not.
Also, before you start coding the logic of your application, I suggest you take a look at @Rachel's Excellent Explanation about what it means to start "thinking the WPF way", and also have a look at the MVVM design pattern.

Thanks for the answer....let me try this. And ya, do not worry...I am using MVVM design pattern otherwise I would not have chosen WPF for this small application. — Sandy, Jun 05 '13 at 06:39

Form controls visual changes on starting form

1 Answers1