CODEWITHSUNDEEP
c#wpfreactiveuimahapps.metro
BlackBox
BlackBox

Reputation: 2233

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>

Upvotes: 1

Views: 783

Answers (1)

Charles Mager
Charles Mager

Reputation: 26213

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.

Upvotes: 6

Related Questions