WPF中如何让登录UserControl跨两个ContentControl显示？

要让登录UserControl跨两列显示，同时保留游戏时双ContentControl的布局，推荐两种简洁的实现方式：

方法一：添加全局覆盖式登录容器 #

在主Grid中新增一个跨两列的ContentControl，专门承载登录界面，游戏开始后隐藏该容器并显示原有双ContentControl。

修改主窗口XAML： #

<Window x:Class="TicTacToe_Main_form.MainWindow"
    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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:TicTacToe_Main_form"
    mc:Ignorable="d"
    Title="Tic-Tac-Toe" Height="450" Width="600"
    ResizeMode="NoResize">
<Grid>
    
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions >
    
    <!-- 游戏相关控件默认隐藏 -->
    <ContentControl x:Name="ActionWindow" Grid.Column="0" Visibility="Collapsed"/>
    <ContentControl x:Name="SideWindow" Grid.Column="1" Visibility="Collapsed"/>
    
    <!-- 登录容器跨两列显示 -->
    <ContentControl x:Name="LoginContainer" Grid.ColumnSpan="2">
        <local:StartNewGame />
    </ContentControl>

</Grid>

后台切换逻辑（示例）： #

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    // 假设此方法为登录成功后的触发回调
    private void OnLoginSuccess()
    {
        // 隐藏登录容器，显示游戏界面
        LoginContainer.Visibility = Visibility.Collapsed;
        ActionWindow.Visibility = Visibility.Visible;
        SideWindow.Visibility = Visibility.Visible;
        
        // 加载游戏界面与计分板
        ActionWindow.Content = new GameBoard();
        SideWindow.Content = new ScoreBoard();
    }
}

方法二：动态替换Grid子元素 #

初始将登录控件直接放在主Grid并设置跨列，登录完成后移除登录控件，动态添加游戏相关的双ContentControl。

修改主窗口XAML： #

<Window x:Class="TicTacToe_Main_form.MainWindow"
    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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:TicTacToe_Main_form"
    mc:Ignorable="d"
    Title="Tic-Tac-Toe" Height="450" Width="600"
    ResizeMode="NoResize">
<Grid x:Name="MainGrid">
    
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions >
    
    <!-- 初始加载登录控件 -->
    <local:StartNewGame x:Name="LoginControl" Grid.ColumnSpan="2"/>

</Grid>

后台切换逻辑（示例）： #

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void OnLoginSuccess()
    {
        // 移除登录控件
        MainGrid.Children.Remove(LoginControl);
        
        // 添加游戏界面控件
        var actionWindow = new ContentControl();
        Grid.SetColumn(actionWindow, 0);
        actionWindow.Content = new GameBoard();
        MainGrid.Children.Add(actionWindow);
        
        // 添加计分板控件
        var sideWindow = new ContentControl();
        Grid.SetColumn(sideWindow, 1);
        sideWindow.Content = new ScoreBoard();
        MainGrid.Children.Add(sideWindow);
    }
}

优化提问建议 #

1. 补充登录控件的核心布局需求（比如是否需要居中、是否包含特殊交互元素），方便针对性调整样式；
2. 说明登录完成的触发逻辑（比如按钮点击、验证通过事件），可以让切换逻辑的示例更贴合你的实际场景；
3. 若有样式上的特殊要求（比如登录界面背景、动画过渡），也可以一并说明。

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