TabControl.ContentTemplate中的ViewModelViewHost随窗口增高异常变宽

问题原因 #

1. ViewModelViewHost的默认布局特性：作为动态视图宿主，它默认不会继承父容器的宽度约束优先级。当处于TabControl的ContentTemplate中时，窗口垂直拉伸触发布局重计算，ViewModelViewHost会错误请求超出父级分配的宽度，导致Grid第0列被撑宽。
2. 直接嵌入View的差异：直接嵌入的View自身带有固定尺寸或显式宽度约束，TabControl的内容容器能正确识别并限制其宽度；但ViewModelViewHost作为中间层，未传递这种约束，导致布局系统误判可用空间。

解决方法 #

1. 给TabControl内的ViewModelViewHost绑定父级宽度 #

在ContentTemplate中，让ViewModelViewHost绑定TabItem的实际宽度，确保它仅使用分配的空间：

<TabControl x:Name="InstructionsTabControl">
    <TabControl.ContentTemplate>
        <DataTemplate>
            <rxui:ViewModelViewHost 
                Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type TabItem}}}"
                HorizontalAlignment="Stretch"
                ViewModel="{Binding}" />
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

2. 锁定Grid第0列的宽度上限 #

给Grid第0列添加MaxWidth绑定，关联到R0C0处ViewModelViewHost的实际宽度，强制列宽不会被其他元素突破：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" MaxWidth="{Binding ElementName=TopHost, Path=ActualWidth}" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <rxui:ViewModelViewHost x:Name="TopHost" Grid.Row="0" Grid.Column="0" />
    <TabControl Grid.Row="1" Grid.Column="0" x:Name="InstructionsTabControl" />
</Grid>

3. 在动态视图中添加宽度约束 #

在对应的ReactiveUserControl中，显式设置自身的宽度约束，确保视图不会主动扩展超出宿主范围：

<UserControl x:Class="YourNamespace.YourView"
             HorizontalAlignment="Stretch"
             MaxWidth="{Binding ActualWidth, RelativeSource={RelativeSource Self}}">
    <!-- 视图内容 -->
</UserControl>

内容的提问来源于stack exchange，提问作者Hydrargyrum