Thiết kế màn hình chính trong Phần mềm quản lý kho WPF - MVVM
Lập trình phần mềm quản lý kho WPF - MVVM
5.0 (2 đánh giá)
Tác giả/Dịch giả:
Kteam
Học nhanh
Kteam
Danh sách bài học
Thiết kế màn hình chính trong Phần mềm quản lý kho WPF - MVVM
Dẫn nhập
Nếu bạn đã từng rất thích thú với việc tự làm dự án thực tế qua serial hướng dẫn lập trình PHẦN MỀM QUẢN LÝ QUÁN CAFE bằng Winform thì chẳng có lý do gì để không tiếp tục nâng cao kinh nghiệm cá nhân với serial lập trình Phần mềm quản lý kho WPF – MVVM này. Không chỉ đề cập đến công nghệ WPF, serial còn kết hợp mô hình MVVM, entity framework, … và nhiều kỹ thuật khác.
Ở bài trước chúng ta đã tìm hiểu về cách TẠO CONTROLBAR TRONG PHẦN MỀM QUẢN LÝ KHO . Trong bài này, Kteam sẽ giới thiệu đến các bạn cách Thiết kế màn hình chính trong Phần mềm quản lý kho WPF – MVVM.
Nội dung
Nội dung bao gồm Source code & các lưu ý chính về quá trình thực hiện phần mềm. Kteam khuyến khích bạn cập nhập thêm nhiều kinh nghiệm cũng như hiểu chi tiết hơn về các kỹ thuật được đề cập trong bài học thông qua các video đính kèm.
Đừng quên Like Facebook hoặc +1 Google để ủng hộ Kteam và tác giả.
Để theo dõi tốt khóa học này, hãy đảm bảo bạn đã xem qua kiến thức về:
Project tham khảo
App.xaml
<Application x:Class="QuanLyKho.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:QuanLyKho"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
<ResourceDictionary Source="/ResourceXAML/MainResource.xaml"></ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
App.xaml.cs
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Threading.Tasks;
using System.Windows;
namespace QuanLyKho
{
/// <summary>
/// Interaction logic for App.xaml
/// </summary>
public partial class App : Application
{
}
}
MainWindow.xaml
<Window x:Class="QuanLyKho.MainWindow"
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:QuanLyKho"
mc:Ignorable="d"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:uc="clr-namespace:QuanLyKho.UserControlKteam"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
TextElement.Foreground="{DynamicResource MaterialDesignBody}"
TextElement.FontWeight="Regular"
TextElement.FontSize="13"
TextOptions.TextFormattingMode="Ideal"
TextOptions.TextRenderingMode="Auto"
Background="{DynamicResource MaterialDesignPaper}"
FontFamily="{DynamicResource MaterialDesignFont}"
ResizeMode="NoResize"
WindowStyle="None"
WindowStartupLocation="CenterScreen"
Name="mainWindow"
DataContext="{StaticResource MainVM}"
Title="Phần mềm quản lý kho" Height="500" Width="625">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Loaded">
<i:InvokeCommandAction Command="{Binding LoadedWindowCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<uc:ControlBarUC Tag="{Binding Title, ElementName=mainWindow}"></uc:ControlBarUC>
</Grid>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<!--menu-->
<Grid Grid.Row="0">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent">
<Grid.Resources>
<Style TargetType="Button">
<Setter Property="Margin" Value="2 4 2 4"></Setter>
<Setter Property="Background" Value="LightCyan"></Setter>
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" ToolTip="Nhập kho">
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<TextBlock Text="Nhập kho" HorizontalAlignment="Center"></TextBlock>
</Grid>
<Grid Grid.Row="1">
<materialDesign:PackIcon HorizontalAlignment="Center" Width="24" Height="24" Kind="ArrowDownBoldCircleOutline" />
</Grid>
</Grid>
</Button>
<Button Grid.Column="1" ToolTip="Xuất kho">
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<TextBlock Text="Xuất kho" HorizontalAlignment="Center"></TextBlock>
</Grid>
<Grid Grid.Row="1">
<materialDesign:PackIcon Width="24" Height="24" HorizontalAlignment="Center" Kind="ArrowUpBoldCircleOutline" />
</Grid>
</Grid>
</Button>
<Button Grid.Column="2" ToolTip="Vật tư">
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<TextBlock Text="Vật tư" HorizontalAlignment="Center"></TextBlock>
</Grid>
<Grid Grid.Row="1">
<materialDesign:PackIcon Width="24" Height="24" HorizontalAlignment="Center" Kind="Dns" />
</Grid>
</Grid>
</Button>
<Button Grid.Column="3" ToolTip="Đơn vị đo">
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<TextBlock Text="Đơn vị đo" HorizontalAlignment="Center"></TextBlock>
</Grid>
<Grid Grid.Row="1">
<materialDesign:PackIcon Width="24" Height="24" HorizontalAlignment="Center" Kind="Altimeter" />
</Grid>
</Grid>
</Button>
<Button Grid.Column="4" ToolTip="Nhà cung cấp">
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<TextBlock Text="Nhà cung cấp" HorizontalAlignment="Center"></TextBlock>
</Grid>
<Grid Grid.Row="1">
<materialDesign:PackIcon Width="24" Height="24" HorizontalAlignment="Center" Kind="Factory" />
</Grid>
</Grid>
</Button>
<Button Grid.Column="5" ToolTip="Khách hàng">
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<TextBlock Text="Khách hàng" HorizontalAlignment="Center"></TextBlock>
</Grid>
<Grid Grid.Row="1">
<materialDesign:PackIcon Width="24" Height="24" HorizontalAlignment="Center" Kind="HumanHandsup" />
</Grid>
</Grid>
</Button>
</Grid>
</Grid>
<!--main-->
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<!--Filter-->
<Grid Grid.Row="0">
<materialDesign:Card Margin="5">
<Grid Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<DatePicker VerticalAlignment="Center" HorizontalAlignment="Left" Width="100" materialDesign:HintAssist.Hint="Ngày bắt đầu" Style="{StaticResource MaterialDesignFloatingHintDatePicker}" />
</Grid>
<Grid Grid.Column="1">
<DatePicker VerticalAlignment="Center" HorizontalAlignment="Left" Width="100" materialDesign:HintAssist.Hint="Ngày kết thúc" Style="{StaticResource MaterialDesignFloatingHintDatePicker}" />
</Grid>
<Grid Grid.Column="2">
<Button Style="{StaticResource MaterialDesignRaisedButton}" Margin="5"
Width="100"
Content="Lọc"
ToolTip="Resource name: MaterialDesignRaisedButton"></Button>
</Grid>
</Grid>
<Grid Grid.Row="1">
<Separator Margin="5"></Separator>
</Grid>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<materialDesign:Card Background="#03a9f4" Margin="5"
Foreground="{DynamicResource PrimaryHueDarkForegroundBrush}"
Padding="0" Width="200">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Margin="16 16 16 4"
Text="Lượng nhập"
Style="{StaticResource MaterialDesignHeadlineTextBlock}">
</TextBlock>
<Separator Grid.Row="1" Style="{StaticResource MaterialDesignLightSeparator}" />
<TextBlock Grid.Row="2" Margin="16 0 16 8" VerticalAlignment="Center"
HorizontalAlignment="Left"
Text="998568"
Style="{StaticResource MaterialDesignDisplay1TextBlock}">
</TextBlock>
<materialDesign:PopupBox HorizontalAlignment="Right" Padding="2 0 2 0">
<StackPanel>
<!--đưa gì vào thì đưa-->
</StackPanel>
</materialDesign:PopupBox>
</Grid>
</materialDesign:Card>
</Grid>
<Grid Grid.Column="1">
<materialDesign:Card Background="#03a9f4" Margin="5"
Foreground="{DynamicResource PrimaryHueDarkForegroundBrush}"
Padding="0" Width="200">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Margin="16 16 16 4"
Text="Lượng xuất"
Style="{StaticResource MaterialDesignHeadlineTextBlock}">
</TextBlock>
<Separator Grid.Row="1" Style="{StaticResource MaterialDesignLightSeparator}" />
<TextBlock Grid.Row="2" Margin="16 0 16 8" VerticalAlignment="Center"
HorizontalAlignment="Left"
Text="998568"
Style="{StaticResource MaterialDesignDisplay1TextBlock}">
</TextBlock>
<materialDesign:PopupBox HorizontalAlignment="Right" Padding="2 0 2 0">
<StackPanel>
<!--đưa gì vào thì đưa-->
</StackPanel>
</materialDesign:PopupBox>
</Grid>
</materialDesign:Card>
</Grid>
<Grid Grid.Column="2">
<materialDesign:Card Background="#03a9f4" Margin="5"
Foreground="{DynamicResource PrimaryHueDarkForegroundBrush}"
Padding="0" Width="200">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Margin="16 16 16 4"
Text="Tồn kho"
Style="{StaticResource MaterialDesignHeadlineTextBlock}">
</TextBlock>
<Separator Grid.Row="1" Style="{StaticResource MaterialDesignLightSeparator}" />
<TextBlock Grid.Row="2" Margin="16 0 16 8" VerticalAlignment="Center"
HorizontalAlignment="Left"
Text="998568"
Style="{StaticResource MaterialDesignDisplay1TextBlock}">
</TextBlock>
<materialDesign:PopupBox HorizontalAlignment="Right" Padding="2 0 2 0">
<StackPanel>
<!--đưa gì vào thì đưa-->
</StackPanel>
</materialDesign:PopupBox>
</Grid>
</materialDesign:Card>
</Grid>
</Grid>
</Grid>
</materialDesign:Card>
</Grid>
<!--list-->
<materialDesign:Card Grid.Row="1" Margin="5" VerticalAlignment="Stretch">
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<DatePicker VerticalAlignment="Center" HorizontalAlignment="Left" Width="100" materialDesign:HintAssist.Hint="Ngày bắt đầu" Style="{StaticResource MaterialDesignFloatingHintDatePicker}" />
</Grid>
<Grid Grid.Column="1">
<DatePicker VerticalAlignment="Center" HorizontalAlignment="Left" Width="100" materialDesign:HintAssist.Hint="Ngày kết thúc" Style="{StaticResource MaterialDesignFloatingHintDatePicker}" />
</Grid>
<Grid Grid.Column="2">
<Button Style="{StaticResource MaterialDesignRaisedButton}" Margin="5"
Width="100"
Content="Lọc"
ToolTip="Resource name: MaterialDesignRaisedButton"></Button>
</Grid>
</Grid>
<Grid Grid.Row="1">
<Separator></Separator>
</Grid>
<Grid Grid.Row="2">
<ListView>
<ListView.View>
<GridView>
<GridViewColumn Header="STT"></GridViewColumn>
<GridViewColumn Header="Tên vật tư"></GridViewColumn>
<GridViewColumn Header="Số lượng tồn"></GridViewColumn>
</GridView>
</ListView.View>
</ListView>
</Grid>
</Grid>
</materialDesign:Card>
</Grid>
</Grid>
</Grid>
</Window>
MainWindow.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace QuanLyKho
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
//http://materialdesigninxaml.net/home
public MainWindow()
{
InitializeComponent();
}
}
}
LoginWindow.xaml
<Window x:Class="QuanLyKho.LoginWindow"
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:QuanLyKho"
mc:Ignorable="d"
xmlns:uc="clr-namespace:QuanLyKho.UserControlKteam"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
TextElement.Foreground="{DynamicResource MaterialDesignBody}"
TextElement.FontWeight="Regular"
TextElement.FontSize="13"
TextOptions.TextFormattingMode="Ideal"
TextOptions.TextRenderingMode="Auto"
Background="{DynamicResource MaterialDesignPaper}"
FontFamily="{DynamicResource MaterialDesignFont}"
ResizeMode="NoResize"
WindowStyle="None"
WindowStartupLocation="CenterScreen"
Name="loginWindow"
Title="Đăng nhập" Height="300" Width="400">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<uc:ControlBarUC Tag="{Binding Title, ElementName=loginWindow}"></uc:ControlBarUC>
</Grid>
<materialDesign:Card Grid.Row="1" Width="330" Height="150" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid>
<Grid.Resources>
<Style TargetType="Grid">
<Setter Property="Margin" Value="15 0 15 0"></Setter>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<TextBox materialDesign:HintAssist.Hint="Tên đăng nhập"
Style="{StaticResource MaterialDesignFloatingHintTextBox}" />
</Grid>
<Grid Grid.Row="1">
<PasswordBox x:Name="FloatingPasswordBox"
materialDesign:HintAssist.Hint="Mật khẩu"
Style="{StaticResource MaterialDesignFloatingHintPasswordBox}" />
</Grid>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Grid.Column="0"
Style="{StaticResource MaterialDesignRaisedButton}"
Width="110"
ToolTip="Resource name: MaterialDesignRaisedButton" Content="Đăng nhập"></Button>
<Button Grid.Column="1"
Style="{StaticResource MaterialDesignRaisedButton}"
Width="110"
Background="OrangeRed"
ToolTip="Resource name: MaterialDesignRaisedButton" Content="Thoát"></Button>
</Grid>
</Grid>
</materialDesign:Card>
</Grid>
</Window>
LoginWindow.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
namespace QuanLyKho
{
/// <summary>
/// Interaction logic for LoginWindow.xaml
/// </summary>
public partial class LoginWindow : Window
{
public LoginWindow()
{
InitializeComponent();
}
}
}
ResourceXAML
ResourceXAML \ MainResource.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:viewmodel="clr-namespace:QuanLyKho.ViewModel"
xmlns:local="clr-namespace:QuanLyKho.ResourceXAML">
<viewmodel:MainViewModel x:Key="MainVM"></viewmodel:MainViewModel>
</ResourceDictionary>
UserControlKteam
UserControlKteam \ ControlBarUC.xaml
<UserControl x:Class="QuanLyKho.UserControlKteam.ControlBarUC"
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:QuanLyKho.UserControlKteam"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
Name="ucControlBar"
mc:Ignorable="d">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonDown">
<i:InvokeCommandAction Command="{Binding MouseMoveWindowCommand}" CommandParameter="{Binding ElementName=ucControlBar}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<Grid>
<materialDesign:ColorZone Mode="PrimaryLight" >
<DockPanel>
<StackPanel DockPanel.Dock="Right" Background="Transparent" Orientation="Horizontal">
<StackPanel.Resources>
<Style TargetType="Button">
<Setter Property="Margin" Value="2 4 2 4"></Setter>
<Setter Property="Width" Value="40"></Setter>
</Style>
</StackPanel.Resources>
<Button Command="{Binding MinimizeWindowCommand}"
CommandParameter="{Binding ElementName=ucControlBar}"
ToolTip="Đóng" ToolBar.OverflowMode="AsNeeded" Background="ForestGreen">
<materialDesign:PackIcon Kind="WindowMinimize" />
</Button>
<Button Command="{Binding MaximizeWindowCommand}"
CommandParameter="{Binding ElementName=ucControlBar}"
ToolTip="Đóng" ToolBar.OverflowMode="AsNeeded" Background="ForestGreen">
<materialDesign:PackIcon Kind="WindowMaximize" />
</Button>
<Button Command="{Binding CloseWindowCommand}"
CommandParameter="{Binding ElementName=ucControlBar}"
ToolTip="Đóng" ToolBar.OverflowMode="AsNeeded" Background="OrangeRed">
<materialDesign:PackIcon Kind="WindowClose" />
</Button>
</StackPanel>
<StackPanel DockPanel.Dock="Left" Orientation="Horizontal">
<ToggleButton Style="{DynamicResource MaterialDesignHamburgerToggleButton}" />
<TextBlock VerticalAlignment="Center" Margin="16 0 0 0" Text="{Binding Tag, ElementName=ucControlBar}"></TextBlock>
</StackPanel>
</DockPanel>
</materialDesign:ColorZone>
</Grid>
</UserControl>
UserControlKteam \ ControlBarUC.xaml.cs
using QuanLyKho.ViewModel;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace QuanLyKho.UserControlKteam
{
/// <summary>
/// Interaction logic for ControlBarUC.xaml
/// </summary>
public partial class ControlBarUC : UserControl
{
public ControlBarViewModel Viewmodel { get; set; }
public ControlBarUC()
{
InitializeComponent();
this.DataContext = Viewmodel = new ControlBarViewModel();
}
}
}
ViewModel
ViewModel \ BaseViewModel.cs
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;
namespace QuanLyKho.ViewModel
{
public class BaseViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
class RelayCommand<T> : ICommand
{
private readonly Predicate<T> _canExecute;
private readonly Action<T> _execute;
public RelayCommand(Predicate<T> canExecute, Action<T> execute)
{
if (execute == null)
throw new ArgumentNullException("execute");
_canExecute = canExecute;
_execute = execute;
}
public bool CanExecute(object parameter)
{
try
{
return _canExecute == null ? true : _canExecute((T)parameter);
}
catch
{
return true;
}
}
public void Execute(object parameter)
{
_execute((T)parameter);
}
public event EventHandler CanExecuteChanged
{
add { CommandManager.RequerySuggested += value; }
remove { CommandManager.RequerySuggested -= value; }
}
}
}
ViewModel \ MainViewModel.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Input;
namespace QuanLyKho.ViewModel
{
public class MainViewModel : BaseViewModel
{
public bool Isloaded = false;
public ICommand LoadedWindowCommand { get; set; }
// mọi thứ xử lý sẽ nằm trong này
public MainViewModel()
{
LoadedWindowCommand = new RelayCommand<object>((p) => { return true; }, (p) => {
Isloaded = true;
LoginWindow loginWindow = new LoginWindow();
loginWindow.ShowDialog();
}
);
}
}
}
ViewModel \ ControlBarViewModel.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
namespace QuanLyKho.ViewModel
{
public class ControlBarViewModel : BaseViewModel
{
#region commands
public ICommand CloseWindowCommand { get; set; }
public ICommand MaximizeWindowCommand { get; set; }
public ICommand MinimizeWindowCommand { get; set; }
public ICommand MouseMoveWindowCommand { get; set; }
#endregion
public ControlBarViewModel()
{
CloseWindowCommand = new RelayCommand<UserControl>((p)=> { return p == null? false : true; }, (p)=> {
FrameworkElement window = GetWindowParent(p);
var w = window as Window;
if (w != null)
{
w.Close();
}
}
);
MaximizeWindowCommand = new RelayCommand<UserControl>((p) => { return p == null ? false : true; }, (p) =>
{
FrameworkElement window = GetWindowParent(p);
var w = window as Window;
if (w != null)
{
if (w.WindowState != WindowState.Maximized)
w.WindowState = WindowState.Maximized;
else
w.WindowState = WindowState.Normal;
}
}
);
MinimizeWindowCommand = new RelayCommand<UserControl>((p) => { return p == null ? false : true; }, (p) =>
{
FrameworkElement window = GetWindowParent(p);
var w = window as Window;
if (w != null)
{
if (w.WindowState != WindowState.Minimized)
w.WindowState = WindowState.Minimized;
else
w.WindowState = WindowState.Maximized;
}
}
);
MouseMoveWindowCommand = new RelayCommand<UserControl>((p) => { return p == null ? false : true; }, (p) =>
{
FrameworkElement window = GetWindowParent(p);
var w = window as Window;
if (w != null)
{
w.DragMove();
}
}
);
}
FrameworkElement GetWindowParent(UserControl p)
{
FrameworkElement parent = p;
while (parent.Parent != null)
{
parent = parent.Parent as FrameworkElement;
}
return parent;
}
}
}
Tải Project
Nếu việc thực hành theo hướng dẫn không diễn ra suôn sẻ như mong muốn. Bạn cũng có thể tải xuống PROJECT THAM KHẢO ở link bên dưới!
Kết
Trong bài này, chúng ta đã tìm hiểu cách phân tích đặc tả phần mềm quản lý kho.
Ở bài sau, Kteam sẽ giới thiệu đến bạn cách THIẾT KẾ MÀN HÌNH THÊM, XÓA, SỬA TRONG PHẦN MỀM QUẢN LÝ KHO WPF – MVVM.
Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận hoặc góp ý của mình để phát triển bài viết tốt hơn. Và đừng quên “Luyện tập – Thử Thách – Không ngại khó”
Tải xuống
Tài liệu
Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học Thiết kế màn hình chính trong Phần mềm quản lý kho WPF - MVVM dưới dạng file PDF trong link bên dưới.
Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com
Đừng quên like và share để ủng hộ Kteam và tác giả nhé!
Thảo luận
Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.
Nội dung bài viết
Tác giả/Dịch giả
Khóa học
Lập trình phần mềm quản lý kho WPF - MVVM
Nếu bạn đã từng rất thích thú với việc tự làm dự án thực tế qua serial hướng dẫn lập trình PHẦN MỀM QUẢN LÝ QUÁN CAFE bằng Winform thì chẳng có lý do gì để không tiếp tục nâng cao kinh nghiệm cá nhân với serial lập trình Phần mềm quản lý kho WPF – MVVM.
Serial Phần mềm quản lý kho sử dụng công nghệ WPF cùng với mô hình MVVM, sử dụng entity framework và theme giao diện của WPF Material design,... cùng rất nhiều kỹ thuật, kinh nghiệm khác.
Không có gì tuyệt vời hơn là luyện tập với dự án thực tế. Nào cùng nhau thử thách bản thân với phần mềm Quản lý kho WPF – MVVM.
Đánh giá
Vo Tan Duc
đã đánh giá
19:05 18-09-2021
Very good! Em học được rất nhiều kiến thức! Mong anh và kteam ra những khóa học thực chiến về WPF để em học hỏi thêm những kỹ thuật và kinh nghiệm thực tế từ anh Long. WPF + Material Design thiết kế giao diện đẹp ghê. Thiết kế giao diện đẹp quá anh Long ơi!
rất bổ ích
ai giúp mình giải thích kỳ về "Card" dc ko?