We Keep Coding

ReactiveUI - Views not rendering properly (or in full)

I'm in the process of starting a new project, using ReactiveUI and MahApps.Metro. The first hurdle I've hit is a problem of views not showing in their entirety. I have a Window, and in that Window I have a ViewModelViewHost from the RxUI library. It is a simple container for a nested view-model. The ActiveItem binding is properly binded to the view-model of the User Control, and the Button from the user control is visible on screen.
What I expect to see is a Window with a dark gray background and a button in the middle. What I see is the Window with its default background and a Button in the middle. This is not right. If I remove the button, I see nothing on the Window, only the default background.
It seems the ViewModelViewHost is only showing the actual contents of a UserControl and is disregarding what isn't considered a real Control, such as grids etc.
Has anyone come across this behaviour before?
<mah:MetroWindow x:Class="...MainWindow"
xmlns:mah="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:rx="clr-namespace:ReactiveUI;assembly=ReactiveUI"
WindowStartupLocation="CenterScreen"
ShowTitleBar="False"
ShowCloseButton="False"
ShowMaxRestoreButton="False"
ShowMinButton="False"
Height="768"
Width="1024">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<rx:ViewModelViewHost ViewModel="{Binding ActiveItem}" />
</Grid>
</mah:MetroWindow>
<UserControl x:Class="...NestedView"
Name="TheUserControl"
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"
TextOptions.TextHintingMode="Auto"
TextOptions.TextRenderingMode="Auto"
d:DesignHeight="768" d:DesignWidth="1024">
<Grid Background="DarkGray">
<Button Width="200" Height="100" />
</Grid>
</UserControl>

This won't be a ReactiveUI problem, just a simple WPF one.
The ViewModelViewHost is centered in your window. While your UserControl has a DesignHeight and DesignWidth set, when it's rendered at runtime it will automatically size itself to the height and width of its content - the Button.
Add VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" to your ViewModelViewHost declaration and remove the other two Alignment attributes (they default to Stretch) and it should stretch its contents to the size of the Window while centering any item that has a fixed size.

Setting initial window size for a usercontrol with MVVM

Newbie question. I am using a simple dialog to display some of my usercontrols:
<Window x:Class="Nova5.UI.Views.WindowDialog"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WindowDialog"
WindowStyle="SingleBorderWindow"
WindowStartupLocation="CenterScreen" WindowState="{Binding WindowState, Mode=TwoWay}" >
<ContentPresenter x:Name="DialogPresenter" Content="{Binding .}"/>
</Window>
For some of my usercontrols that are hosted by the WindowDialog, I would like to have the initial dialog use SizeToContent instead of WindowState. The effect I'm trying to get is to have some user controls maximize to the entire screen, while others are to be smaller in the center of the screen.
Can this be done with the single WindowDialog or should I simply use two different WindowDialog's? (e.g., WindowDialogMaximized, and WindowDialogToContent)
Is there a better way?
Thank you for your consideration of my question.

I would create another binding for SizeToContent and bind the two properties like this:
For controls that should be sized to content, set SizeToContent to Width/Height/WidthAndHeight and WindowState to Normal.
For controls that should be maximized, set SizeToContent to Manual and WindowState to Maximized.

Getting the location of a Grid during runtime in codebehind

I am in the codebehind file for a usercontrol. In this user control I have a grid called GBoard. I create one instance of this user control in my main XAML file and I name it GameBoard. Now I am in the codebehind as I said earlier, and I want to get the X/Y position of GameBoard. If I grab the Margin, all the values are set to 0. If I do Canvas.GetTop(this) it comes back as NaN. How do I grab these coordinates? I don't think it's a bug in my code as everything works, its just I can't seem to grab the coordinates.
Position = new Point(Canvas.GetTop(GameBoard), Canvas.GetLeft(GameBoard));
gets NaN for values.
boardMargin = GameBoard.Margin;
boardMargin is 0,0,0,0 even though its positioned in the center of the screen.
<UserControl x:Class="UserControls.Board"
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"
xmlns:controls="clr-namespace:UserControls"
d:DesignHeight="300" d:DesignWidth="300">
<Grid Name="GBoard">
<Grid.ColumnDefinitions>
//lots of these
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
//lots of these
</Grid.RowDefinitions>
</Grid>
</UserControl>
that's the user control. I edited out the massive amount of col and row defs for space.
<Page x:Class="GUI.SGUI"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:UserControls"
Title="SGUI" Height="1000" Width="1000">
<Canvas x:Name="LetterCanvas">
<controls:Board x:Name="GameBoard" Height="Auto" Canvas.Left="120" Canvas.Top="164" Width="Auto"/>
</Canvas>
</Page>
I found out that if I access the location from the main class then I can get the coordinates, if I access them from the user control's codebehind I can't. So if I have to I can make something hacky, but I'd rather get the coordinates inside of the user control.

The code in your usercontrol needs access to the Canvas in order to get the GameBoard's position because the Canvas element in WPF uses absolute positioning.
Assuming that LetterCanvas will be the parent element of the GameBoard - try using this in the code behind for your GameBoard user control:
double xPosition = Canvas.GetLeft(this);
double yPosition = Canvas.GetTop(this);
NOTE: must call from method and not constructor.

using the Grid element somewhere in your design. It provides information about the location of your controls in a very straight-forward kind of way. It works like a smarter version of a dynamicly-sizing HTML table. You can retrive ActualWidth and ActualHeight properties of any row or column - or even of the entire grid itself if you want.

WPF - Setting window size to child usercontrol size

I have a tab control that is dynamically populated with tabs that contain user controls of various sizes. When a tab is opened I want the window to automatically resize to a size that makes sense given the active user control. Is there a clean way to do this?
I'm using a standard mvvm pattern.

Use the SizeToContent property on the Window class.
<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"
SizeToContent='Width'>
<Grid>
<Button Width='200' Content='The Button' />
</Grid>
</Window>

Adding a WPF UserControl programmatically has no style

I'm trying to create a button-like UserControl which consists of a border and a label. When adding this UserControl directly in the XAML of MainWindow, it renders correctly (it is put in a WrapPanel), but if I add it programmatically it doesn't look the same at all. There is no border, no background color, the text size of the label is wrong and so is the text color.
This is my user control:
<UserControl x:Class="Jishi.SonosPartyMode.UserControls.Player"
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="150" d:DesignWidth="300"
Width="200"
Height="100">
<Border BorderBrush="#086EAA" CornerRadius="8,8,8,8" BorderThickness="4" Margin="15" Padding="15px" VerticalAlignment="Center" Background="#0A4069">
<Label Name="PlayerName" TextElement.Foreground="White" TextElement.FontSize="20px">asdasdasd</Label>
</Border>
</UserControl>
when adding it, I just invoke it like this:
var button = new Player { Content = player.Properties.RoomName, DataContext = player.Properties.UDN };
PlayerList.Children.Add( button );
PlayerList is the actual WrapPanel and Player is my UserControl. I have tried finding information regarding this, but I don't find anything. If you have another approach that I can take, please come with suggestions. All I want is a clickable area with some rounded corners that can contain text (one or more rows).
I can apply styles programatically, but the styles defined in the xaml for the UserControl isn't preserved (Border, Margins, colors etc).

First of all, you don't need to create a custom control for this, you can easily do
var button = new Border { *border properties*, Content = new Lable {Content="dfsdfsdfsd"}};
And if you use PlayerList.Children.Add( button ); then it adds to the end of Wrappanel and in XAML code you add it not as the last element (maybe)..
And the last idea is that you lost some properties that you added in XAML when test it (like aligment, margin, etc.)
Hope this helps.