如何將用戶控件更改為用戶控件？

Question

我有 2 個用戶控件。 1 - 登錄UC。 2 - 注冊 uc。

登錄用戶控制：

<UserControl x:Class="Project.Views.LoginView"
        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:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        mc:Ignorable="d"
        Width="350"
        Height="500">
    <Grid>
        <Rectangle Height="280" VerticalAlignment="Top">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Aqua"/>
                    <GradientStop Color="#FF34268A" Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

        <Rectangle Width="280" Height="240" VerticalAlignment="Bottom" Margin="0,80" RadiusY="10" RadiusX="10" Fill="White">
            <Rectangle.Effect>
                <DropShadowEffect BlurRadius="15" Direction="0" RenderingBias="Quality" ShadowDepth="1" Color="#FFBBBBBB"/>
            </Rectangle.Effect>
        </Rectangle>
        <Grid VerticalAlignment="Bottom" Margin="35,80" Height="240">
            <Label Content="Вход" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="5" Foreground="Gray" FontSize="18"/>
            <StackPanel VerticalAlignment="Center" Margin="15">
                <TextBox x:Name="Username" materialDesign:HintAssist.Hint="Логин" Margin="0,10"  Style="{StaticResource MaterialDesignFloatingHintTextBox}" FontFamily="Champagne &amp; Limousines" FontSize="18"/>
                <PasswordBox x:Name="Password" materialDesign:HintAssist.Hint= "Пароль" Margin="0,10" Style="{StaticResource MaterialDesignFloatingHintPasswordBox}" FontFamily="Champagne &amp; Limousines" FontSize="18"/>
            </StackPanel>
        </Grid>
        <Button x:Name="Login" Width="150" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,65" Content="Войти"/>
        <Button x:Name="Register" Width="150" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="5" Content="Register?" Background="{x:Null}"/>
        <Image Source="/Project;component/Assets/smartphone.png" Width="100" Height="100" VerticalAlignment="Top" Margin="30"/>
    </Grid>
</UserControl>

注冊用戶控件：

<UserControl x:Class="Project.Views.RegisterView"
             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" 
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             mc:Ignorable="d"
             Width="350"
             Height="800">
    <Grid>
        <Rectangle Height="280" VerticalAlignment="Top">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Aqua"/>
                    <GradientStop Color="#FF34268A" Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

        <Rectangle Width="280" Height="500" VerticalAlignment="Bottom" Margin="0,80" RadiusY="10" RadiusX="10" Fill="White">
            <Rectangle.Effect>
                <DropShadowEffect BlurRadius="15" Direction="0" RenderingBias="Quality" ShadowDepth="1" Color="#FFBBBBBB"/>
            </Rectangle.Effect>
        </Rectangle>
        <Grid VerticalAlignment="Bottom" Margin="35,80" Height="500">
            <Label Content="Регистрация" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="5" Foreground="Gray" FontSize="18"/>
            <StackPanel VerticalAlignment="Center" Margin="15">
                <TextBox x:Name="Email" materialDesign:HintAssist.Hint="Email" Margin="0,10"  Style="{StaticResource MaterialDesignFloatingHintTextBox}" FontFamily="Champagne &amp; Limousines" FontSize="18"/>
                <PasswordBox x:Name="Password" materialDesign:HintAssist.Hint= "Пароль" Margin="0,10" Style="{StaticResource MaterialDesignFloatingHintPasswordBox}" FontFamily="Champagne &amp; Limousines" FontSize="18"/>
                <TextBox x:Name="Username" materialDesign:HintAssist.Hint="Имя" Margin="0,10"  Style="{StaticResource MaterialDesignFloatingHintTextBox}" FontFamily="Champagne &amp; Limousines" FontSize="18"/>
                <TextBox x:Name="Surname" materialDesign:HintAssist.Hint="Фамилия" Margin="0,10"  Style="{StaticResource MaterialDesignFloatingHintTextBox}" FontFamily="Champagne &amp; Limousines" FontSize="18"/>
                <DatePicker x:Name="BirthdayDate" Margin="0,10" materialDesign:HintAssist.Hint="Выберите дату рождения" FontFamily="Champagne &amp; Limousines" FontSize="18"/>
                <Button x:Name="SelectPhoto" Content="Выбор фото"/>
            </StackPanel>
        </Grid>
        <Button x:Name="Register" Width="150" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,65" Content="Зарегистрироваться"/>
        <Image Source="/Project;component/Assets/smartphone.png" Width="100" Height="100" VerticalAlignment="Top" Margin="30"/>
    </Grid>
</UserControl>

我的引導程序：

public class Bootstrapper : BootstrapperBase
    {
        private SimpleContainer _container = new SimpleContainer();
        public Bootstrapper()
        {
            Initialize();

            ConventionManager.AddElementConvention<PasswordBox>(
            PasswordBoxHelper.BoundPasswordProperty,
            "Password",
            "PasswordChanged");
        }
        protected override void Configure()
        {
            _container.Singleton<IWindowManager, WindowManager>();
            _container.Singleton<LoginViewModel>();
            _container.Singleton<RegisterViewModel>();
            _container.Singleton<HomeViewModel>();
            _container.Singleton<ShellViewModel>();
        }
        protected override void OnStartup(object sender, StartupEventArgs e)
        {
            DisplayRootViewFor<ShellViewModel>();
        }
        protected override object GetInstance(Type service, string key)
        {
            return _container.GetInstance(service, key);
        }
        protected override IEnumerable<object> GetAllInstances(Type service)
        {
            return _container.GetAllInstances(service);
        }
        protected override void BuildUp(object instance)
        {
            _container.BuildUp(instance);
        }
    }

還有一個 window 我想在其中更改這些用戶控件：

<Window x:Class="Project.Views.ShellView"
        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:SocialNetwork.Views"
        mc:Ignorable="d"
        Width="350"
        Height="500">
    <Grid>
        <ContentControl x:Name="ActiveItem"/>
    </Grid>
</Window>

外殼視圖模型：

public class ShellViewModel : Conductor<object>
    {
        private LoginViewModel _loginViewModel;
        private RegisterViewModel _registerViewModel;
        public ShellViewModel(LoginViewModel loginViewModel, RegisterViewModel registerViewModel)
        {
            DisplayName = "Войти";
            _loginViewModel = loginViewModel;
            _registerViewModel = registerViewModel;
            ActivateItemAsync(_loginViewModel);
        }
    }

如何單擊登錄用戶控件中的注冊按鈕，將其更改為注冊用戶控件？當您單擊注冊用戶控件中的注冊按鈕時，將注冊更改回登錄？

我是這樣做的：

更新

public Task HandleAsync(ChangeViewMessage message, CancellationToken cancellationToken)
        {
            if (message.ViewModelType.Name.Equals("LoginViewModel"))
            {
               DisplayName = "Регистрация";
               
               NotifyOfPropertyChange(() => DisplayName);
               return ActivateItemAsync(_registerViewModel);
            }
            else
            {
                DisplayName = "Вход";
                NotifyOfPropertyChange(() => DisplayName);
                return ActivateItemAsync(_loginViewModel);
            }
        }

Answer 1

例如，您可以使用事件聚合器將事件或消息從視圖 model 發送到 shell。

這個想法是ShellViewModel通過激活視圖來處理事件：

public class ShellViewModel : Conductor<object>, IHandle<ChangeViewMessage>
{
    public ShellViewModel(IEventAggregator eventAggregator)
    {
        eventAggregator.Subscribe(this);
        ...
    }

    public void Handle(ChangeViewMessage message)
    {
        // call ActivateItemAsync based on type here...
    }
    
    ...
}

public class ChangeViewMessage
{
    public readonly Type ViewModelType;

    public ChangeViewMessage(Type viewModelType)
    {
        ViewModelType = viewModelType;
    }
}

而LoginViewModel和RegisterViewModel類發布事件，例如：

eventAggregator.Publish(new ChangeViewType(this.GetType()));