We Keep Coding

How to link external Xaml page to a Grid in Universal Windows Platform?

I want to link an external .xaml file into a grid in my Universal Windows Platform App.
This is the folder structure:
I want to link ListView.xaml into a grid which is declared inside MainPage.xaml
Codes for both file :
MainPage.xaml:
<Page
x:Class="TodoGrocery.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TodoGrocery"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid x:Name="gridView" Grid.Row="0" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Top" Height="40" Background="#3A5194">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" BorderThickness="0" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent">
<SymbolIcon Symbol="Back" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" Width="40" Height="40"/>
</Button>
<TextBlock x:Name="title" Grid.Column="1" HorizontalAlignment="Center" FontSize="20" VerticalAlignment="Center" Foreground="White" Text="Todo Grocery"></TextBlock>
<Button x:Name="moreButton" BorderThickness="0" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent">
<SymbolIcon Symbol="More" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" Width="40" Height="40"/>
</Button>
</Grid>
<Grid Grid.Row="1">
<Page><!-- Link ListView.xaml Here--></Page>
</Grid>
</Grid>
</Page>
ListView.xaml
<Page
x:Class="TodoGrocery.ListView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TodoGrocery"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid Background="White" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="*"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid x:Name="listHeader" Grid.Row="0" BorderBrush="#d0d0d0" BorderThickness="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<CheckBox Grid.Column="0" IsChecked="True"></CheckBox>
<TextBlock Grid.Column="1" Text="Name" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,9,0,9"></TextBlock>
</Grid>
<Button Grid.Column="1">
<SymbolIcon Symbol="Sort"/>
</Button>
<TextBlock Grid.Column="2" Text="Quantity" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,20,0"></TextBlock>
</Grid>
<Grid x:Name="ListPanel" Grid.Row="1"></Grid>
<Grid x:Name="ButtonPanel" Grid.Row="2" Background="#3A5194">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Button x:Name="deleteAllButton" BorderThickness="0" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Foreground="White" Background="Transparent">
<!--<SymbolIcon Symbol="Delete" Foreground="White"/>-->
<StackPanel Orientation="Horizontal" Height="30">
<SymbolIcon Symbol="Delete" Foreground="White"/>
<TextBlock VerticalAlignment="Center" Foreground="White" Margin="10,0,0,0">Delete All</TextBlock>
</StackPanel>
</Button>
<Button x:Name="addButton" Grid.Column="1" BorderThickness="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Foreground="White" Background="Transparent">
<!--<SymbolIcon Symbol="Delete" Foreground="White"/>-->
<StackPanel Orientation="Horizontal" Height="30" Width="100">
<SymbolIcon Symbol="Add" Foreground="white"/>
<TextBlock VerticalAlignment="Top" Foreground="White" HorizontalAlignment="Right" Margin="15,5,0,0">Add</TextBlock>
</StackPanel>
</Button>
</Grid>
</Grid>
</Page>
So this is what I'm planning to do with my app :
I will be having different external pages like ListView.xaml and whenever user clicks a link or a tab, the part where the page is linked should be changed with the page that has been asked for.
Thanks. Any other ideas are also appreciated.

To include a Page inside of another, use the Frame object:
<Grid Grid.Row="1">
<Frame x:Name="MainFrame"></Frame>
</Grid>
Then, to load a page inside of the Frame, just call the Navigate method:
this.MainFrame.Navigate(typeof(TodoGrocery.ListView));

As Kory said, you can know how to do what you want in UWP by reading Navigation chapter in How-to guides for Windows 10 apps.
The key point here is using Frame and Frame.Navigate methods. The frame hosts the pages and keeps the navigation history.
You create as many different page types as needed to present the content in your app, and then navigate to those pages by calling the Navigate method and passing in the type of the page to navigate to. You can also pass in a parameter object to initialize the page to a particular state.
So you can change your MainPage.xaml like following to link ListView.xaml:
<Page x:Class="TodoGrocery.MainPage"
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:local="using:TodoGrocery"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid x:Name="gridView" Grid.Row="0" HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Top" Height="40" Background="#3A5194">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" BorderThickness="0" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent">
<SymbolIcon Symbol="Back" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" Width="40" Height="40"/>
</Button>
<TextBlock x:Name="title" Grid.Column="1" HorizontalAlignment="Center" FontSize="20" VerticalAlignment="Center" Foreground="White" Text="Todo Grocery"></TextBlock>
<Button x:Name="moreButton" BorderThickness="0" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent">
<SymbolIcon Symbol="More" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" Width="40" Height="40"/>
</Button>
</Grid>
<Grid Grid.Row="1">
<Frame x:Name="MyFrame">
<local:ListView />
</Frame>
</Grid>
</Grid>
</Page>
Or just add a Frame in Grid:
<Grid Grid.Row="1">
<Frame x:Name="MyFrame" />
</Grid>
And in code-behind, using
MyFrame.Navigate(typeof(TodoGrocery.ListView));

components does not scale properly

For my WPF project in C#, I have to create a menu state which should look like image below
So far, I have created
XAML Code for this window:
<UserControl x:Class="MainWindow"
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="600" d:DesignWidth="800">
<Grid Background="White" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="125"/>
<RowDefinition Height="100"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200*"/>
<ColumnDefinition Width="400*"/>
<ColumnDefinition Width="200*"/>
</Grid.ColumnDefinitions>
<!-- title -->
<Label Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" FontFamily="Franklin Gothic Heavy">
<Viewbox>
<TextBlock>Title</TextBlock>
</Viewbox>
</Label>
<!-- menu -->
<Grid Grid.Row="2" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="15"/>
<RowDefinition Height="50"/>
<RowDefinition Height="15"/>
<RowDefinition Height="50"/>
<RowDefinition Height="15"/>
<RowDefinition Height="50"/>
<RowDefinition Height="15"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300*"/>
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" FontFamily="Franklin Gothic Medium">
<Viewbox><TextBlock>State</TextBlock></Viewbox>
</Button>
<Button Grid.Row="2" Grid.Column="0" FontFamily="Franklin Gothic Medium">
<Viewbox><TextBlock>State</TextBlock></Viewbox>
</Button>
<Button Grid.Row="4" Grid.Column="0" FontFamily="Franklin Gothic Medium">
<Viewbox><TextBlock>State</TextBlock></Viewbox>
</Button>
<Button Grid.Row="6" Grid.Column="0" FontFamily="Franklin Gothic Medium">
<Viewbox><TextBlock>State</TextBlock></Viewbox>
</Button>
<Button Grid.Row="8" Grid.Column="0" FontFamily="Franklin Gothic Medium">
<Viewbox><TextBlock>State</TextBlock></Viewbox>
</Button>
</Grid>
</Grid>
</UserControl>
Problem with this window is this components (label and buttons with their contents) does not scale properly. What I want is, when I resize the window I want this components to be proportional to window. Not sure if the grid layout is problem, but how can I fix this components scale properly.
EDIT:
Ok, so I followed your instructions and I like the results (everything seems to scale good enough),
but I have two more minor problems:
1) With a new changes to XAML code, my last button is colliding with the south border of the window, which is not what I want. What I want is an empty space with size of almost exactly (if possible) or close space, like between Label "Title" and north border of the window.
I found solution by defining a new line at the end <RowDefinition Height="*"/>. Not sure if this is a correct way to go.
2) Thus, so far I understand that , 1, 2*,... multiplies the current size. However, it seems I still feel like I don't fully understand it. Currently, I am asking myself, how can I now change the size (width or height in some case) of the button components inside grid layout?
Finally, do I change properties for the size directly to button or via grid layout?
Here is the code for a new window.
<UserControl x:Class="TypeRacer_Client.state.MenuState"
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="600" d:DesignWidth="800">
<Grid Background="White" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="3*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- title -->
<Label Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" FontFamily="Franklin Gothic Heavy">
<Viewbox>
<TextBlock>Title</TextBlock>
</Viewbox>
</Label>
<!-- menu -->
<Grid Grid.Row="2" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="15"/>
<RowDefinition Height="*"/>
<RowDefinition Height="15"/>
<RowDefinition Height="*"/>
<RowDefinition Height="15"/>
<RowDefinition Height="*"/>
<RowDefinition Height="15"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" FontFamily="Franklin Gothic Medium">
<Viewbox><TextBlock>State</TextBlock></Viewbox>
</Button>
<Button Grid.Row="2" Grid.Column="0" FontFamily="Franklin Gothic Medium">
<Viewbox><TextBlock>State</TextBlock></Viewbox>
</Button>
<Button Grid.Row="4" Grid.Column="0" FontFamily="Franklin Gothic Medium">
<Viewbox><TextBlock>State</TextBlock></Viewbox>
</Button>
<Button Grid.Row="6" Grid.Column="0" FontFamily="Franklin Gothic Medium">
<Viewbox><TextBlock>State</TextBlock></Viewbox>
</Button>
<Button Grid.Row="8" Grid.Column="0" FontFamily="Franklin Gothic Medium">
<Viewbox><TextBlock>State</TextBlock></Viewbox>
</Button>
</Grid>
</Grid>
</UserControl>

Use star sizing (ratios) to size your grid's rows etc. Like , 2, 4* etc. This will make the rows and columns keep the same ratios, no matter what size the window is, like this:
<RowDefinition Height="*" />
<RowDefinition Height="2* /> //this will be 2x the previous row's height
Style the buttons for consistent width/height/other properties etc.
<Style TargetType="Button" x:Name="SomeButtonStyle">
<Setter Property="Width" Value="90" />
</Style>
then , for each button you want the same height/width/whatever property:
<Button Style="{StaticResource SomeButtonStyle}" />
This will keep you from putting a width, height or font etc. in EVERY button you made, and makes it much faster to change the value in one place, instead of every button.

wpf grid and stackpanel fill

I have a grid with 2 rows one for a name and button and the other for output.
I want the first row to stretch the full width and the button to align to the right.
Wondering what I am missing as I thought the stackpanel would fill the width.
<Window x:Class="Sample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" Grid.Row="0" Grid.Column="0" >
<TextBox Name="NameTextBox" MinWidth="150" HorizontalAlignment="Stretch"/>
<Button Margin="10,0" Name="AlertButton" Content="Say Hello" HorizontalAlignment="Stretch" />
</StackPanel>
<TextBox Name="OutpuTextBox" MinLines="5" Grid.Row="1" Grid.Column="0"/>
</Grid>
</Window>

Horizontal StackPanel ignores horizontally alignment of its children. You can change your layout to 2 columns and put Button in the second column of first row and set bottom TextBox to span across 2 columns
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBox Name="NameTextBox" MinWidth="150" HorizontalAlignment="Stretch"/>
<Button Margin="10,0" Name="AlertButton" Content="Say Hello" HorizontalAlignment="Stretch" Grid.Column="1" />
<TextBox Name="OutpuTextBox" MinLines="5" Grid.Row="1" Grid.ColumnSpan="2"/>
</Grid>

I need to put a label in the right hand corner of my popup in XAML

Here is my code. I have tried several things to get the label in the top right hand corner of the popup and make it stay there, but nothing has worked.
Thanks for your help!
XAML:
<Window x:Class="ValidationWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:local="clr-namespace:ValidationWPF"
Title="MainWindow" mc:Ignorable="d"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="259" d:DesignWidth="420" SizeToContent="WidthAndHeight">
<Grid Height="129" Width="345">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="514*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0" />
<RowDefinition Height="251*" />
</Grid.RowDefinitions>
<Button Content="Errors" Height="23" HorizontalAlignment="Left" Name="button1" VerticalAlignment="Top" Width="75" Grid.Column="1" Grid.Row="1" Margin="132,12,0,0" MouseEnter="button1_MouseHover">
</Button>
<Popup AllowsTransparency="True" PlacementTarget="{Binding ElementName=button1}" StaysOpen="True" AllowDrop="True" Name="PopUp1" PopupAnimation="Scroll">
<Popup.Child>
<Border BorderBrush="White" BorderThickness="3, 3, 0, 0">
<Border BorderBrush="Black" BorderThickness="3, 3, 3, 3">
<TextBlock Background="Salmon">
<Label Background="AliceBlue" Foreground="Black" HorizontalAlignment="Stretch" HorizontalContentAlignment="Right" MouseDown="mouse_DownHandeled" AllowDrop="False" Margin="100,100,0,0">
x
</Label>
<local:ValidationUserControl/>
</TextBlock>
</Border>
</Border>
</Popup.Child>
</Popup>
</Grid>
</Window>
As you see, I have a popup with a label that has an X in it. The label is fully functional. Now I just need it to look like a normal popup with the label in the top right hand corner.

Try this:
<TextBlock Background="Salmon" MinWidth="150" MinHeight="150" VerticalAlignment="Top">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="120" />
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="1" Background="AliceBlue" Foreground="Black" VerticalAlignment="Top" AllowDrop="False">
X
</Label>
</Grid>
</TextBlock>

Awesomium raises ArgumentException in WindowsBase.dll

I am making an application with WPF and I have a UserControl with a Awesomium WebControl.
The moment I add a copy of this UserControl to my main window, I get an ArgumentException from WindowsBase.dll saying that "Width and Height must be positive".
Here is that UserControl:
<UserControl x:Class="ForumPost.ForumPost"
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" MinWidth="505" MinHeight="250" xmlns:my="http://schemas.awesomium.com/winfx">
<Grid Name="postGrid" Margin="5">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid Background="#3166A1">
<Grid.RowDefinitions>
<RowDefinition MinHeight="150" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="150" />
<ColumnDefinition MinWidth="100" />
<ColumnDefinition MinWidth="125" />
<ColumnDefinition MinWidth="125" />
</Grid.ColumnDefinitions>
<Grid Height="150">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="125" />
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="20"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Margin="0 0 5 0" Name="specialUserFlag"/>
<TextBlock TextAlignment="Center" FontWeight="Bold" FontSize="16" Foreground="White" Name="postUsername" Grid.Column="1"/>
</Grid>
<Image Grid.Row="1" MaxWidth="125" MaxHeight="125" Name="postAvatar" />
</Grid>
<TextBlock Grid.Column="2" TextAlignment="Center" FontWeight="Bold" FontSize="16" Foreground="White" VerticalAlignment="Center" Name="postTimestamp" TextWrapping="Wrap" />
</Grid>
<my:WebControl Grid.Row="1" Name="webBrowser"/>
</Grid>
And here is my main window, as #LukeWoodward requested:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" x:Class="Saxaphone.MainWindow"
Title="MainWindow" Height="850" Width="1600"
Icon="main.ico">
<Grid x:Name="MainGrid">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="305" />
<ColumnDefinition MinWidth="1017" />
</Grid.ColumnDefinitions>
<TreeView x:Name="ForumView" ScrollViewer.HorizontalScrollBarVisibility="Diforumbled" Style="{DynamicResource ForumViewStyle}" SelectedItemChanged="ForumView_SelectedItemChanged" />
<Grid x:Name="forumGrid" Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="512" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Hidden" Grid.Column="0" Height="{Binding ActualHeight, ElementName=forumGrid}">
<StackPanel x:Name="forumThreads"></StackPanel>
</ScrollViewer>
<ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Auto" Grid.Column="1" Height="{Binding ActualHeight, ElementName=forumGrid}">
<StackPanel x:Name="forumPosts"/>
</ScrollViewer>
</Grid>
</Grid>

I've now been able to reproduce the ArgumentException you're getting. I suspect that this is a bug in Awesomium. I would recommend that you contact Awesomium Support at http://support.awesomium.com/.
I found that the following XAML is sufficient to reproduce the ArgumentException. There was no need for any user-controls nor adding controls at runtime:
<StackPanel>
<as:WebControl xmlns:as="http://schemas.awesomium.com/winfx" />
</StackPanel>
I found that it was possible to work around this issue by setting an explicit Width and Height on the WebControl. It seems that a WebControl doesn't like being inside a StackPanel unless it (the WebControl) has both Width and Height set.

We are aware of this issue and it will be fixed in the final release of version 1.7.