Elements overlap each other

Question

Hello. I'm trying to build a wpf application using this layout. I have set all the elements, but they overlap each other. Can you help with column 2? What am I doing wrong. I need to drag an element from 1 column to 2 and the text should go to one of the textblocks

<Window x:Class="WpfApp6.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:WpfApp6"

    mc:Ignorable="d"

ResizeMode="NoResize"

Title="basket" Height="450" Width="910" WindowStyle="ToolWindow" WindowStartupLocation="CenterScreen" Background="#FFCEF1F3">

<DockPanel Margin="0,0,0,34">

    <StackPanel Style="{DynamicResource StyleOfStackPanel}" DockPanel.Dock="Left">

        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">

            <TextBlock Text="Products" HorizontalAlignment="Left" Padding="0 0 10 0" />

            <Button Width="15" Height="15" Background="DeepSkyBlue" Click="Button_AddProducts" />

        </StackPanel>

        <Border Style="{DynamicResource StyleOfBorder}">

            <ItemsControl x:Name="itemsOfProducts">

                <ItemsControl.ItemsPanel>

                    <ItemsPanelTemplate>

                        <StackPanel />

                    </ItemsPanelTemplate>

                </ItemsControl.ItemsPanel>

                <ItemsControl.ItemTemplate>

                    <DataTemplate>

                        <StackPanel>

                            <TextBox Text="{Binding NameOfProduct}" Margin="10 5 10 1" SelectionTextBrush="{x:Null}" SelectionBrush="{x:Null}" />

                        </StackPanel>

                    </DataTemplate>

                </ItemsControl.ItemTemplate>

            </ItemsControl>

        </Border>

        <Button Content="Add" Width="135" Background="Yellow" HorizontalAlignment="Center" />

    </StackPanel>

    <StackPanel Style="{DynamicResource StyleOfStackPanel}">

        <TextBlock Text="Buy" HorizontalAlignment="Center" />

        <Border Style="{DynamicResource StyleOfBorder}">

            <Grid>

                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Height="25" VerticalAlignment="Top">

                    <TextBlock Text="Date" Margin="50 0 0 0" Padding="0 0 10 0" VerticalAlignment="Center"/>

                    <TextBox x:Name="textBoxOfDate" Width="100" Height="17" />

                </StackPanel>

                <ItemsControl x:Name="itemsControlOfPurchase" Margin="0,30,0,0">

                    <ItemsControl.ItemsPanel>

                        <ItemsPanelTemplate>

                            <StackPanel />

                        </ItemsPanelTemplate>

                    </ItemsControl.ItemsPanel>

                    <ItemsControl.ItemTemplate>

                        <DataTemplate>

                            <StackPanel Orientation="Horizontal">

                                <Border>

                                    <Grid>

                                        <TextBlock Text="{Binding NameOfProduct}" Padding="0 0 10 0"/>

                                        <TextBox x:Name="textBoxOfQuantity" IsReadOnly="False" Padding="0 0 10 0" />

                                        <TextBlock Text="pc." Padding="0 0 10 0"/>

                                        <TextBlock Text="price" Padding="0 0 10 0"/>

                                        <TextBox x:Name="textBoxOfPrice" IsReadOnly="False" Padding="0 0 10 0" />

                                        <TextBox Text="$.  total."/>

                                        <TextBox x:Name="textBoxOfTotalPrice"/>

                                    </Grid>

                                </Border>

                            </StackPanel>

                        </DataTemplate>

                    </ItemsControl.ItemTemplate>

                </ItemsControl>

            </Grid>

        </Border>

        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">

            <Button Content="reset" Width="135" Background="LightPink" />

            <Button Content="Save" Width="135" Background="GreenYellow" />

        </StackPanel>

    </StackPanel>

    <StackPanel Style="{DynamicResource StyleOfStackPanel}" DockPanel.Dock="Right">

        <TextBlock Text="History" HorizontalAlignment="Center" />

        <Border Style="{DynamicResource StyleOfBorder}">

            <ItemsControl ItemsSource="{Binding historyOfPurchases}">

                <ItemsControl.ItemsPanel>

                    <ItemsPanelTemplate>

                        <StackPanel />

                    </ItemsPanelTemplate>

                </ItemsControl.ItemsPanel>

                <ItemsControl.ItemTemplate>

                    <DataTemplate>

                        <TextBox IsReadOnly="True" Text="{Binding Name}" Margin="0,0,5,5" />

                    </DataTemplate>

                </ItemsControl.ItemTemplate>

            </ItemsControl>

        </Border>

        <Button Content="New" Width="135" HorizontalAlignment="Center" Background="LightBlue" />

    </StackPanel>

</DockPanel>
</Window>

Answer 1

Hi,@vitaminchik. Welcome to Microsoft Q&A. 

Reason: <Grid> incorrect usage.

<Grid> needs to define how many rows and columns it has, and needs to specify the row and column of the element through Grid.Row and Grid.Column like DockPanel.Dock="Left". By default, the Grid has 0 rows and 0 columns. When the element does not specify Grid.Row and Grid.Column, the default is Grid.Row=0 and Grid.Column=0. So you will see overlap.

 

Solution:You could refer to the following code to modify.

<StackPanel Style="{DynamicResource StyleOfStackPanel}" >

 

    <TextBlock Text="Buy" HorizontalAlignment="Center" />

 

    <Border Style="{DynamicResource StyleOfBorder}">

 

        <Grid Height="300" >

            <!--Set the height in advance so that you could divide the height of different rows later-->

            <Grid.RowDefinitions>

                <RowDefinition Height="*"></RowDefinition>

                <RowDefinition Height="11*"></RowDefinition>

                <!--Divide the row height between two rows in a ratio of 1:13. You could also specify a specific value to divide.-->

            </Grid.RowDefinitions>

            <StackPanel  Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Center" Height="25" VerticalAlignment="Top">

 

                <TextBlock Text="Date" Margin="50 0 0 0" Padding="0 0 10 0" VerticalAlignment="Center"/>

 

                <TextBox x:Name="textBoxOfDate" Width="100" Height="17" />

 

            </StackPanel>

 

            <ItemsControl Grid.Row="1" x:Name="itemsControlOfPurchase" Margin="0,30,0,0" HorizontalAlignment="Center">

                <!--Center the ItemsControl horizontally here-->

                <ItemsControl.ItemsPanel>

 

                    <ItemsPanelTemplate>

 

                        <StackPanel />

 

                    </ItemsPanelTemplate>

 

                </ItemsControl.ItemsPanel>

 

                <ItemsControl.ItemTemplate>

 

                    <DataTemplate>

 

                        <StackPanel Orientation="Horizontal" Margin="0,0,0,30">

                            <!--Use Margin here to keep each Item separated-->

                            <Border BorderBrush="Green" BorderThickness="1">

                                <!--The border color is drawn with BorderBrush, and the border width is drawn with BorderThickness.-->

                                <Grid >

                                    <Grid.ColumnDefinitions>

                                        <ColumnDefinition Width="*"></ColumnDefinition>

                                        <ColumnDefinition Width="*"></ColumnDefinition>

                                        <!--Divide column width by 1:1-->

                                    </Grid.ColumnDefinitions>

                                    <Grid.RowDefinitions>

                                        <RowDefinition></RowDefinition>

                                        <RowDefinition></RowDefinition>

                                        <RowDefinition></RowDefinition>

                                        <RowDefinition></RowDefinition>

                                        <!--Divide row height by 1:1:1:1-->

                                    </Grid.RowDefinitions>

                                    <TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding NameOfProduct}" Padding="0 0 10 0" Width="100" Margin="3" />

 

                                    <TextBox Grid.Row="0" Grid.Column="1" x:Name="textBoxOfQuantity" IsReadOnly="False" Padding="0 0 10 0" Width="100" Margin="3"/>

 

                                    <TextBlock Grid.Row="1" Grid.Column="0" Text="pc." Padding="0 0 10 0" Width="100" Margin="3"/>

 

                                    <TextBlock Grid.Row="1" Grid.Column="1" Text="price" Padding="0 0 10 0" Width="100" Margin="3"/>

 

                                    <TextBox Grid.Row="2" Grid.Column="0" x:Name="textBoxOfPrice" IsReadOnly="False" Padding="0 0 10 0" Width="100" Margin="3"/>

 

                                    <TextBox Grid.Row="2" Grid.Column="1" Text="$.  total." Width="100" Margin="3"/>

 

                                    <TextBox Grid.Row="3" Grid.ColumnSpan="2" x:Name="textBoxOfTotalPrice" Width="150" Margin="3"/>

                                    <!--Grid.ColumnSpan="2" combines the two columns of the current row into one column.-->

                                </Grid>

 

                            </Border>

 

                        </StackPanel>

 

                    </DataTemplate>

 

                </ItemsControl.ItemTemplate>

 

            </ItemsControl>

 

        </Grid>

 

    </Border>

 

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">

 

        <Button Content="reset" Width="135" Background="LightPink" />

 

        <Button Content="Save" Width="135" Background="GreenYellow" />

 

    </StackPanel>

 

</StackPanel>

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.