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:
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.
You can bind it to its parent's width and height as one of the many solutions.