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}">

                <Border
                    
                    Width="1852" 
                    Height="1126" Background="Black"
                    
                    >
                    <Border
                        Background="White" 
                        CornerRadius="20"
                        Height="950"
                        Width="1700"
                        Margin="0,0,93,118"
                       
                        >
                        <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>

CodePudding user response：

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>