WPF MVVM中基于ViewModel字段切换位置UserControl失败求助

问题描述 #

我正在开发一款地牢爬行游戏，玩家可在固定地点间导航，仅显示当前所在位置，移动时切换显示。当前GameView包含一个展示背包、属性和位置的UserControl，希望在屏幕中央新增第二个UserControl用于显示位置，当View收到玩家移动通知时切换该控件。

我目前在主窗口中使用以下代码，通过ContentControl结合DataTemplate根据CurrentViewModel切换菜单控件：

<ContentControl Content="{Binding CurrentViewModel}">
    <ContentControl.Resources>
        <DataTemplate DataType="{x:Type viewmodels:MenuViewModel}">
            <views:MenuView/>
        </DataTemplate>
        <!-- 其他ViewModel对应的DataTemplate -->
    </ContentControl.Resources>
</ContentControl>

尝试用类似方式实现位置切换，代码如下，但位置无法在屏幕中央显示：

<Viewbox Grid.Row="1" Grid.Column="1" Grid.RowSpan="2">
    <ContentControl Content="{Binding CurrentLocation}">
        <ContentControl.Resources>
            <DataTemplate DataType="{x:Type locationModel:SmallRoom}">
                <locationView:SmallRoomView/>
            </DataTemplate>

            <DataTemplate DataType="{x:Type locationModel:LargeRoom}">
                <locationView:LargeRoomView/>
            </DataTemplate>
        </ContentControl.Resources>
    </ContentControl>
</Viewbox>

我已确认CurrentLocation属性已更新为SmallRoom类型，甚至直接在ContentControl中放置SmallRoomView，控件仍无法在中央显示。

问题原因 #

1. Grid布局空间分配不足：如果Grid.Row="1"和Grid.Column="1"对应的行/列未设置为Height="*"或Width="*"，该区域不会占据窗口的可用空间，导致Viewbox没有足够区域居中。
2. 对齐属性缺失：Viewbox和ContentControl默认对齐方式未设置为居中，子控件可能被拉伸或挤压到角落。
3. UserControl自身布局问题：SmallRoomView等控件内部根元素未设置居中对齐，或没有明确的最小尺寸，导致控件缩为0大小，看似未显示。

优化方案 #

1. 确保Grid分配足够可用空间 #

先检查包含Viewbox的Grid行/列定义，让目标区域占满窗口剩余空间：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/> <!-- 顶部背包/属性栏 -->
        <RowDefinition Height="*"/> <!-- 中间位置显示区域，占满剩余高度 -->
        <RowDefinition Height="Auto"/> <!-- 底部操作栏 -->
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/> <!-- 左侧辅助UI -->
        <ColumnDefinition Width="*"/> <!-- 中间位置列，占满剩余宽度 -->
        <ColumnDefinition Width="Auto"/> <!-- 右侧辅助UI -->
    </Grid.ColumnDefinitions>

    <!-- 其他UI元素 -->
</Grid>

2. 调整Viewbox和ContentControl的对齐属性 #

给Viewbox和ContentControl添加居中对齐，并设置Viewbox的拉伸模式为Uniform（保持比例缩放）：

<Viewbox Grid.Row="1" Grid.Column="1"
         HorizontalAlignment="Center" VerticalAlignment="Center"
         Stretch="Uniform">
    <ContentControl Content="{Binding CurrentLocation}"
                    HorizontalAlignment="Center" VerticalAlignment="Center">
        <ContentControl.Resources>
            <DataTemplate DataType="{x:Type locationModel:SmallRoom}">
                <locationView:SmallRoomView HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </DataTemplate>
            <DataTemplate DataType="{x:Type locationModel:LargeRoom}">
                <locationView:LargeRoomView HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </DataTemplate>
        </ContentControl.Resources>
    </ContentControl>
</Viewbox>

3. 修复UserControl内部布局 #

打开SmallRoomView.xaml，确保根元素设置居中对齐和最小尺寸，避免控件缩为0：

<UserControl x:Class="YourNamespace.locationView.SmallRoomView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             HorizontalAlignment="Center" VerticalAlignment="Center"
             MinWidth="300" MinHeight="300"> <!-- 设置最小尺寸确保可见 -->
    <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
        <!-- 房间的UI元素 -->
    </Grid>
</UserControl>

4. 确认CurrentLocation的通知机制 #

确保CurrentLocation所在的ViewModel实现INotifyPropertyChanged接口，属性更新时触发通知：

private LocationBase _currentLocation;
public LocationBase CurrentLocation
{
    get => _currentLocation;
    set
    {
        _currentLocation = value;
        OnPropertyChanged(nameof(CurrentLocation));
    }
}

// 实现INotifyPropertyChanged的标准方法
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

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