Why does the application look different after launching than in designer?

Question

I have a little question. I'm new to WPF and a strange thing happened to me. In the designer everything looks fine, but as soon as I start the application, a piece ,,cuts off"(via.photo) and it looks pretty bad. Could it be that the application is not responsive?

My XAML code:

<TabItem Header="TabItem" 
                 Visibility="Hidden" 
                 x:Name="Home_Page" 
                 Background="{x:Null}" 
                 BorderBrush="{x:Null}" Height="Auto"
                 Width="Auto"
                 >

            <Border 
                Background="Black"
                HorizontalAlignment="Center"
                VerticalAlignment="Center" 
                Width="1340" 
                Height="1100"
                CornerRadius="20"
                >
                <Border
                    Background="White" 
                    CornerRadius="20"
                    Height="700"
                    Width="500"
                    Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center"
                   
                    >
                    <Grid 
                        
                        >
                        <TextBlock
                            Text="Welcome"
                            Width="200"
                            Height="200"
                            Foreground="Black"
                            FontSize="50" FontFamily="/Peel_App;component/Fonts/#Kashima Brush Demo"
                            
                            >

                        </TextBlock>

                    </Grid>

                </Border>

            </Border>

        </TabItem>

After what I edited app:

Answer 1

Your code has a few issues:

1. You're hardcoding the Margin values to position your controls. Instead, you should use proper panels (DockPanel, WrapPanel, and Grid). Use Margin property to set margin, not a position.
2. Use HorizontalAlignment and VerticalAlignment properties to position your elements, thus your UI would be more responsive and user-friendly.
3. To be able to view, how your window and its content would look like - try to set d:DesignHeght and d:DesignWidth properties on a window. Try to Google how to use them.

In the end, your code should look like following:

<TabItem Header="TabItem"
         Visibility="Hidden"
         x:Name="Home_Page"
         Background="{x:Null}"
         BorderBrush="{x:Null}"> <!-- Properties order is a bit confusing, it is better to order them by priority, or just alphabetically. -->
    <Border Background="Black">
        <Border Background="White"
                CornerRadius="20"
                Margin="0,0,93,118"> <!-- Should it have such values? Maybe just somenthing like Margin="0 0 90 120"? -->
            <Grid>
                <TextBlock Text="Welcome"
                           Foreground="Black"
                           FontSize="50" 
                           FontFamily="/Peel_App;component/Fonts/#Kashima Brush Demo"/>
            </Grid>
        </Border>
    </Border>
</TabItem>