C
C#•9mo ago
Falco

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>
No description
No description
14 Replies
Falco
FalcoOP•9mo ago
Left image is the preview, right image is when I debug.
Jimmacle
Jimmacle•9mo ago
don't use the designer it doesn't generate real layouts and just throws margins on things, which leads to problems like this
Falco
FalcoOP•9mo ago
I am probably just doing something wrong in the xmlsn
Jimmacle
Jimmacle•9mo 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
Falco
FalcoOP•9mo ago
I honestly just placed the button and the textbox, everything else is just fatfingered Yeah that grid just appears by my clicks
Jimmacle
Jimmacle•9mo ago
right, you should type the xaml yourself the drag and drop editor is bad
Buddy
Buddy•9mo ago
$rulesofwpf
MODiX
MODiX•9mo 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
SpReeD•9mo ago
$wpfuilibs
MODiX
MODiX•9mo ago
Mango
Mango•9mo 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
Falco
FalcoOP•9mo 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.
No description
Falco
FalcoOP•9mo 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
Jimmacle•9mo 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*,*
Want results from more Discord servers?
Add your server