avoid overlaps a datagridview WPF

Question

I have a datagridview that overpowers the other controls, and add it within a grid but just keeps happening, additional information if the controls do not fit in the window are lost. It is possible that a scrollbar appears?

<UserControl x:Class="Laboratorio.Calibracion"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         mc:Ignorable="d" 
         d:DesignHeight="790" d:DesignWidth="860">
<Grid>
    <GroupBox Header="Calibracion">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <GroupBox Grid.Row="0" Grid.Column="0" Header="Equipo">
                <Grid>
                    <Label x:Name="serialLbl" Content="Serial:" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,10,0,0"/>
                    <TextBox x:Name="serialTxb" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" Margin="85,10,0,0" LostFocus="SerialTxb_OnLostFocus"/>
                    <TextBox x:Name="descripcionTxb" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" VerticalAlignment="Top" Width="144" Margin="209,10,0,0" IsEnabled="False"/>
                    <Label x:Name="resolucionLbl" Content="Resolucion:" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,41,0,0"/>
                    <TextBox x:Name="resolucionTxb" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" Margin="85,41,0,0"/>
                </Grid>
            </GroupBox>
            <GroupBox Grid.Row="0" Grid.Column="1" Header="Patron">
                <Grid>
                    <Label x:Name="patronLbl" Content="Patron:" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,10,0,0"/>
                    <ComboBox x:Name="patronCbb" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" Margin="92,7,0,0"/>
                    <Label x:Name="patronLbl_Copy" Content="Niv. Referencia:" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,41,0,0"/>
                    <TextBox x:Name="nivelRefTxb" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" Margin="106,41,0,0"/>
                    <Label x:Name="patronLbl_Copy1" Content="Fluido:" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="217,10,0,0"/>
                    <ComboBox x:Name="fluidoCbb" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" Margin="267,10,0,0"/>
                </Grid>
            </GroupBox>
            <GroupBox Grid.Row="1" Grid.Column="0" Header="Condiciones">
                <Grid>
                    <Label x:Name="temperaturaLbl" Content="Temperatura:" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,10,0,0"/>
                    <TextBox x:Name="temperaturaTxb" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" VerticalAlignment="Top" Width="36" Margin="94,10,0,0"/>
                    <Label x:Name="humedadLbl" Content="Humedad:" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="135,10,0,0"/>
                    <TextBox x:Name="humedadTxb" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" VerticalAlignment="Top" Width="35" Margin="205,10,0,0"/>
                </Grid>
            </GroupBox>
            <GroupBox Grid.Column="0" Grid.Row="2" Header="Comprobacion Inicial">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                    </Grid.RowDefinitions>
                    <Label Grid.Row="0" x:Name="label" Content="Presion:" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                    <TextBox Grid.Row="0" x:Name="presionTxb" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" VerticalAlignment="Top" Width="56" Margin="57,0,0,0"/>
                    <Label Grid.Row="0" x:Name="label1" Content="Lectura" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="118,0,0,0"/>
                    <TextBox Grid.Row="0" x:Name="lecturaTxb" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" VerticalAlignment="Top" Width="61" Margin="172,1,0,0"/>
                    <Button Grid.Row="0" x:Name="AgregarBtn" Content="Agregar" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="266,0,0,0" Click="AgregarBtn_Click"/>
                    <DataGrid Grid.Row="1" x:Name="compInicialDgv" CanUserAddRows="True" AutoGenerateColumns="False">
                        <DataGrid.Columns>
                            <DataGridTextColumn Header="Presion Patron" IsReadOnly="True" Binding="{Binding Path=PresionPatron}"></DataGridTextColumn>
                            <DataGridTextColumn Header="Lecturas" IsReadOnly="True" Binding="{Binding Path=Lectura}"></DataGridTextColumn>
                            <DataGridTextColumn Header="Error" IsReadOnly="True" Binding="{Binding Path=Error}"></DataGridTextColumn>
                        </DataGrid.Columns>
                    </DataGrid>
                    <RadioButton Grid.Row="2" x:Name="ajusteRb" Content="Ajuste" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,10,0,0"/>
                    <RadioButton Grid.Row="2" x:Name="calibracionRb" Content="Calibracion" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="187,10,0,0"/>
                    <TextBox Grid.Row="3" x:Name="observacionTxb" HorizontalAlignment="Left" Height="53" TextWrapping="Wrap" VerticalAlignment="Top" Width="354" Margin="10,54,0,-50"/>
                </Grid>
            </GroupBox>
            <GroupBox Grid.Column="1" Grid.Row="2" Header="Segunda Secuencia">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                    </Grid.RowDefinitions>
                    <Label Grid.Row="0" x:Name="presion2Lbl" Content="Presion:" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                    <TextBox Grid.Row="0" x:Name="presion2Txb" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" VerticalAlignment="Top" Width="56" Margin="57,0,0,0"/>
                    <Label Grid.Row="0" x:Name="lectura2Lbl" Content="Lectura" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="118,0,0,0"/>
                    <TextBox Grid.Row="0" x:Name="lectura2Txb" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" VerticalAlignment="Top" Width="61" Margin="172,1,0,0"/>
                    <Button Grid.Row="0" x:Name="agregar2Btn" Content="Agregar" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="266,0,0,0" Click="Agregar2Btn_OnClick" />
                    <DataGrid Grid.Row="1" x:Name="segSecDgv">
                        <DataGrid.Columns>
                            <DataGridTextColumn Header="Presion Patron" IsReadOnly="True" Binding="{Binding Path=PresionPatron}"></DataGridTextColumn>
                            <DataGridTextColumn Header="Lecturas" IsReadOnly="True" Binding="{Binding Path=Lectura}"></DataGridTextColumn>
                            <DataGridTextColumn Header="Error" IsReadOnly="True" Binding="{Binding Path=Error}"></DataGridTextColumn>
                        </DataGrid.Columns>
                    </DataGrid>
                    <RadioButton Grid.Row="2" x:Name="calibracion2Rb" Content="Ajuste" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="40,10,0,0"/>
                    <RadioButton Grid.Row="2" x:Name="dadoBajaRb" Content="Calibracion" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="128,14,0,0"/>
                    <TextBox Grid.Row="3" x:Name="observacion2Txb" HorizontalAlignment="Left" Height="54" TextWrapping="Wrap" VerticalAlignment="Top" Width="282" Margin="10,51,0,0"/>
                </Grid>
            </GroupBox>
            <GroupBox Grid.Row="3" Grid.Column="0" Header="Datos de Calibracion" Margin="5,5,5,-211">
                <Grid>
                    <Label Content="Punto:"></Label>
                    <TextBox x:Name="puntoTxb" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" VerticalAlignment="Top" Width="60" Margin="61,1,0,0"/>
                    <Button x:Name="addPuntoBtn" Content="Agregar Punto" HorizontalAlignment="Left" VerticalAlignment="Top" Width="93" Margin="126,0,0,0" Click="AgregarPunto_OnClick"/>
                    <DataGrid x:Name="calibracionDgv" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,42,0,0" Width="377" CanUserAddRows="True">
                        <DataGrid.Columns>
                            <DataGridTextColumn Header="Creciente"></DataGridTextColumn>
                            <DataGridTextColumn Header="Decreciente"></DataGridTextColumn>
                            <DataGridTextColumn Header="Creciente"></DataGridTextColumn>
                            <DataGridTextColumn Header="Decreciente"></DataGridTextColumn>
                            <DataGridTextColumn Header="Creciente"></DataGridTextColumn>
                            <DataGridTextColumn Header="Decreciente"></DataGridTextColumn>
                        </DataGrid.Columns>
                    </DataGrid>
                    <Label x:Name="claselbl" Content="Clase de Exactitud" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,72,0,0"/>
                    <TextBox x:Name="claseTxb" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" Margin="126,72,0,0"/>
                    <Label x:Name="condLbl" Content="Cond. Amb. Finales" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,103,0,0"/>
                    <TextBox x:Name="condTxb" HorizontalAlignment="Left" Height="23" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" Margin="126,103,0,0"/>
                </Grid>
            </GroupBox>
        </Grid>
    </GroupBox>
</Grid>

You are placing two group boxes in row zero and two group boxes in row 2. Maybe you want to put them in a stackpanel or a sub-grid? — Crowcoder, May 25 '16 at 23:31
Disregard, I didn't notice they were different columns. Apologies. — Crowcoder, May 25 '16 at 23:36
yes, I have two columns, so all are aligned, the problem I have is with the latest, by adding the datagridview something happened and damage, since controls overlap, additional as time last textbox is out of the window and a scroll bar does not appear. — Cristian, May 25 '16 at 23:53
Hi @KayLee, what I want to achieve is that the controls do not overlap in the datagridview, I want additional controls are not lost if the form is larger than the screen, a scroll bar appears. — Cristian, May 26 '16 at 13:04

score 1 · Accepted Answer · edited May 23 '17 at 12:07

1

As well I understand, you have two problems:

Inside <GroupBox Grid.Row="2" Grid.Column="1" ...> you have radio buttons thar overlaps DataGrid. This is because they are all placed in the same Grid, and radio buttons added later than DataGrid, so they are in the top of DataGrid.

I don't know what final appearance in this GroupBox do you want, but you can increase top margin of radio buttons to get rid of overlapping data grid headers, or let DataGrid always be on the top of other controls with help of Grid.ZIndex attached property, like this:

<GroupBox Grid.Row="2" Grid.Column="1" Header="Segunda Secuencia">
    <Grid>
        <DataGrid Grid.ZIndex="11" x:Name="segSecDgv" Margin="0,57,0,134">
        ...
        </DataGrid>

        <RadioButton Grid.ZIndex="10" x:Name="calibracion2Rb" Content="Ajuste" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="40,74,0,0"/>

        <RadioButton Grid.ZIndex="10" x:Name="dadoBajaRb" Content="Calibracion" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="138,74,0,0"/>

        <TextBox Grid.ZIndex="10" x:Name="observacion2Txb" HorizontalAlignment="Left" Height="54" TextWrapping="Wrap" VerticalAlignment="Top" Width="282" Margin="10,114,0,0"/>
    </Grid>
</GroupBox>

Inside <GroupBox Grid.Row="2" Grid.Column="0" ...> scroll bar not appearing when content became large. The are several questions relative to this problem, like this one.

You can try change this

<GroupBox Grid.Row="2" Grid.Column="0" Header="Comprobacion Inicial">
...
</GroupBox>

to look like this:

<ScrollViewer Grid.Row="2" Grid.Column="0" VerticalScrollBarVisibility="Auto">
    <GroupBox Header="Comprobacion Inicial">
    ...
    </GroupBox>
</ScrollViewer>

edited May 23 '17 at 12:07

Community

1
1

answered May 26 '16 at 08:34

Sam

1,384
2
20
30

Hello @sam, it helped me put the link on the scrollbar, and achieve solve that point. Thank you so much. With datagridview I play agregarles a grid so they do not overlap, I did not know what else to do. – Cristian May 26 '16 at 14:42
As for the last grid, you know how to take the 2 columns? – Cristian May 26 '16 at 14:42
@Cristian "take the 2 columns" - do you mean place last grid in a width of two columns? In that case add after `Grid.Column="0"` that code: `Grid.ColumnSpan="2"` – Sam May 26 '16 at 14:48
Works great that adding "Grid.ColumnSpan =" 2 "" but I realized that if maximized window I lose the textbox that is in the groupbox and the last groupbox leaves the main, I refresh the image which shows maximized. – Cristian May 26 '16 at 15:22
Your last `GroupBox` has bottom margin -211, is it correct value? – Sam May 26 '16 at 15:32
the truth I do not know, I think from the designer suits that look good in designer looks fine but when you run it happens, I should change it? – Cristian May 26 '16 at 15:36
Wowww, I removed the negative values and have fixed things. the datagridview still remains cut as seen in the picture, no way to tell that fits the left and right of the GroupBox? – Cristian May 26 '16 at 15:39
Try in `DataGrid` element remove `Width="377"` and `HorizontalAlignment="Left"` – Sam May 26 '16 at 17:17

avoid overlaps a datagridview WPF

1 Answers1