Restricting size of child control in a panel to visible area

1.7k Views Asked by At

I can never seem to wrap my head around the differences between the DockPanel, StackPanel and Grid in terms of restricting their children content. This XAML:

   <DockPanel>
        <Menu/>
        <ToolBarTray/>
        <ScrollViewer>
        <Grid>
          <Grid.RowDefinitions>
              <RowDefinition/>
              <RowDefinition/>
          </Grid.RowDefinitions>
        <TabControl>
         <TabItem Header="Data" Name="tabData">
                <DockPanel>
                    <Border Name="extraDataBorder" DockPanel.Dock="Top"
                            Style="{StaticResource ConsistentBorder}" Margin="10">                                    
                    </Border>
                    <igDP:XamDataGrid Grid.Row="1"                                                                      
                            Margin="10,10,10,0"                                                                             
                            ScrollViewer.HorizontalScrollBarVisibility="Visible"
                            ScrollViewer.VerticalScrollBarVisibility="Visible"  >                       

                    </igDP:XamDataGrid>
                </DockPanel>
            </TabItem>
        </TabControl>
         </Grid>                                                                                             

      </ScrollViewer>

    </DockPanel>

Produces a grid that is not constrained within the visible area of the screen as shown in the figure below:

Overflowing grid

I do not want the grid to extent beyond the visible area of the screen. Instead, I want it clipped so that users can see the horizontal scroll bar and not have to scroll down to see the horizontal scroll bar. I have tried using a Stack and DockPanel in place of the grid but get the exact same effect. How do I fix this?

TIA.

EDIT: I am editing the original XAML to include the additional elements that caused this issue.

1

There are 1 best solutions below

0
On

You can bind it to its parent's width and height as one of the many solutions.