Tạo thanh controlbar và hình logo

Lập trình giao diện Megaman tool với WPF

0.0 (0 đánh giá)
Tạo bởi K9 Cập nhật lần cuối 17:48 05-10-2020 637 lượt xem 0 bình luận
Học nhanh

Danh sách bài học

Tạo thanh controlbar và hình logo

Dẫn nhập

Megaman X4 là một tựa game rất thú vị gắn bó với mình một thời gian dài qua điện tử bấm, khi mà máy tính hay lập trình còn là gì đó vô cùng xa vời. Mình còn nhớ nguyên mấy tháng mùa hè dí đầu dí cổ vào game để luyện tay qua màn, mãi mà không phá đảo được. Giờ để thử thách bản thân, mình đã tạo ra một giải pháp giúp mình chinh phục "giấc mơ tuổi thơ này". Đó chính là TOOL CHEAT GAME MEGAMAN X4. :v :v :v

Tuy nhiên, trước khi làm tool bạn cần có một giao diện đẹp "kinh khủng khiếp" để có thể xịn xò ngang với game. Chính vì vậy, để bổ trợ cho khóa học CHEAT GAME MEGAMAN X4, đồng thời củng cố khả năng lập trình giao diện với WPF. Kteam sẽ cùng bạn bắt đầu Lập trình giao diện Megaman tool với WPF.

Ở bài IMPORT ASSEST TỪ DESIGN, Kteam đã hướng dẫn bạn cách cấu trúc project phân chia các resource một cách hợp lý. Trong bài này, chúng ta sẽ tìm hiểu cách tạo thanh controlbar và hình logo cho tool Megaman.


Nội dung

Để theo dõi bài này một cách tốt nhất, bạn nên có kiến thức về:

Trong bài này , chúng ta sẽ cùng tìm hiểu các vấn đề:

  • Cách tạo thanh controlbar và hiệu ứng.
  • Một số lưu ý khi customize controlbar.
  • Cách gán logo.

Source code tham khảo

App.xaml

<Application x:Class="MegamanUI.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:MegamanUI"
             StartupUri="MainWindow.xaml">
    <Application.Resources>        
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="XamlResources/TriggerRes.xaml"></ResourceDictionary>
                <ResourceDictionary Source="XamlResources/BaseRes.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 MegamanUI
{
    /// <summary>
    /// Interaction logic for App.xaml
    /// </summary>
    public partial class App : Application
    {
    }
}

MainWindow.xaml

<Window x:Class="MegamanUI.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:MegamanUI"
        mc:Ignorable="d"
        WindowStyle="None"
        ResizeMode="CanMinimize"
        WindowStartupLocation="CenterScreen"
        Height="350" Width="550">
    <Window.Background>
        <ImageBrush ImageSource="Images/bg-kteam.png"></ImageBrush>
    </Window.Background>
    <Grid>
        <DockPanel PreviewMouseLeftButtonDown="DockPanel_PreviewMouseLeftButtonDown"
                   HorizontalAlignment="Stretch" LastChildFill="False" VerticalAlignment="Top" Background="Transparent" Height="25">
            <Image DockPanel.Dock="Right" Source="Images/x.png"
                   Cursor="Hand"                  
                   PreviewMouseDown="Image_PreviewMouseDown_1"
                   Margin="0 0 15 0">
                <Image.Style>
                    <Style TargetType="Image">
                        <Setter Property="Width" Value="12"></Setter>
                        <Style.Triggers>
                            <Trigger Property="Image.IsMouseOver" Value="True">
                                <Setter Property="Width" Value="15"></Setter>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Image.Style>
            </Image>
            <Image DockPanel.Dock="Right" Source="Images/-.png" 
                   PreviewMouseDown="Image_PreviewMouseDown"
                   Margin="0 0 10 0" Cursor="Hand">
                <Image.Style>
                    <Style TargetType="Image">
                        <Setter Property="Width" Value="12"></Setter>
                        <Style.Triggers>
                            <Trigger Property="Image.IsMouseOver" Value="True">
                                <Setter Property="Width" Value="15"></Setter>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Image.Style>
            </Image>
        </DockPanel>
        
        <Image Source="Images/megaman-logo-kteam.png"
               Height="30"
               Margin="28 3 0 0"
               Cursor="Hand"
               HorizontalAlignment="Left" VerticalAlignment="Top"></Image>

        <Image Source="Images/kteam-logo.png"
               Height="30"
               Margin="0 0 40 10"
               Cursor="Hand"
               HorizontalAlignment="Right" VerticalAlignment="Bottom"></Image>

        <Image Source="Images/Megaman-Kteam.png"
               Height="220"
               Margin="0 0 40 10"
               Cursor="Hand"
               HorizontalAlignment="Center" VerticalAlignment="Center"></Image>
    </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 MegamanUI
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void DockPanel_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            base.OnMouseLeftButtonDown(e);
            this.DragMove();
        }

        private void Image_PreviewMouseDown(object sender, MouseButtonEventArgs e)
        {
            WindowState = WindowState.Minimized;
        }

        private void Image_PreviewMouseDown_1(object sender, MouseButtonEventArgs e)
        {
            this.Close();
        }
    }
}

XamlResources/BaseRes.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:MegamanUI.XamlResources">
    <FontFamily x:Key="mainFont">/Megaman UI;component/font/HP-Yard Regular.ttf#HP-Yard</FontFamily>
</ResourceDictionary>

XamlResources/TriggerRes.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:MegamanUI.XamlResources">
    
</ResourceDictionary>

Assest file

Nhằm giúp bạn có thể trải nghiệm hiệu ứng tool một cách tốt nhất, và chủ động trong việc sử dụng source. Kteam hỗ trợ full source code và các file liên quan tại phần ASSEST bên dưới nhé

Trong file này có gì???

  • Đầu tiên bạn sẽ có 1 file chứa assest gồm âm thanh, font, hình ảnh và icon. 
  • Tiếp theo là File build hoàn chỉnh để bạn dễ dàng tham khảo các hiệu ứng.
  • Project hoàn chỉnh để tham khảo
  • Một file game exe dành cho bạn nào chưa từng chơi game megaman có thể thử qua để thêm hứng thú.

Kết luận

Qua bài học này, bạn đã nắm được cách tạo controlbar và hình logo.

Trong bài sau, mình sẽ hướng dẫn các bạn ĐỔI TRẠNG THÁI INJECT.

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. Đừng quên “Luyện tập – Thử thách – Không ngại khó”.


Tải xuống

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!


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ÌNH LUẬ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ả

K9

Nhà sáng lập Howkteam.com & tác giả các khóa học C#, Auto, Unity3D, Python....

Với mong muốn mang đến kiến thức chất lượng, miễn phí cho mọi người, với tâm huyết phá bỏ rào cản kiến thức từ việc giáo dục thu phí. Tôi đã cùng đội ngũ Kteam đã lập nên trang website này để thế giới phẳng hơn.
Hãy cùng chúng tôi lan tỏa kiến thức đến cộng đồng! 

Khóa học

Lập trình giao diện Megaman tool với WPF

Megaman X4 là một tựa game rất thú vị gắn bó với mình một thời gian dài qua điện tử bấm, khi mà máy tính hay lập trình còn là gì đó vô cùng xa vời. Mình còn nhớ nguyên mấy tháng mùa hè dí đầu dí cổ vào game để luyện tay qua màn, mãi mà không phá đảo được. Giờ để thử thách bản thân, mình đã tạo ra một giải pháp giúp mình chinh phục "giấc mơ tuổi thơ này". Đó chính là TOOL CHEAT GAME MEGAMAN X4. :v :v :v

Tuy nhiên, trước khi làm tool bạn cần có một giao diện đẹp "kinh khủng khiếp" để có thể xịn xò ngang với game. Chính vì vậy, để bổ trợ cho khóa học CHEAT GAME MEGAMAN X4, đồng thời củng cố khả năng lập trình giao diện với WPF. Kteam sẽ cùng bạn bắt đầu Lập trình giao diện Megaman tool với WPF.

Nào! Cùng bắt đầu thôi.

Đánh giá

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
Không có video.