-
Notifications
You must be signed in to change notification settings - Fork 1
Task01
Put on the ShellView a TabControl with 3 tab items:
- Dashboard (DashboardView as a Content),
- Timesheet entries (TimesheetEntriesView as a Content),
- Reports (ReportsView as a Content).
In the Top-Left corner place Button 'Add'.
Place DataGrid and assign to Timesheet entries (use Database.cs and TimelyService.cs)
DataGrid should contain 8 columns:
- Date of timesheet entry (Header - Date),
- Amount of working time (Header - Time spent),
- Project name (Header - Project),
- Title of timesheet entry (Header - Title),
- Description of timesheet entry (Header - Description),
- User name (Header - User)
- Edit button (Navigates to edition window),
- Delete button (Delete existing entry).
'Date' should have format 'dd.MM.yyyy'.
'Time spent' should be bolded and aligned to right - the format is 'hh:mm'.
'Project' and 'User' should be represented by DataGridComboBoxColumn.
'Edit' and 'Delete' should be represented by DataGridTemplateColumn.
Try to use Blend for VS or Visual Studio Designer.
Hint: DataGrid columns are not represented in Visual Tree, so if you wish Bind ItemsSource to the ViewModel use something like this:
<DataGridComboBoxColumn.ElementStyle>
<Style TargetType="{x:Type ComboBox}">
<Setter Property="ItemsSource"
Value="{Binding DataContext.Projects,
RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type DataGrid}}}" />
</Style>
</DataGridComboBoxColumn.ElementStyle>
Before you add the view, you need to install MvvmDialogs NuGet Package. After installation of this NuGet, add
- TimesheetEntryDialogViewModel (ViewModels folder),
- TimesheetEntryDialog class (Views folder),
public class TimesheetEntryDialog : IWindow
{
private readonly TimesheetEntryView _dialog;
public TimesheetEntryDialog()
{
_dialog = new TimesheetEntryView();
}
object IWindow.DataContext
{
get { return _dialog.DataContext; }
set { _dialog.DataContext = value; }
}
bool? IWindow.DialogResult
{
get { return _dialog.DialogResult; }
set { _dialog.DialogResult = value; }
}
ContentControl IWindow.Owner
{
get { return _dialog.Owner; }
set { _dialog.Owner = (Window)value; }
}
bool? IWindow.ShowDialog()
{
return _dialog.ShowDialog();
}
void IWindow.Show()
{
_dialog.Show();
}
}
- TimesheetEntryView window (Views folder)
<Window x:Class="timely.Views.TimesheetEntryView"
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:timely.Views"
xmlns:vm="clr-namespace:timely.ViewModels"
mc:Ignorable="d"
Title="Timesheet Entry Dialog"
WindowStartupLocation="CenterOwner"
SizeToContent="WidthAndHeight"
ResizeMode="NoResize"
d:DataContext="{d:DesignInstance {x:Type vm:TimesheetEntryDialogViewModel}}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="1"
Orientation="Horizontal"
HorizontalAlignment="Right">
<Button Content="OK"
Command="{Binding OkCommand}"
IsDefault="True" />
<Button Content="Cancel"
IsCancel="True" />
</StackPanel>
</Grid>
</Window>
Sample usage of MvvmDialog:
private void OnAddTimesheetEntry(object parameter)
{
var timesheetEntryViewModel = new TimesheetEntryDialogViewModel { Entry = new TimesheetEntry() };
bool? success = _dialogService.ShowDialog(this, timesheetEntryViewModel);
if (success.GetValueOrDefault())
{
}
}
Please, add appropriate labels and edit controls related with TimesheetEntry properties to the TimesheetEntryView. For DateStarted, use DatePicker control and create a converter which handle conversion between DateTime and DateTime?
Lets leave TimeSpent as a TextBox - we will introduce validation in Task 2