Tạo ControlBar 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 (5 đánh giá)

Tạo bởi Kteam Cập nhật lần cuối 11:16 07-03-2018 31.107 lượt xem 14 bình luận

Tác giả/Dịch giả:

Kteam

Học nhanh

Danh sách bài học

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

Nội dung bài viết Học nhanh

Bài trước Bài sau

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 quản lý 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="Thoá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="Đóng" ToolBar.OverflowMode="AsNeeded" Background="ForestGreen">
                        <materialDesign:PackIcon Kind="WindowMinimize" />
                    </Button>
                    <Button Command="{Binding MaximizeWindowCommand}" 
                            CommandParameter="{Binding ElementName=ucControlBar}"
                        ToolTip="Đóng" ToolBar.OverflowMode="AsNeeded" Background="ForestGreen">
                        <materialDesign:PackIcon Kind="WindowMaximize" />
                    </Button>
                    <Button Command="{Binding CloseWindowCommand}" 
                            CommandParameter="{Binding ElementName=ucControlBar}"
                            ToolTip="Đó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; }

        // mọi thứ xử lý sẽ nằm trong nà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ó”

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 Tạo ControlBar 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.

CỘNG ĐỒNG HỎI ĐÁP HOWKTEAM.COM

GROUP THẢO LUẬN FACEBOOK

Nội dung bài viết

Tác giả/Dịch giả

Kteam

Khóa học

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:04 18-09-2021

Very good! Em học được rất nhiều kiến thức!

Báo cáo

dngvntrng đã đánh giá 19:09 03-09-2021

Báo cáo

anhduc85gl đã đánh giá 02:46 12-07-2021

Báo cáo

phamxuanlinhuit đã đánh giá 20:53 08-04-2019

Báo cáo

HuyC# đã đánh giá 19:38 01-03-2019

Báo cáo

Bình luận

Để bình luận, bạn cần đăng nhập bằng tài khoản Howkteam.

Đăng nhập

RKPH11062003 đã bình luận 19:14 06-05-2023

ai giúp em phần login form được không ạ, em làm theo mà bị hiển thị 2 lần login form ạ :((

0 0

Trả lời Báo cáo

nguyennhan.ninomaxx đã bình luận 11:52 17-06-2022

hi anh Long, cho mình hỏi là mình đang phân Model và ViewModel ra thành project riêng,

Trong phần MainResource để có thể gọi MainViewModel mình phải add referrence vào rồi => View đã add referrece của ViewModel

khi tới chổ MainViewBase, lúc check IsLoad thì có gọi LoginWindow lên cho show ra, nhưng vấn đề ở đây là ko add referrence ngược lại được thì làm sao mình gọi LoginWindow đc.

Mong được hồi âm.

Thanks

0 0

Trả lời Báo cáo

nmquoc đã bình luận 09:29 17-02-2021

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>

đoạn này em cài rồi mà sao vẫn báo lỗi admin ạ lỗi i:Interaction.Triggers ấy ạ bị gạch đít màu xanh

0 0

Trả lời Báo cáo

honguyen đã bình luận 10:30 24-08-2020

biến IsLoaded trong MainViewModel để làm gì vậy Ad?

0 0

Trả lời Báo cáo

Lê Thành Long đã bình luận 17:15 12-04-2020

Có hàm public static Window GetWindow(DependencyObject dependencyObject); ở class Window để lấy cái Window mà UserControl nó nằm.

2 0

Trả lời Báo cáo

Tạo ControlBar 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

Danh sách bài học

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

Dẫn nhập

Nội dung

Project tham khảo

ResourceXAML

UserControlKteam

ViewModel

Tải Project

Kết

Tải xuống

Tài liệu

Thảo luận

Tác giả/Dịch giả

Khóa học

Đánh giá

Bình luận

Danh sách bài giảng

Không có video.

AD BLOCKER DETECTED