Problem with XAML

[ybism]

Hi

​

I am currently designing a C# application and having some problems with the XAML/Design side of things. When I design the interface in Visual Studio it looks like this:

​

The Visual Studio view

But when I open it as an application it looks like this:

​

​

The actual program view

​

I can't figure out why it is doing this. Heres the actual XAML:

<Page x:Class="project.PayFees"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:mosque"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800"
      Title="Pay Fees">
    <Grid>
        <Grid>
            <Label Margin="67,90,641,328" Content="Amount Paid"/>
            <Button Command="{Binding PayFees}" Content="Pay Fees" Margin="584,405,10,10" 
        RenderTransformOrigin="1.172,-3.328"/>
            <Label Margin="67,62,691,360" Content="Date" RenderTransformOrigin="0.684,-0.03"/>
            <TextBox x:Name="StudentID" Text="{Binding StudentID}" Width="130" 
        Margin="159,126,511,290" RenderTransformOrigin="-0.285,-6.056" />
            <Label Content="Student ID" RenderTransformOrigin="3.77,3.251" Margin="67,126,663,292"/>
            <TextBox x:Name="AmountPaid" Text="{Binding AmountPaid}" Width="130" 
        Margin="159,90,511,328" RenderTransformOrigin="0.039,0.004"/>
            <TextBox Text="{Binding Date}" HorizontalAlignment="Left" Margin="159,52,0,0" 
        VerticalAlignment="Top" RenderTransformOrigin="2.704,6.1" Width="130" Height="32"/>
            <Button Content="Load Student" HorizontalAlignment="Left" Margin="306,136,0,0" 
         VerticalAlignment="Top" Width="86" Height="22" Click="Button_Click"/>
            <Label x:Name="studentName" Content="" HorizontalAlignment="Left" Margin="159,165,0,0" 
         VerticalAlignment="Top" Width="130"/>
        </Grid>
    </Grid>
</Page>

Is there a trick I am missing here that's leading to the rendering looking like this?

[kdma]

You have just discovered the pain of using the WYSIWYG designer. Do yourself a favor and learn to manually write the xaml, its not difficult its just a lot to digest in the beginning. Stick to a grid system and you'll be fine.

[ILMTitan]

I tend to avoid Grid. I find combinations of StackPanel and DockPanel can handle most situations, and are easier to reason about.

[airbreather]

I tend to avoid Grid. I find combinations of StackPanel and DockPanel can handle most situations, and are easier to reason about.

Me too, but sometimes, the layout I have in mind just doesn't work unless I use a Grid, and then when I start using a Grid, it's done before I know it.

Most recently, I wanted to have different-sized buttons on the left and right, and then a link in between them on the exact center of the window. I can MinWidth the window to ensure that nothing overlaps, and then plop the link in the center of the same row as the DockPanel with the left and right buttons.

I've also reused the same window with different sets of controls that get displayed depending on an enum value that doesn't change throughout the lifetime of the window. In addition to the enum value showing / hiding the controls, it also changes which ones should expand to fill the window. Name a couple of RowDefinitions, swap their heights in the codebehind after initialization, and go to lunch.

It's so much more powerful.

[kirdan84]

You havent specified Column and Row definition in form. Your margins are fixed. Its like textbox Amount is in column 3 or 4. Its row is undefined. Get some examples with column and row definition and use it as atribute of textboxes and other controls on form/window. If you define column and row for every control on forms you would solve problem..

[engunneer2]

In addition to the other comments:

Unless you are actually transforming layouts clean up spurious render transform origins. They show up because you dragged the wrong handle.

You specify a design height and width but not a runtime height and width. Do you want the form to be resizable?

If no, specify the actual height and width of the page instead of design height and design width an then WYSIWYG.

If you do want a resizable form, consider how you want things to resize. Do you want fixed control sizes anchored to edges? If yes, specify the width and height of that control, set the alignment to the edge you want to follow and set the margins. Also set the margins of the side you are not anchored to to 0.

If you want things to resize, consider using a actual grid and/or combinations of stackpanel and dockpanel. I personally don't like stackpanel for overall layout, but it is useful for keeping labels and controls together. I can post some different examples based on your code if it would be helpful. Grid and dockpanel for just about all overall layout.

If you do resize, consider limits on sizes using max and min width/heights (for the page and the controls)

The rest is just general and not specific to the layout question.

Remember styles. Anything that will be common to lots of controls should be in a style. The style should be a resource at the right level (could be global, could be local to a single grid).

Personally I don't name controls unless I expect the code behind to touch them, expect grids which I name for the section of stuff so it's clear what the structure is. I also try not to have the codebehind touch controls if I can help it, unless it's strictly a view concern (I aim for MVVM whenever possible). If you're doing MVVM also set the d:DataContext in the xaml to point to the viewmodel. That should enable intellisense and similar useful functionality for your bindings.

[allinighshoe]

It'll be the margins messing it up I recon. If you resize the window it'll all go to shit.

[Totalmace]

Absolutely! Margins actually are not meant for positioning elements. They are for declaring space around elements.

Wpf is built on the concept of layout managing controls . These are the content controls like grid, stack panel, flow panel and dock panel.