CODEWITHSUNDEEP
c#wpfxaml
jd1
jd1

Reputation: 21

WPF showing whitespace that is not present in designer view

I'm playing around with WPF in Visual Studio code, attempting to create a GUI.

The GUI looks fine in my design view, but when I compile / run the application, it shows some whitespace that is not present in the design view. The XAML code is below.

<Window x:Class="GUIProject.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:GUIProject"
        mc:Ignorable="d"
        Title="MainWindow" Height="650" Width="1200"
        WindowStyle="None"
        ResizeMode="NoResize">

    <Grid Background="#FF34495E">
        <Rectangle x:Name="SidebarWrapper" HorizontalAlignment="Left" Height="583" VerticalAlignment="Top" Width="200" Fill="#FF2C3E50" Margin="0,50,0,0"/>
        <Rectangle HorizontalAlignment="Left" Height="650" VerticalAlignment="Top" Width="5" Fill="#FFE74C3C"/>
        <Rectangle HorizontalAlignment="Left" Height="50" VerticalAlignment="Top" Width="1195" Fill="#FF2C3E50" Margin="5,0,0,0"/>
    </Grid>
</Window>

To give you an idea of what it looks like in the design view: Design view

To give you an idea of what it looks like when i run it: When running

When I set the SidebarWrapper height to 600 (window height - topbar (650 - 50)), it removes the whitespace and gives me the result that I want. But the design view in this image shows that it partially goes out of the main window, which I do not think is correct. this

I'm pretty sure that I'm either missing something, or did something wrong. I would appreciate it if someone could point me in the right direction.

Edited code that utilizes the grid.

<Window x:Class="GUIProject.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:GUIProject"
        mc:Ignorable="d"
        Title="MainWindow" Height="650" Width="1200"
        WindowStyle="None"
        ResizeMode="NoResize" AllowsTransparency="True">

    <Grid Background="#FF34495E" Height="650">
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="600"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"/>
            <ColumnDefinition Width="1000"/>
        </Grid.ColumnDefinitions>

        <Rectangle x:Name="SidemenuWrapper" Grid.Column="0" Grid.Row="1" Fill="#FF2C3E50"/>
        <Rectangle x:Name="TopmenuWrapper" Grid.ColumnSpan="2" Grid.Row="0" Fill="#2c3e50"/>
    </Grid>
</Window>

Upvotes: 1

Views: 197

Answers (1)

Chris W.
Chris W.

Reputation: 23280

So like we talked about the Grid Class is super handy when creating layouts in xaml, it's like table element in HTML. While relying on adhoc static margins, padding, etc is generally not the best route. So something like below (omitting some default values etc for cleaner code) is more along the lines of what you're aiming for. Cheers!

<Grid Background="#FF34495E">
   <Grid.RowDefinitions>
      <RowDefinition Height="50"/>
      <RowDefinition Height="*"/>
   </Grid.RowDefinitions>
   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="200"/>
      <ColumnDefinition Width="*"/>
   </Grid.ColumnDefinitions>
      <Rectangle x:Name="TopmenuWrapper" Grid.ColumnSpan="2" Fill="#FF2C3E50"/>
      <Rectangle x:Name="SidebarWrapper" Grid.Row="1" Fill="#FF2C3E50"/>
      <Border x:Name="ContentAreaWrapper" Grid.Row=1" Grid.Column="1"><!-- Content Here --></Border>
</Grid>

Upvotes: 4

Related Questions