01/10/2016

[Share & Use] Windows App Studio UWP Samples


Figure 1: Main Page of App Sample

ng dụng UWP này, là ví dụ về các Custom Control, Classes dành cho mọi người tham khảo. Bạn có thể xem chi tiết mã nguồn từ Github và các Control, Classes cũng có sẵn trên Nuget Package nếu bạn cần.
(Yêu cầu: Cần  Windows 10/ Mobile để tải app)

GET: Windows 10 App Stores


GET: Github Repository


GET: Nuget Package:

Dựa vào các ví dụ trong app trên, nó sẽ mang lại nhiều kinh nghiệm và hứng thú cho bạn trong lập trình các ứng dụng UWP nếu bạn quan tâm.

Ngoài ra, tôi sẽ hướng dẫn bạn sử dụng mã nguồn trên để có được khung giao diện menu Hamburger cơ bản như hình.

Figure 2: Main Page of Sample 

Mục tiêu của ứng dụng mẫu trên là demo các custom controls, classes. Nhưng bạn có thể tự mình apply chúng vào code của mình sau. Còn mục tiêu của hướng dẫn tiếp theo dưới đây chỉ muốn sử dụng menu hamburger trong 1 rừng code của source code trên. Đó là cái khung giao diện của app sample này, từ đó bạn muốn code lại các tính năng của nó thì sẽ dễ dàng hơn. Sẽ lấy y nguyên  mã nguồn trên nhé, không thêm bớt đoạn code nào.  Okay let's go...


Bắt Đầu

(Yêu cầu: Cần Visual Studio 2015 - Include UWP, Windows 10 Pro, Download source code của app về máy )

1. Create Blank UWP Project
Tạo mới một Blank App (Universal Windows). Khá dễ phải không, qua bước tiếp theo

2. Create Control, Classes, Xaml Page, Xaml Resources, AppShell page & modify App.cs/App.xaml 
Như đã nói, ta chỉ copy/paste và remove một vài đoạn code không cần dùng đến.

a.) Create Controls folder
  • Tạo mới folder tên là Controls
  • Copy/Paste 2 control là ShellControl, CommandBarEx từ source code (../waslibs/src/AppStudio.Uwp/Controls) vào folder mới tạo.
  • Nên đổi namespace của các classes và xaml mới copy
  • Ctrl + Shift + F: để replace all file.
  • Namespace nên bỏ qua tên ShellControl, CommandBarEx cho ngắn gọn. Ví dụ: namespace Your_Project.Controls hoặc tùy bạn (Thông thường bạn tạo file mới namespace sẽ generate bắt đầu từ project đến folder chứa  file đó.)
Figure 3: Control folder in Source Code
Figure 4: Add file include in Project

b.)  Create Common folder
- Thư mục này có chút đặc biệt, tạo folder Common sau đó bạn copy/paste 2 class SamplePage.cs và  SamplePageAttribute.cs từ folder (..waslibs/samples/AppStudio.Uwp.Samples/Common)

- Đổi tên thành CommonPage.csCommonPageAttribute.cs
- Đổi namespace phù tương ứng với project của bạn

    Figure 5: Common folder
    - Các class này, base từ Windows.UI.Xaml.Controls.Page  và System.Attribute
    - Ta sẽ sử dụng để tạo các Custom Page sau nay, hãy theo dõi tiếp dưới đây
    - CommonPage chủ yếu thiết lập Commandbar và Header của CustomPage
    - Ta sẽ lược bỏ vô số đoạn code trong class CommonPage.cs không cần thiết để trông dễ hiểu hơn. (Tuy nhiên, bạn xem trực tiếp các thay đổi vào mã nguồn demo ở cuối bài viết này)

    Figure 6: Header and Command Bar

    c.) Create Navigation, Extensions, Commands & Services folder
    Tương tự, bạn tạo các thư mục Navigation, Extensions, Commands và Services, rồi copy/paste hết class từ source code vào đây:
    • (../waslibs/src/AppStudio.Uwp/Navigation) 
    • (../waslibs/src/AppStudio.Uwp/Extensions) 
    • (../waslibs/src/AppStudio.Uwp/Commands)
    • (../waslibs/src/AppStudio.Uwp/Services)
    - Riêng Extension dùng để tăng cường các method cho các class, có thể là các class của Framework không có method bạn cần. Bạn viết các method mới và sử dụng từ khóa 'this' trong tham số của method để chỉ rõ class nào dùng chúng. Bạn có thể tự tìm hiểu thêm...

    Figure 7: Extension Method

    - Có thể xóa InternetConnection.cs trong folder Services vì nó không cần thiết. Một vài class khác cũng không cần thiết, nhưng thôi cứ để nguyên.

    d.) Create Resources
    Tạo các folder và copy/paste các resources trong folder Strings, Styles, Templates:
    • (..waslibs/samples/AppStudio.Uwp.Samples/Strings)
    • (..waslibs/samples/AppStudio.Uwp.Samples/Styles)
    • (..waslibs/samples/AppStudio.Uwp.Samples/Templates)

    (Chủ yếu lưu các thông tin thuộc tính chẳng hạn như mã màu, text, icon... Bạn hoàn toàn không cần sử dụng resources, nhưng để dễ quản lý, chỉnh sửa thì đây là cách tuyệt vời)

    e.) Create CustomPage and Views Folder
    - Tạo 2 folder CustomPage và Views

    • CustomPage: chưa các Page kế thừa CommonPage.cs mà chúng ta đã nói ở trên
    • Views: chứa các page bình thường cho nó gọn gàng. Ở đây, tạm thời ta tạo AboutPage và MainPage
    Figure 8: Custom Page
    - Trong các custome page này, ta design giống y chang nhau cho nó đơn giản hóa.
    <local:CommonPage
        x:Class="WindowsAppStudioDefaultShell.CustomPage.APage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:WindowsAppStudioDefaultShell.Common"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:controls="using:WindowsAppStudioDefaultShell.Controls"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
        <controls:ShellControl.CommandBar>
            <controls:CommandBarEx x:Name="CommandBar" PrimaryCommandItems="{Binding PrimaryCommands}" />
        </controls:ShellControl.CommandBar>
        <controls:ShellControl.PaneHeader>
            <Grid Name="PaneHeader"  Background="{Binding CommandBarBackground}" />
        </controls:ShellControl.PaneHeader>
        
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <TextBlock Text="This is Page A" FontFamily="Tahoma" FontSize="24" Foreground="Red" 
                       HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>
    </local:CommonPage>
    

    using Windows.UI.Xaml.Navigation;
    using WindowsAppStudioDefaultShell.Common;
    
    namespace WindowsAppStudioDefaultShell.CustomPage
    {
        [CommonPage(Category = "CustomPage", Name = "APage", Order = 10)]
        public sealed partial class APage : CommonPage
        {
            public APage() : base(true)
            {
                InitializeComponent();
                this.DataContext = this;
                CommandBar.DataContext = this;
                PaneHeader.DataContext = this;
            }
            public override string Caption
            {
                get { return "A Page Header"; }
            }
    
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
                base.OnNavigatedTo(e);
            }
        }
    }
    

    f.) Create AppShell Page
    Đây là trang quan trọng nhất, nó chính là khung menu  hamburger. Được rồi, tiếp nhé...
    Copy/paste AppShell,xaml/AppShell.xaml.cs từ (..waslibs/samples/AppStudio.Uwp.Samples) vào project của mới của bạn.

    • Đổi tên namesapce cho phù hợp
    • Sửa lại method điều hướng tới CustomPage và AboutPage, MainPage

    Figure 9: AppShell.cs

    Okay, chú ý các điểm mũi tên màu đỏ. Ta có các method trả về các kiểu dữ liệu cần thiết dựa vào tham số là tên được định nghĩa trong Resources và Attribute của Custom Page.

    g.) Modify App.xaml/App.xaml.cs
    - Cũng copy/paste vào từ  (..waslibs/samples/AppStudio.Uwp.Samples) vào project của bạn. Tuy nhiên, cần loại bỏ một số đoạn mà ta không cần dùng đến. Nó liên quan đến chức năng khác mà ta không nói ở đây.

    Trong file App.xaml
    <Application
        x:Class="WindowsAppStudioDefaultShell.App"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:WindowsAppStudioDefaultShell"
        RequestedTheme="Light">
        <Application.Resources>
            <ResourceDictionary>
                <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="Styles/AppBarButtons.xaml"/>
                    <ResourceDictionary Source="Styles/AppColors.xaml"/>
                    <ResourceDictionary Source="Styles/AppTheme.xaml"/>
                    <ResourceDictionary Source="Templates/HeaderTemplates.xaml"/>
                    <ResourceDictionary Source="ms-appx:///Controls/ShellControl/ShellControl.xaml"/>
                </ResourceDictionary.MergedDictionaries>
            </ResourceDictionary>
        </Application.Resources>
    </Application>
    

    Trong file App.xaml.cs chỉ cần loại bỏ đoạn code sau
    //await BitmapCache.ClearCacheAsync(TimeSpan.FromHours(24));
    // await PhotosDataSource.Load();
    // await FeaturedControlsDataSource.Load();
    

    - Copy/Paste Singleton.cs vào project của bạn nữa là xong.
    Done!

    Kết Quả


    Figure 10: Main Page

    Figure 11: About Page

    Figure 12: List Custom Page

    Figure 13: A Page


    Created: 25/09/2016
    Updated: 01/10/2016
    Source Code: Tải về tại đây

    Share

    Happy Reading!

    [Share & Use] Windows App Studio UWP Samples
    4/ 5
    Oleh

    Buzz!

    Stay updated via email new newsletter

    1 nhận xét:

    Want:nhận xét

    Don't
    Use obscene or offensive language.
    Personally attack people, their edits, or their comments.
    Rant or otherwise harass, abuse, or intimidate others.
    Post anything you don't want the world to see. This is a public space.
    Infringe copyright.