Hi
I am using a DXDialogWindow to show a Login Dialog at application startup. Whist there are examples of this in the help files and support tickets I have need allow the login to allow some fixed values when the application is run first time and then later on refer to the application's backend database to verify a user's name and password. So to that extent the login view needs to have a corresponding viewmodel that can take this scenario into account. I have therefore opted to use the messenger service to communicate back to the mainViewModel that instantiated the Login Dialog when the login is closed.
The problem I'm currently facing is one of layout. Firstly I'm using the DataLayout control because I want to make use of its ability to show datavalidation symbols (that works). I also want to be able to show a simple check or cross image to the side of the User Name and Password Datalayout items that will be shown (with the appropriate image) when the user name and password have been validated. Only a valid combination will trigger the enablement of the login button.
Before adding the image placeholders into the view the layout (thanks to the datalayout control) worked nicely. Since adding them it doesn't (see the attached image)
So I have two specific layout questions. Is my use of stackpanels to try and line up the datalayoutitem and image placeholder correct or is there a better way to do this, or perhaps it can't be done in which case I'll need a rethink.
Secondly, given that dialog is there purely to get the end user to enter their name and password it really only needs the login and cancel buttons to handle closure. Can I remove the standard min, max and close buttons that form part of the dialog window chrome, and if so how.
Lastly is it possible to use your SvgImageSource magic to place svg images into the plain image control (which I wish to do dynamically from the viewmodel depending on whether the Username and Password pass validation or fail, thus giving the end user a visual clue to correctness or otherwise).
This is the current xaml I have for the view
XAML<UserControl xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors" x:Class="ViewToLearn.FishTrackerEnterprises.Modules.Views.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:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm" xmlns:ViewModels="clr-namespace:ViewToLearn.FishTrackerEnterprises.Modules.ViewModels"
xmlns:dxlc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol"
xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
mc:Ignorable="d"
DataContext="{dxmvvm:ViewModelSource Type=ViewModels:LoginViewModel}"
d:DesignHeight="100" d:DesignWidth="300">
<Grid>
<dxlc:DataLayoutControl Orientation="Vertical" AutoGenerateItems="False" CurrentItem="{Binding}" dxe:ValidationService.IsValidationContainer="True">
<dxlc:LayoutGroup Orientation="Vertical">
<StackPanel Orientation="Horizontal" Margin="4">
<dxlc:DataLayoutItem Label="User Name" >
<dxe:TextEdit Text="{Binding UserName, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay, ValidatesOnDataErrors=True, NotifyOnValidationError=True, ValidatesOnExceptions=True, ValidatesOnNotifyDataErrors=True}" />
</dxlc:DataLayoutItem>
<Image x:Name="UserNameImage" Height="16" Width="16" />
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="4">
<dxlc:DataLayoutItem Label="Password" >
<dxe:TextEdit Text="{Binding Password, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay, ValidatesOnDataErrors=True, NotifyOnValidationError=True, ValidatesOnNotifyDataErrors=True}" />
</dxlc:DataLayoutItem>
<Image x:Name="PasswordImage" Height="16" Width="16" />
</StackPanel>
</dxlc:LayoutGroup>
<dxlc:LayoutGroup Orientation="Horizontal" HorizontalAlignment="Right">
<dx:SimpleButton Height="22" Width="75" Content="Login" Command="{Binding LoginCommand}" />
<dx:SimpleButton Height="22" Width="75" Content="Cancel" Command="{Binding CancelCommand}" />
</dxlc:LayoutGroup>
</dxlc:DataLayoutControl>
</Grid>
</UserControl>
and for the sake of completeness this is the viewmodel as it stands
C#using System;
using DevExpress.Mvvm.DataAnnotations;
using DevExpress.Mvvm;
using DevExpress.Mvvm.POCO;
using System.ComponentModel.DataAnnotations;
using ViewToLearn.FishTrackerEnterprise.Common;
namespace ViewToLearn.FishTrackerEnterprises.Modules.ViewModels
{
[POCOViewModel(ImplementIDataErrorInfo = true)]
public class LoginViewModel
{
[Required(AllowEmptyStrings = false, ErrorMessage ="User Name is required.")]
public virtual string UserName { get; set; }
[Required(AllowEmptyStrings = false, ErrorMessage = "Password is required.")]
public virtual string Password { get; set; }
private bool LoginPassed;
public LoginViewModel()
{
}
//public static LoginViewModel Create()
//{
// return ViewModelSource.Create(() => new LoginViewModel());
//}
public void Login()
{
SendMessage(LoginMessageType.Succeeded);
}
public void Cancel()
{
SendMessage(LoginMessageType.Canceled);
}
public bool CanLogin()
{
return LoginPassed;
}
protected void OnUserNameChanged()
{
}
protected void OnPasswordChanged()
{
}
void SendMessage(LoginMessageType loginMessage)
{
Messenger.Default.Send(new LoginMessage(loginMessage));
}
}
}
The Login dialog is called from the main viewmodel like so;
C#public void Login()
{
LoginViewModel loginViewModel = ViewModelSource.Create(() => new LoginViewModel());
DialogService.ShowDialog(dialogCommands: null, title: "Login", viewModel: loginViewModel);
}
Many thanks
Dom