Can't Set Background of Grid. Possible Bug in WPF? - wpf

I have a bit of XAML in WPF like so
<TabItem Header="Remote Mode">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0">
<Grid.Background>
<ImageBrush ImageSource="/ETest;component/Images/RemoteLarge.png"/>
</Grid.Background>
</Grid>
</Grid>
Unfortunately, now, when I try to switch to the tab shown above, Visual Studio navigates to the code in the XAML, but refuses to switch to the tab in the designer. I've tried building the application and switching tabs from there too, but that doesn't appear to work either. Why can't I switch tabs now? If I remove the image from the XAML, I can switch tabs again.
As a note: The image itself is an 817x2167 .png. Could the problem possibly lie there?
Edit: I, unfortunately, don't have access to the original project until Monday. I have a copy of the image I was working with and tested using it in a basic WPF application. The following XAML works flawlessly:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="500" Width="750">
<Grid>
<TabControl>
<TabItem Header="Test1" />
<TabItem Header="Remote Mode">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0">
<Grid.Background>
<ImageBrush ImageSource="/WpfApplication1;component/Images/RemoteLarge.png"/>
</Grid.Background>
</Grid>
</Grid>
</TabItem>
</TabControl>
</Grid>
</Window>
I'll try to post more of the original project when I get the chance. Perhaps the problem lies elsewhere in the application.
Edit 2: Here's the full XAML:
<Window x:Class="ETest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:c="clr-namespace:ETest.Controls.AutoSequence"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
MinHeight="550"
MinWidth="835"
Height="550"
Width="835"
DataContext="{Binding Main, Source={StaticResource Locator}}">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Skins/MainSkin.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid x:Name="LayoutRoot"
Background="#C0FFC0">
<Grid.RowDefinitions>
<RowDefinition Height="23" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Menu Grid.Row="0">
<Menu.Background>
<LinearGradientBrush EndPoint="0,1"
StartPoint="0,0">
<GradientStop Color="#E8E8E8"
Offset="0.528"/>
<GradientStop Color="#F5F5F5"
Offset="0.01"/>
<GradientStop Color="#E0E0E0"
Offset="1"/>
<GradientStop Color="#FFFFFF"
Offset="1"/>
</LinearGradientBrush>
</Menu.Background>
</Menu>
<TabControl Grid.Row="1">
<TabItem Header="AutoSequence">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ListBox Grid.Column="0"
Grid.Row="0"
Grid.RowSpan="2">
</ListBox>
<Grid Grid.Column="1" Grid.Row="0" Margin="0,0,20,0">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<DockPanel Grid.Row="0">
<Label DockPanel.Dock="Left"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Content="Drag Steps Here to make an Autosequence" />
<Button DockPanel.Dock="Right"
HorizontalAlignment="Right"
Margin="0,0,0,4"
Width="100"
Content="Start Test"/>
<Button DockPanel.Dock="Right"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Margin="0,0,40,0"
Width="150" Height="23"
Content="**** Interface"/>
</DockPanel>
<ListBox Grid.Row="1" />
</Grid>
<GroupBox Grid.Column="1"
Grid.Row="1"
Header="Step Configuration">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="23"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<DockPanel Grid.Row="0">
<Label DockPanel.Dock="Left"
HorizontalAlignment="Left"
Content="Step Name" />
<Button DockPanel.Dock="Right"
HorizontalAlignment="Right"
Width="75"
Content="Save Step" />
<TextBox />
</DockPanel>
<Grid Grid.Row="1">
<c:Message/>
</Grid>
</Grid>
</GroupBox>
</Grid>
</TabItem>
<TabItem Header="Remote Mode">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0">
<Grid.Background>
<ImageBrush ImageSource="/ETest;component/Images/RmtLrg.png"/>
</Grid.Background>
</Grid>
</Grid>
</TabItem>
</TabControl>
</Grid>
</Window>
Edit 3:
Things just got strange. I deleted the file, exported another copy from the original application, named it RmtLrg.png, added it, and the file failed to work. I tried double clicking the file in the solution explorer to view it, then switched back to my MainWindow in Visual Studio. The image was loaded in the designer and I was able to switch tabs as I normally would.
For all of a minute it was working, but, in a rush of excitement, I built the application. I attempted to switch tabs in it, but this failed. Checking back in the designer afterwards, I noticed the image is no longer loaded and I once again am unable to switch to the TabControl tab in question.
Edit 4:
The problem is still occurring and seems, quite literally, to be that the image is too big to set as a grid background (even if that makes no sense). I've tried Png, Jpg, and Gif formats and none work. Loading other, smaller images in the project works perfectly without issue.
Edit 5:
Oddly enough, loading a 3000x3000 image works perfectly. The only image that won't load so far is my 817x2167 image. Why could this be?

Related

WPF - ContentPresenter won't display Content

I am trying to create a container-like component. It uses the MaterialDesign Card as a container, places a title in it and allows space for Content.
<ContentControl
x:Class="Client.Components.AisCard"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="450"
d:DesignWidth="800">
<materialDesign:Card
Margin="0,0,20,0"
Padding="20,20,20,30">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock
Grid.Row="0"
Text="Opmerkingen"
Style="{StaticResource MaterialDesignHeadline5TextBlock}"
FontWeight="Medium"
Margin="0,0,0,10" />
<ContentPresenter Grid.Row="1" />
</Grid>
</materialDesign:Card>
</ContentControl>
Then, I call the Component in a view and attempt to fill its Content:
<Components:AisCard
Grid.Column="0"
Grid.Row="0">
<TextBlock Text="Hello World" />
</Components:AisCard>
The result looks like this:
I expected it to look like this:
Maybe I have misunderstood the way that a ContentPresenter works. Maybe using a Component inside of a Component is not the way to go. Could anyone offer some form of assistance in the matter?
The TextBlock replaces the Card, because both just set the Content property. You would have to declare the Card as part of a ControlTemplate:
<ContentControl
x:Class="Client.Components.AisCard"
...>
<ContentControl.Template>
<ControlTemplate TargetType="ContentControl">
<materialDesign:Card
Margin="0,0,20,0"
Padding="20,20,20,30">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock
Grid.Row="0"
Text="Opmerkingen"
Style="{StaticResource MaterialDesignHeadline5TextBlock}"
FontWeight="Medium"
Margin="0,0,0,10" />
<ContentPresenter Grid.Row="1" />
</Grid>
</materialDesign:Card>
</ControlTemplate>
</ContentControl.Template>
</ContentControl>

WPF Image in grid with label and caption

I've been struggling with placing an image with a label above and a caption below in a grid.
What I would like to get is the top label aligned in the middle right above the image, and the bottom label right beneath the image like this:
But what I actually get is this:
I've used the following code in my view:
<Window x:Class="ImageWithText.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"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Label Content="This is a label"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
Grid.Row="0"/>
<Image x:Name="MainImage"
Stretch="Uniform"
Grid.Row="1">
<Image.Source>
<BitmapImage UriSource="test.jpg"/>
</Image.Source>
</Image>
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Top"
Grid.Row="2">
<Run Text="Some text "/>
<Run Text="Some more text"/>
</TextBlock>
</Grid>
</Grid>
</Window>
I've also tried using a DockPanel:
<Window x:Class="ImageWithText.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"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<DockPanel>
<Label Content="This is a label" HorizontalAlignment="Center" DockPanel.Dock="Top"/>
<Image x:Name="MainImage"
Stretch="Uniform"
DockPanel.Dock="Top">
<Image.Source>
<BitmapImage UriSource="test.jpg"/>
</Image.Source>
</Image>
<TextBlock Margin="5"
HorizontalAlignment="Center"
DockPanel.Dock="Top">
<Run Text="Some text "/>
<Run Text="Some more text"/>
</TextBlock>
</DockPanel>
</Grid>
</Window>
But then the caption is not visible if the window is not large enough.
I've tried both options for LastChildFill, but it made no difference. Does anyone know how to get this done?
Your inner grid is being stretched to fill the entirety of the outer grid. As the middle row in the inner grid is the only row with variable sizing it is then being expanded vertically but, as the image defaults to "Stretch" = "Uniform", it is only filling a certain amount of the middle row and being vertically aligned in the middle of it's row.
This should sort it:
<Grid Margin="5">
<Grid x:Name="LayoutGrid" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Label Content="This is a label"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
Grid.Row="0"/>
<Image x:Name="MainImage"
Stretch="Uniform"
Grid.Row="1">
<Image.Source>
<BitmapImage UriSource="test.jpg"/>
</Image.Source>
</Image>
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Top"
Grid.Row="2">
<Run Text="Some text "/>
<Run Text="Some more text"/>
</TextBlock>
</Grid>
</Grid>
A good way of debugging this kind of issue is to set background colour of various elements to see the areas they're occupying.
Edited to reflect comment
You need to invert the grid row definition to:
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
This is because your middle grid is being stretched to whatever the area is left so zou get the imperssion that both labels are on the far parts of the image.

WPF ScrollViewer pushing control out of window

I have a DockPanel, which contains some controls including a ScrollViewer.
What I WANT to happen, is for the ScrollViewer to allow the grid to be scrolled, without pushing other controls off the bottom of the form.
Instead, the ScrollViewer expands to the height of the window, rather than the top of the Button, pushing the Button off for the bottom of the form. Why is this? How do I fix it?
<Window x:Class="Class1.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:Class1"
mc:Ignorable="d"
Title="MainWindow" Height="800" Width="600"
WindowStartupLocation="CenterScreen">
<DockPanel LastChildFill="False">
<Menu DockPanel.Dock="Top">
<MenuItem Header="File">
<MenuItem Name="miQuit" Header="Quit" Click="miQuit_Click" />
</MenuItem>
</Menu>
<ToolBarTray DockPanel.Dock="Top" IsLocked="True">
<ToolBar>
<Button Name="btnQuit" ToolBar.OverflowMode="Never" Click="btnQuit_Click">
Quit
</Button>
</ToolBar>
</ToolBarTray>
<ScrollViewer VerticalScrollBarVisibility="Auto" DockPanel.Dock="Top" VerticalAlignment="Stretch">
<Grid Name="gMainGrid" ScrollViewer.CanContentScroll="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBox Grid.Column="0" Grid.Row="0" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="1" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="2" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="3" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="4" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="5" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="6" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="7" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="8" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="9" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="10" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="11" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="12" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="13" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="14" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="15" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="16" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="17" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="18" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="19" Width="100" Margin="10,10,10,10"/>
<TextBox Grid.Column="0" Grid.Row="20" Width="100" Margin="10,10,10,10"/>
</Grid>
</ScrollViewer>
<Button Name="btnButton1" DockPanel.Dock="Bottom" Click="btnButton1_Click" >ButtonText</Button>
</DockPanel>
I want the menu bar at the top of the screen, the button at the bottom of the screen, and the grid with the ScrollViewer in the middle. What am I doing wrong?
The problem is that the ScrollViewer doesn't know how much height it should get. ScrollViewer is a control that tries to get as much size as its children need. DockPanel also gives as much size as the ScrollViewer need and therefore your problem. You can fix height of the ScrollViewer with pixels (i.e. Height=100) To make it a fixed height. I don't know your use case so this might be useful if you are showing an image carousel for example.
In more general layout advice I might say that you'd better use a grid instead of a DockPanel:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<!-- Next one is for middle part of the page -->
<RowDefinition Height="*" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<!-- your controls here -->
</Grid>
I found that I could have a dynamic height with the DockPanel if I stuck the whole thing in a Grid. This appears to work, as I can now have a dynamic height for the ScrollViewer.
<Window x:Class="Class1.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:Class1"
mc:Ignorable="d"
Title="MainWindow" Height="800" Width="600"
WindowStartupLocation="CenterScreen">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<DockPanel Grid.Column="0" Grid.Row="0" LastChildFill="False">
Everything is then as normal EXCEPT that I move my button outside of the DockPanel and into the Grid's second row:
</DockPanel>
<Button Grid.Column="0" Grid.Row="1" Name="btnButton1" DockPanel.Dock="Bottom" Click="btnButton1_Click" >ButtonText</Button>
</Grid>
The rows with a Height of "Auto" will size to fit their content. The rows with a Height of asterisk (*) will size to fill the remaining space after the size of the Autos has been calculated. Thus everything sizes up correctly and nicely.
Alternatively, at this point I can do-away with the DockPanel entirely and have the Menu, ToolBarTray, ScrollViewer, and Button in their own separate grid rows, like Emad suggests in their answer (although I'm not sure what the extra row is for in their example).
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
I ultimately decided to go for that approach, so I'll mark it as the answer, but I'm putting this all here for the full explanation, for completeness (in case people do happen to want to keep their DockPanel).

How to have one control expand/fill up to maxheight, then expand/fill another control in WPF?

I have the following XAML source to demonstrate what I am working on.
I want, when resizing the group vertically, is to have the first groupbox expand, up to its max height, then, when that is reached, expand the third groupbox.The third groupbox has a min height property, as well.
<UserControl
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" x:Name="Screen_1_Name"
x:Class="TestExpansionScreens.Screen_1"
Width="400" Height="400">
<Grid x:Name="LayoutRoot" Background="White" Margin="0,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<GroupBox Header="Thing1" Background="LightGreen" Grid.Row="0" Grid.Column="0" MaxHeight="350">
<Button Content="Stuff1" />
</GroupBox>
<GroupBox Header="Thing2" Background="LightBlue" Grid.Row="1" Grid.Column="0">
<TextBox Text="Stuff2" Height="60" />
</GroupBox>
<GroupBox Header="Thing3" Background="Pink" Grid.Row="2" Grid.Column="0">
<TextBox Text="Stuff3" />
</GroupBox>
</Grid>
</UserControl>
Normally, when I just want a single control expanded to fill the available space, I use a DockPanel. I've built this example with all kinds of assortments of grids and dockpanels, however, I have been unable to resolve how to make it work. Any idea on how to make it happen?
Thanks
You have to set the MaxHeight on your first RowDefinition, not on the GroupBox. The row will grow up to that height and then all excess space will be occupied by the third row. You can also add a MinHeight to the third row.
<Grid x:Name="LayoutRoot" Background="White" Margin="0,0,0,0">
<Grid.RowDefinitions>
<RowDefinition MaxHeight="350" />
<RowDefinition Height="Auto"/>
<RowDefinition MinHeight="150" />
</Grid.RowDefinitions>
<GroupBox Header="Thing1" Background="LightGreen" Grid.Row="0" Grid.Column="0">
<Button Content="Stuff1" />
</GroupBox>
<GroupBox Header="Thing2" Background="LightBlue" Grid.Row="1" Grid.Column="0">
<TextBox Text="Stuff2" Height="60" />
</GroupBox>
<GroupBox Header="Thing3" Background="Pink" Grid.Row="2" Grid.Column="0">
<TextBox Text="Stuff3" />
</GroupBox>
</Grid>

Scrollable Grid in WPF/Silverlight

I would like to build a WPF window which uses an outer Grid to split the screen into 4 parts. In the lower right quadrant, I would like to embed another Grid which is larger than the grid cell. I have been looking for ways to add a ScrollViewer (or use the Grid.ScrollViewer properties) but no matter what I try the inner grid does not resize or display the scrollbars appropriately.
I suspect it has something to do with not wrapping the inner grid with the correct panel with the appropriate sizing (and resizing) behavior which would force the inner grid to honor the scrollbars, instead of simply rendering too big (and being clipped by the other window).
The hosting window is defined like this:
<Window x:Class="GridScrollTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:GridScrollTest"
Title="MainWindow" Height="350" Width="525">
<Grid x:Name="OuterGrid">
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<local:SSControl x:Name="Sheet"
Grid.Row="1" Grid.Column="1"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Yellow" />
<Canvas Grid.Row="0" Grid.Column="0" Background="LightGreen" />
<Canvas Grid.Row="1" Grid.Column="0" Background="LightBlue" />
<Canvas Grid.Row="0" Grid.Column="1" Background="LightCoral" />
</Grid>
</Window>
And the referenced SSControl:
<UserControl x:Class="GridScrollTest.SSControl"
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"
Height="270" Width="600">
<ScrollViewer
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
CanContentScroll="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Grid x:Name="CellGrid" ShowGridLines="False"
>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
</Grid>
</ScrollViewer>
</UserControl>
I do not know for sure, but after trying your code in Blend, I think your problem might be that you have set the ColumnDefinition.Width and RowDefinition.Height to Auto. Try setting them to * and remove the Height=270 and Width=600 for your user control. This way, the outer grid fills all the available space in the window, and the lower right cell has scroll bars.

Resources