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

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? How does it look like after starting

How does it look like in XAML designer

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:note that I set Height and Width of Window also to auto and every Grid as well

c++sharpwpfxamloopresponsive-design


Solution 1:[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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Arthur Edgarov

Related Questions