Lập trình phần mềm quản lý kho WPF - MVV...

Lập trình phần mềm quản lý kho WPF - MVVM

Tạo ControlBar trong Phần mềm quản lý kho WPF - MVVM Tạo ControlBar trong Phần mềm quản lý kho WPF - MVVM Tạo ControlBar trong Phần mềm quản lý kho WPF - MVVM Tạo ControlBar trong Phần mềm quản lý kho WPF - MVVM Tạo ControlBar trong Phần mềm quản lý kho WPF - MVVM 5/5 (20 reviews)

Tạo ControlBar trong Phần mềm quản lý kho WPF - MVVM

Đã đăng 2018-03-07 11:16:54 bởi Kteam
0 bình luận 3919 lượt xem
Tạo ControlBar trong Phần mềm quản lý kho WPF - MVVM 5 /5 stars (1 reviews)
 

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 THIẾT KẾ GIAO DIỆN ĐĂNG NHẬP . Trong bài này, Kteam sẽ giới thiệu đến các bạn cách Tạo ControlBar 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="525">
    <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>
</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 CHÍNH 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ó

 

Chia sẻ:
Thảo luận Hỏi và đáp Báo lỗi bài viết
Hủy bỏ   hoặc  
Hủy bỏ   hoặc  
Hủy bỏ   hoặc  

Chiến dịch

Kteam - Howkteam Free Education