Unable to bind to gridview in another usercontrol - wpf

I have 3 user controls
One is the parent that holds a GridViewUserControl and a ExportUserControl
The GridViewUserControl and ExportUserControl have their own viewmodels.
When I click the ExportButton in the ExportUserControl I need to pass the gridview to a command in the ExportUserControl. Everything I try is always passing null.
How would I do something like this? ( This is giving the error "binding.elementname cannot be set while using binding.relativesource"
<telerik:RadButton Content="Export"
Command="{Binding ExportCommand}"
CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=view:GridViewUserControl}, ElementName=GridViewData}"
Margin="0,10,0,0" />
EDIT: Parent Control looks like this
<UserControl x:Class="Sample.Sample1.View.ParentUserControl"
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:view="clr-namespace:GroundStation.Configuration.Viewer.View"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
DataContext="{Binding Source={StaticResource Locator}, Path=Main}">
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="150"/>
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<view:ExportUserControl Margin="5"
Grid.Column="0"
Grid.Row="2"
Grid.RowSpan="2"
MinWidth="150"
/>
<GridSplitter Grid.Column="1"
Width="5"
Grid.Row="1"
Grid.RowSpan="3"
HorizontalAlignment="Stretch" />
<view:GridViewUserControl
Margin="5"
Grid.Column="2"
Grid.Row="1"
Grid.RowSpan="3"/>
</Grid>
</UserControl>

Related

XAML window doesn't look like what I want

I'm learning about WPF and I'm creating a window in XAML.
The window should look like this:
But when I run the program it looks like this:
The code is the following:
<Page x:Class="WpfApp1.ProductsManagement"
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"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
Title="ProductsManagement">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="300" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="420" />
</Grid.RowDefinitions>
<TextBlock
Margin="5"
Text="Search"
Grid.Row="0"
Grid.Column="0"/>
<TextBox
Margin="5"
Grid.ColumnSpan="2"
Grid.Column="1"
Background ="White"
Grid.Row="0"
Text="hi"/>
<DataGrid
Margin ="5"
Name="dataGrid"
Grid.Column="0"
Grid.ColumnSpan="2"
Grid.Row="1"/>
<Border
Margin ="5"
Grid.Row="1"
Grid.Column="2"/>
</Grid>
</Page>
Any comments or suggestions are welcome.
UPDATE
I'm taking the following code as an example:
<Page x:Class="WpfApp1.Discussion"
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"
xmlns:data="clr-namespace:BikeShop"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
Title="Discussion">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<ListBox
Grid.ColumnSpan="2"
Margin="5"/>
<Button
Grid.Row="1"
Grid.Column="1"
Margin="5"
Content="Send" />
<TextBox
Grid.Row="1"
Margin="5"
Text="Type your message here" />
</Grid>
</Page>
And when I run the code it looks like this: (It works correctly)
Your RowDefinitions must be like this:
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
Right now you ask to fill the entire page for the first row and set the second row to a height of 420.
You must define a specific value for the first and * for the second.
You do not see the error in the designer because you set the second row to 420. Obviously you see the first row at 30. But when you go to fullscreen, the first row gets bigger.
Because your Row heights are incorrect. replace your RawDefinitions with:
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>

Application memory rapidly increases when resizing with Grid controls

I have a couple Grid's in my application and the memory usage goes from 70MB up to 300MB when I continuously resize the window (as in making it smaller, bigger, repeat).
There are no bindings or events in my application and I have already removed any Auto layout option I had for rows/columns.
Is this just normal because I have so many Grid's or is there something wrong with my layout?
Video: https://i.gyazo.com/e6292fa9b4e065bf1842c69cbd43b853.mp4
<Window x:Class="CanvasDrawTest.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:CanvasDrawTest"
mc:Ignorable="d"
Title="MainWindow"
Height="863"
Width="1443"
WindowStyle="SingleBorderWindow"
WindowStartupLocation="CenterScreen">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<!-- TopGrid -->
<RowDefinition />
<!-- MainGrid -->
<RowDefinition Height="30" />
<!-- FooterGrid -->
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid Name="TopGrid" Grid.Row="0" Grid.Column="0">
<Menu>
<MenuItem Header="File">
<MenuItem Name="NewDiagramMenuItem" Header="New Diagram" Click="NewDiagramMenuItem_Click" />
</MenuItem>
</Menu>
</Grid>
<DockPanel LastChildFill="True" Grid.Row="1" Grid.Column="0">
<Grid Name="MainGrid" DockPanel.Dock="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="75*"/>
<ColumnDefinition Width="643*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Margin="0,0,0,0.333">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Grid.Column="0" BorderBrush="Gray" BorderThickness="0,0,0.4,0">
<Grid Name="LeftGrid" />
</Border>
<Grid Name="CenterGrid" Grid.Row="0" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="150" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid Name="ContentGrid" Grid.Row="0" Grid.Column="1">
<TabControl Name="DocumentTabs" BorderThickness="0" />
</Grid>
<Border Grid.Row="1" Grid.Column="1" BorderBrush="Gray" BorderThickness="0,0.4,0,0">
<Grid Name="BottomGrid" />
</Border>
</Grid>
</Grid>
</Grid>
</DockPanel>
<Grid Name="FooterGrid" Grid.Row="2" Grid.Column="0">
<StatusBar Name="StatusBar" Height="30" />
</Grid>
</Grid>
</Window>

MaterialDesignInXAML TextBox Font Color is white (Background Color)

I have the following code:
<Window x:Class="App.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:App"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
TextElement.Foreground="{DynamicResource MaterialDesignBody}"
mc:Ignorable="d"
Background="{DynamicResource MaterialDesignPaper}"
FontFamily="{DynamicResource MaterialDesignFont}"
Title="e-Sura" Height="376.316" Width="525">
<Grid Margin="0,0,0,-7">
<Grid.RowDefinitions>
<RowDefinition Height="120"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<materialDesign:Card Padding="32" Margin="16" Grid.Row="0">
<TextBlock TextAlignment="Center" Style="{DynamicResource MaterialDesignTitleTextBlock}">e-Sura Login</TextBlock>
</materialDesign:Card>
<materialDesign:Card Padding="12" Margin="16" Grid.Row="1" Height="180">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1.2*"></ColumnDefinition>
<ColumnDefinition Width="3*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Style="{DynamicResource MaterialDesignTitleTextBlock}" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Right" >User Name :</TextBlock>
<TextBox Grid.Row="0" Grid.Column="1" Name="UserName" Padding="8,8,8,8" Margin="8,8,8,8" Text="KLPD"></TextBox>
<TextBlock Style="{DynamicResource MaterialDesignTitleTextBlock}" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Right">Password :</TextBlock>
<PasswordBox Grid.Row="1" Grid.Column="1" Name="Password" Padding="8,8,8,8" Margin="8,8,8,8" Foreground="Black"></PasswordBox>
<StackPanel Grid.Column="1" Grid.Row="2" Orientation="Horizontal">
<Button Padding="8,8,8,8" Margin="8,8,8,8" Width="100">Login</Button>
<Button Padding="8,8,8,8" Margin="8,8,8,8" Background="#FFE2D122" BorderBrush="#FFE6D52E" Width="100">Cancel</Button>
</StackPanel>
</Grid>
</materialDesign:Card>
</Grid>
The TextBox named "UserName" when run always has a font color that is similar to the control background - i.e. in my case white.
I even tried to set the ForeColor="Black" on the specific control but it did not work.
What am I doing wrong here?
I think you are not using styles correctly. With your posted code I wasn't able to see textbox and passwordbox reason being Padding and Margin value you added on those controls.
Check out following code which is working fine without any issues:
<Window
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:WpfApplicationTest"
x:Class="WpfApplicationTest.MainWindow"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
x:Name="win"
WindowStartupLocation="CenterOwner"
TextElement.Foreground="{DynamicResource MaterialDesignBody}"
mc:Ignorable="d"
Background="{DynamicResource MaterialDesignPaper}"
FontFamily="{DynamicResource MaterialDesignFont}"
Title="e-Sura" Height="376.316" Width="525" FontSize="16">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid Margin="0,0,0,-7">
<Grid.RowDefinitions>
<RowDefinition Height="120"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<materialDesign:Card Padding="32" Margin="16" Grid.Row="0">
<TextBlock TextAlignment="Center" Style="{DynamicResource MaterialDesignTitleTextBlock}">e-Sura Login</TextBlock>
</materialDesign:Card>
<materialDesign:Card Padding="12" Margin="16" Grid.Row="1" Height="180">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1.2*"></ColumnDefinition>
<ColumnDefinition Width="3*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Margin="0, 10"
HorizontalAlignment="Right" Text="User Name :"/>
<TextBox Grid.Row="0" Grid.Column="1" Name="UserName" Text="KLPD"
Margin="8, 0" FontSize="20"
Style="{DynamicResource MaterialDesignTextBox}"/>
<TextBlock Grid.Row="1" Grid.Column="0" Margin="0, 10"
HorizontalAlignment="Right" Text="Password :"/>
<PasswordBox Grid.Row="1" Grid.Column="1"
Style="{DynamicResource MaterialDesignPasswordBox}"
Margin="8, 0" FontSize="20"
Name="Password" />
<StackPanel Grid.Column="1" Grid.Row="2" Orientation="Horizontal">
<Button Padding="8" Margin="8" Width="100">Login</Button>
<Button Padding="8" Margin="8" Background="#FFE2D122" BorderBrush="#FFE6D52E" Width="100">Cancel</Button>
</StackPanel>
</Grid>
</materialDesign:Card>
</Grid>
</Window>

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).

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