登录界面设计
一.准备登录界面图片素材(透明背景图片)
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>();
}
}