C#•8mo ago

WPF UI appears different in debug

idk... My first WPF app. Looks like I matched the grid with the right coordinates. Still being weird. What am I missing here?

<Window x:Class="Test.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:EpicUnfriender"
        mc:Ignorable="d"
        Title="MainWindow" Height="193" Width="412">
    <Grid Margin="0,-0,0,-0">
        <Grid.RowDefinitions>
            <RowDefinition Height="193*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="412*"/>
        </Grid.ColumnDefinitions>
        <Button x:Name="Start" Content="Start" HorizontalAlignment="Left" Height="22" Margin="21,141,0,0" VerticalAlignment="Top" Width="68" BorderBrush="#FFC35151" RenderTransformOrigin="0.457,0.761" Click="Button_Click" Background="#FFF5F5FF"/>
        <Button x:Name="Stop" Content="Stop" HorizontalAlignment="Left" Height="22" Margin="114,141,0,0" VerticalAlignment="Top" Width="64" Background="#FFF3F3F3" BorderBrush="#FFC35151" RenderTransformOrigin="0.457,0.761"/>
        <TextBox x:Name="LogBox" HorizontalAlignment="Center" Margin="0,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="370" Height="126"/>


    </Grid>
</Window>

<Window x:Class="Test.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:EpicUnfriender"
        mc:Ignorable="d"
        Title="MainWindow" Height="193" Width="412">
    <Grid Margin="0,-0,0,-0">
        <Grid.RowDefinitions>
            <RowDefinition Height="193*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="412*"/>
        </Grid.ColumnDefinitions>
        <Button x:Name="Start" Content="Start" HorizontalAlignment="Left" Height="22" Margin="21,141,0,0" VerticalAlignment="Top" Width="68" BorderBrush="#FFC35151" RenderTransformOrigin="0.457,0.761" Click="Button_Click" Background="#FFF5F5FF"/>
        <Button x:Name="Stop" Content="Stop" HorizontalAlignment="Left" Height="22" Margin="114,141,0,0" VerticalAlignment="Top" Width="64" Background="#FFF3F3F3" BorderBrush="#FFC35151" RenderTransformOrigin="0.457,0.761"/>
        <TextBox x:Name="LogBox" HorizontalAlignment="Center" Margin="0,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="370" Height="126"/>


    </Grid>
</Window>

14 Replies

! 0FalcoOP•8mo ago

Left image is the preview, right image is when I debug.

Jimmacle•8mo ago

don't use the designer it doesn't generate real layouts and just throws margins on things, which leads to problems like this

! 0FalcoOP•8mo ago

I am probably just doing something wrong in the xmlsn

Jimmacle•8mo ago

in the xaml yes, using margins like this is a bad idea you have a grid but you're not actually using it to lay out these controls

! 0FalcoOP•8mo ago

I honestly just placed the button and the textbox, everything else is just fatfingered Yeah that grid just appears by my clicks

Jimmacle•8mo ago

right, you should type the xaml yourself the drag and drop editor is bad

Buddy•8mo ago

$rulesofwpf

MODiX•8mo ago

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

SpReeD•8mo ago

$wpfuilibs

MODiX•8mo ago

MahApps https://github.com/MahApps/MahApps.Metro ModernWPF https://github.com/Kinnara/ModernWpf Adonis UI https://github.com/benruehl/adonis-ui Material Design https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit Biaui https://github.com/YoshihiroIto/Biaui HandyControl https://github.com/HandyOrg/HandyControl WPFUI (Windows 11 inspired) https://github.com/lepoco/wpfui Waves (WPF/Avalonia/More) https://github.com/waves-framework/waves.ui.wpf

Mango•8mo ago

Use a grid with 2 columns and 2 rows. Both columns width *, * two rows one with height * the next auto Place your box spanning across both columns in row 0, buttons in column 0 row 1 column 1 row 1 That'll center the buttons actually. You can use 1 column to keep the buttons side by side

! 0FalcoOP•8mo ago

I edited the xaml myself during runtime, but it still isn't fitting correctly at the top. As you can see in the screenshot.

! 0FalcoOP•8mo ago

<Window x:Class="Test.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:EpicUnfriender"
        mc:Ignorable="d"
        Title="MainWindow" Height="210" Width="375" ResizeMode="NoResize">
    <Grid ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <TextBox x:Name="LogBox" HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Center" Width="375" Height="140
"  Grid.Row="0" Grid.RowSpan="2" Grid.ColumnSpan="3" Background="#FF1F9200"/>
        <Button x:Name="Start" Content="Start (F8)" HorizontalAlignment="center" Height="21"  VerticalAlignment="Center" Width="73" BorderBrush="#FFC35151" Click="Button_Click" Background="#FFF5F5FF" Grid.Row="2" />
        <Button x:Name="Stop" Content="Stop (F9)" HorizontalAlignment="center" Height="21"  VerticalAlignment="Center" Width="73" Background="#FFF3F3F3" BorderBrush="#FFC35151" Grid.Column="2" Grid.Row="2"/>
    </Grid>
</Window>

<Window x:Class="Test.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:EpicUnfriender"
        mc:Ignorable="d"
        Title="MainWindow" Height="210" Width="375" ResizeMode="NoResize">
    <Grid ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <TextBox x:Name="LogBox" HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Center" Width="375" Height="140
"  Grid.Row="0" Grid.RowSpan="2" Grid.ColumnSpan="3" Background="#FF1F9200"/>
        <Button x:Name="Start" Content="Start (F8)" HorizontalAlignment="center" Height="21"  VerticalAlignment="Center" Width="73" BorderBrush="#FFC35151" Click="Button_Click" Background="#FFF5F5FF" Grid.Row="2" />
        <Button x:Name="Stop" Content="Stop (F9)" HorizontalAlignment="center" Height="21"  VerticalAlignment="Center" Width="73" Background="#FFF3F3F3" BorderBrush="#FFC35151" Grid.Column="2" Grid.Row="2"/>
    </Grid>
</Window>

For the grid: I'm using 3 rows: 125+125+125 = 375 width and 3 columns: 70+70+70 = 140 height The window is the exact same 375 width, 140 height but still as you can see at the top of the textbox, the text isnt fitting Is this because of the bar at the top? Do I need to add that to the total?

Jimmacle•8mo ago

you're still explicitly sizing everything layouts should be responsive to the window size * 3 columns Auto,*,Auto * 2 rows *,Auto * text box at column 0 row 0 with a columnspan of 3 * start at column 0 row 1 with some margin/padding around it * stop at column 2 row 1 with some margin/padding around it alternative to some of the margin/padding is to set ratios for the grid sizes like *,2*,*

Gaming

Programming

WPF UI appears different in debug