Design view being different from actual view when running
I am making a WPF program. My problem is that the design view is different from what is actually being seen when running the program. There are attached pictures of my problem.
The XAML code:
<Page x:Class="TEUD_GUI_Version.MainPage"
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:TEUD_GUI_Version"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="450"
Title="MainPage">
<StackPanel Background="White" MaxHeight="450" MaxWidth="450">
<Label
FontWeight="Bold"
FontSize="20"
HorizontalContentAlignment="Center"
>The Escapists Ultimate Decompiler</Label>
<Button
x:Name="ProjButton"
Margin="0,10,0,0"
Width="400"
>To .proj</Button>
<Button
x:Name="CmapButton"
Margin="0,10,0,0"
Width="400"
>To .cmap</Button>
<Button
x:Name="MapButton"
Margin="0,10,0,0"
Width="400"
>To .map</Button>
<Button
x:Name="DecryptButton"
Margin="0,100,0,0"
Width="400"
>Decrypt Any File</Button>
<Button
x:Name="EncryptButton"
Margin="0,10,0,0"
Width="400"
>Encrypt Any File</Button>
<Button
x:Name="AboutButton"
Margin="0,125,0,0"
Width="400"
>About</Button>
</StackPanel>
</Page>
<Page x:Class="TEUD_GUI_Version.MainPage"
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:TEUD_GUI_Version"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="450"
Title="MainPage">
<StackPanel Background="White" MaxHeight="450" MaxWidth="450">
<Label
FontWeight="Bold"
FontSize="20"
HorizontalContentAlignment="Center"
>The Escapists Ultimate Decompiler</Label>
<Button
x:Name="ProjButton"
Margin="0,10,0,0"
Width="400"
>To .proj</Button>
<Button
x:Name="CmapButton"
Margin="0,10,0,0"
Width="400"
>To .cmap</Button>
<Button
x:Name="MapButton"
Margin="0,10,0,0"
Width="400"
>To .map</Button>
<Button
x:Name="DecryptButton"
Margin="0,100,0,0"
Width="400"
>Decrypt Any File</Button>
<Button
x:Name="EncryptButton"
Margin="0,10,0,0"
Width="400"
>Encrypt Any File</Button>
<Button
x:Name="AboutButton"
Margin="0,125,0,0"
Width="400"
>About</Button>
</StackPanel>
</Page>
24 Replies
$rulesofwpf
Rules of WPF:
❌ Avoid the WPF Designer to eliminate a category of confusing bugs
❌ Don't rely on Margin as the primary tool for layouts
❌ Avoid writing UserControls or subclassing to extend a default control -- use Behaviors instead (Microsoft.Xaml.Behaviors.Wpf)
✅ Write XAML by hand and autoformat with "Ctrl K,D" or XAML Styler
✅ Rely upon XAML Hot Reload to design your app's UI at runtime
✅ Use layout controls (Grid, DockPanel, etc) to support proper resizing
✅ Use data binding to eliminate glue code and state synchronization issues
✅ Use collection controls and DataTemplate to dynamically create lists of controls
✅ Learn MVVM to create maintainable apps
✅ Use the Dispatcher to update controls from non-UI threads
✅ WPF's default controls can be easily modernized via $wpfuilibs
✅ Include relevant XAML, code-behind, and ViewModel code for questions when possible
Rules of WPF:
❌ Avoid the WPF Designer to eliminate a category of confusing bugs
❌ Don't rely on Margin as the primary tool for layouts
❌ Avoid writing UserControls or subclassing to extend a default control -- use Behaviors instead (Microsoft.Xaml.Behaviors.Wpf)
✅ Write XAML by hand and autoformat with "Ctrl K,D" or XAML Styler
✅ Rely upon XAML Hot Reload to design your app's UI at runtime
✅ Use layout controls (Grid, DockPanel, etc) to support proper resizing
✅ Use data binding to eliminate glue code and state synchronization issues
✅ Use collection controls and DataTemplate to dynamically create lists of controls
✅ Learn MVVM to create maintainable apps
✅ Use the Dispatcher to update controls from non-UI threads
✅ WPF's default controls can be easily modernized via $wpfuilibs
✅ Include relevant XAML, code-behind, and ViewModel code for questions when possible
Margin is the spacing between elements
It is not the absolute position
Do not use the designer / drag n drop
i dont drag and drop
i thought that was how you do it 😭
lol
Use layout controls
so how shouldve i done it
ok
so use a grid as well?
ok now i am using a canvas and it looks even worse lol
<Page x:Class="TEUD_GUI_Version.MainPage"
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:TEUD_GUI_Version"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="450"
Title="MainPage">
<Canvas Background="White" Width="450" Height="450">
<Label
FontWeight="Bold"
FontSize="20"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Width="450"
Height="50"
>The Escapists Ultimate Decompiler</Label>
<Button
x:Name="ProjButton"
Height="25"
Width="400"
Canvas.Left="25"
Canvas.Top="50"
>To .proj</Button>
<Button
x:Name="CmapButton"
Height="25"
Width="400"
Canvas.Left="25"
Canvas.Top="85"
>To .cmap</Button>
<Button
x:Name="MapButton"
Height="25"
Width="400"
Canvas.Left="25"
Canvas.Top="120"
>To .map</Button>
<Button
x:Name="DecryptButton"
Height="25"
Width="400"
Canvas.Left="25"
Canvas.Top="200"
>Decrypt Any File</Button>
<Button
x:Name="EncryptButton"
Height="25"
Width="400"
Canvas.Left="25"
Canvas.Top="235"
>Encrypt Any File</Button>
<Button
x:Name="AboutButton"
Height="25"
Width="400"
Canvas.Left="25"
Canvas.Top="400"
>About</Button>
</Canvas>
</Page>
<Page x:Class="TEUD_GUI_Version.MainPage"
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:TEUD_GUI_Version"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="450"
Title="MainPage">
<Canvas Background="White" Width="450" Height="450">
<Label
FontWeight="Bold"
FontSize="20"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Width="450"
Height="50"
>The Escapists Ultimate Decompiler</Label>
<Button
x:Name="ProjButton"
Height="25"
Width="400"
Canvas.Left="25"
Canvas.Top="50"
>To .proj</Button>
<Button
x:Name="CmapButton"
Height="25"
Width="400"
Canvas.Left="25"
Canvas.Top="85"
>To .cmap</Button>
<Button
x:Name="MapButton"
Height="25"
Width="400"
Canvas.Left="25"
Canvas.Top="120"
>To .map</Button>
<Button
x:Name="DecryptButton"
Height="25"
Width="400"
Canvas.Left="25"
Canvas.Top="200"
>Decrypt Any File</Button>
<Button
x:Name="EncryptButton"
Height="25"
Width="400"
Canvas.Left="25"
Canvas.Top="235"
>Encrypt Any File</Button>
<Button
x:Name="AboutButton"
Height="25"
Width="400"
Canvas.Left="25"
Canvas.Top="400"
>About</Button>
</Canvas>
</Page>
Not right layout control. Try again.
Also remove width - it overrides auto-scaling
Read up on the controls
Also anything in
d is design-time only
So window width and height are not set
Meaning it will auto-scale to contentomg
its doing it in grids too
<Grid Background="White" Width="450" Height="450">
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="25"/>
<RowDefinition Height="10"/>
<RowDefinition Height="25"/>
<RowDefinition Height="10"/>
<RowDefinition Height="25"/>
<RowDefinition Height="50"/>
<RowDefinition Height="25"/>
<RowDefinition Height="10"/>
<RowDefinition Height="25"/>
<RowDefinition Height="150"/>
<RowDefinition Height="25"/>
</Grid.RowDefinitions>
<Label
FontWeight="Bold"
FontSize="20"
Grid.Row="0"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
>The Escapists Ultimate Decompiler</Label>
<Button
x:Name="ProjButton"
Grid.Row="1"
>To .proj</Button>
<Button
x:Name="CmapButton"
Grid.Row="3"
>To .cmap</Button>
<Button
x:Name="MapButton"
Grid.Row="5"
>To .map</Button>
<Button
x:Name="DecryptButton"
Grid.Row="7"
>Decrypt Any File</Button>
<Button
x:Name="EncryptButton"
Grid.Row="9"
>Encrypt Any File</Button>
<Button
x:Name="AboutButton"
Grid.Row="11"
>About</Button>
</Grid>
</Page>
<Grid Background="White" Width="450" Height="450">
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="25"/>
<RowDefinition Height="10"/>
<RowDefinition Height="25"/>
<RowDefinition Height="10"/>
<RowDefinition Height="25"/>
<RowDefinition Height="50"/>
<RowDefinition Height="25"/>
<RowDefinition Height="10"/>
<RowDefinition Height="25"/>
<RowDefinition Height="150"/>
<RowDefinition Height="25"/>
</Grid.RowDefinitions>
<Label
FontWeight="Bold"
FontSize="20"
Grid.Row="0"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
>The Escapists Ultimate Decompiler</Label>
<Button
x:Name="ProjButton"
Grid.Row="1"
>To .proj</Button>
<Button
x:Name="CmapButton"
Grid.Row="3"
>To .cmap</Button>
<Button
x:Name="MapButton"
Grid.Row="5"
>To .map</Button>
<Button
x:Name="DecryptButton"
Grid.Row="7"
>Decrypt Any File</Button>
<Button
x:Name="EncryptButton"
Grid.Row="9"
>Encrypt Any File</Button>
<Button
x:Name="AboutButton"
Grid.Row="11"
>About</Button>
</Grid>
</Page>
Read what I said
i did
i read about layout stuff
This
i did that
the NavigationWindow is also 450x450
Why do you set the size of the grid?
to make sure its fine
If you want it to auto-scale remove size properties
ok
still the same
Also dont rely on designer
Screw the designer
Use hot reload
You can run your app in debug and change xaml at runtime
k
so then it should be good?
sure.
its shifted to the right a little bit
im actually dumn
i just had to do the horizontal and vertical alignments to be center for the page and window
💀
<Window x:Class="WpfApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:WpfApp.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:WpfApp"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Title="MainWindow"
Width="400"
Height="450"
mc:Ignorable="d">
<Window.Resources>
<Style x:Key="Title"
TargetType="TextBlock">
<Setter Property="FontSize"
Value="18" />
<Setter Property="FontWeight"
Value="Bold" />
<Setter Property="TextAlignment"
Value="Center" />
<Setter Property="Margin"
Value="5" />
</Style>
<Style TargetType="Button">
<Setter Property="Margin"
Value="5" />
</Style>
</Window.Resources>
<Grid Margin="10,5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0"
Style="{StaticResource Title}"
Text="The Escapists Ultimate Decompiler" />
<StackPanel Grid.Row="1">
<Button Content="To .proj" />
<Button Content="To .cmap" />
<Button Content="To .map" />
</StackPanel>
<StackPanel Grid.Row="2"
VerticalAlignment="Center">
<Button Content="Decrypt Any File" />
<Button Content="Encrypt Any File" />
</StackPanel>
<StackPanel Grid.Row="3">
<Button Content="About" />
</StackPanel>
</Grid>
</Window>
<Window x:Class="WpfApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:WpfApp.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:WpfApp"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Title="MainWindow"
Width="400"
Height="450"
mc:Ignorable="d">
<Window.Resources>
<Style x:Key="Title"
TargetType="TextBlock">
<Setter Property="FontSize"
Value="18" />
<Setter Property="FontWeight"
Value="Bold" />
<Setter Property="TextAlignment"
Value="Center" />
<Setter Property="Margin"
Value="5" />
</Style>
<Style TargetType="Button">
<Setter Property="Margin"
Value="5" />
</Style>
</Window.Resources>
<Grid Margin="10,5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0"
Style="{StaticResource Title}"
Text="The Escapists Ultimate Decompiler" />
<StackPanel Grid.Row="1">
<Button Content="To .proj" />
<Button Content="To .cmap" />
<Button Content="To .map" />
</StackPanel>
<StackPanel Grid.Row="2"
VerticalAlignment="Center">
<Button Content="Decrypt Any File" />
<Button Content="Encrypt Any File" />
</StackPanel>
<StackPanel Grid.Row="3">
<Button Content="About" />
</StackPanel>
</Grid>
</Window>