登录界面设计
一.准备登录界面图片素材（透明背景图片）
1.把准备好的图片放在Images 文件夹下面，格式分别是.png和.ico
2.选中 login.png图片鼠标右键，选择属性。生成的操作选择==>资源
3.MyTodo 应用程序右键，属性，设置窗口图标
二.开始创建编写登录界面
1.添加用户控件，创建一个名为 LoginView.xaml 登录界面视图，并编写登录界面
<UserControl x:Class="MyToDo.Views.Dialog.LoginView"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:local="clr-namespace:MyToDo.Views.Dialog"xmlns:md="http://materialdesigninxaml.net/winfx/xaml/themes"xmlns:prism="http://prismlibrary.com/"mc:Ignorable="d" Height="350" Width="600"><!--修改外观样式--><prism:Dialog.WindowStyle><Style TargetType="Window"><Setter Property="Width" Value="600"/><Setter Property="Height" Value="350"/><Setter Property="SizeToContent" Value="WidthAndHeight"/> <!--当前窗口大小--><Setter Property="ResizeMode" Value="NoResize"/> <!--不允许调整窗口大小--><Setter Property="prism:Dialog.WindowStartupLocation" Value="CenterScreen"/> <!--窗口启动位置--></Style></prism:Dialog.WindowStyle><Grid Background="White"><!--界面分左右两列--><Grid.ColumnDefinitions><ColumnDefinition Width="1.5*"/><ColumnDefinition/></Grid.ColumnDefinitions><Image Source="/Images/login.png" Margin="50"/><DockPanel Grid.Column="1" VerticalAlignment="Center" Margin="15"><TextBlock Text="欢迎使用" FontSize="22" FontWeight="Bold" Margin="0,10" DockPanel.Dock="Top"/><TextBox Margin="0,10" md:HintAssist.Hint="请输入账号" DockPanel.Dock="Top"/><PasswordBox Margin="0,10" md:HintAssist.Hint="请输入密码" DockPanel.Dock="Top"/><Button Content="登录系统" DockPanel.Dock="Top"/><DockPanel LastChildFill="False" Margin="0,10"><TextBlock Text="注册账户"/><TextBlock Text="忘记密码?" DockPanel.Dock="Right"/></DockPanel></DockPanel></Grid>
</UserControl>
2.添加登录界面对应的后台逻辑处理类 LoginViewModel
public class LoginViewModel : BindableBase, IDialogAware
{public string Title { get; set; } = "ToDo"; //设置窗口标题public event Action<IDialogResult> RequestClose;public bool CanCloseDialog(){return true;}public void OnDialogClosed(){}public void OnDialogOpened(IDialogParameters parameters){}
}
三.应用程序启动的时候，先弹出登录界面。登录成功后再跳转内容主页
1.首先在应用程序启动初始化的过程中，进行判断。拿到弹窗的对话服务。
四.最后，把登录界面注册到容器中
containerRegistry.RegisterDialog<LoginView, LoginViewModel>();
public partial class App : PrismApplication{/// <summary>/// 创建启动页面/// </summary>/// <returns></returns>protected override Window CreateShell(){return Container.Resolve<MainView>();}protected override void OnInitialized(){var dialog= Container.Resolve<IDialogService>();//取到对话框服务//弹出登录界面dialog.ShowDialog("LoginView", callback =>{if (callback.Result == ButtonResult.None){Application.Current.Shutdown();//关闭当前应用程序return;}var service = App.Current.MainWindow.DataContext as IConfigureService;if (service != null) service.Configure();base.OnInitialized();});}/// <summary>/// 依懒注入的方法/// </summary>/// <param name="containerRegistry"></param>protected override void RegisterTypes(IContainerRegistry containerRegistry){//对封装的http请求类，进行注入。并且设置一个默认参数containerRegistry.GetContainer().Register<HttpRestClient>(made:Parameters.Of.Type<string>(serviceKey:"webUrl"));//注册默认的服务地址containerRegistry.GetContainer().RegisterInstance(@"http://localhost:5143/",serviceKey: "webUrl");//注册服务containerRegistry.Register<IToDoService, ToDoService>();containerRegistry.Register<IMemoService, MemoService>();containerRegistry.Register<IDialogHostService, DialogHostService>();//注册弹窗containerRegistry.RegisterDialog<LoginView, LoginViewModel>();containerRegistry.RegisterForNavigation<AddToDoView, AddToDoViewModel>();containerRegistry.RegisterForNavigation<AddMemoView, AddMemoViewModel>();containerRegistry.RegisterForNavigation<AboutView>();containerRegistry.RegisterForNavigation<MsgView,MsgViewModel>();containerRegistry.RegisterForNavigation<SkinView, SkinViewModel>();containerRegistry.RegisterForNavigation<IndexView, IndexViewModel>();containerRegistry.RegisterForNavigation<MemoView, MemoViewModel>();containerRegistry.RegisterForNavigation<ToDoView, ToDoViewModel>();containerRegistry.RegisterForNavigation<SettingsView, SettingsViewModel>();}}
