Thiết kế giao diện

Dẫn nhập

Với những ứng dụng mạnh mẽ của REGEX  và WPF. Cộng với khả năng lấy dữ liệu từ website bất kì với Http Client. Thì chuyện làm ra một ứng dụng CRAWL DATA từ một website như Howkteam.com là quá đơn giản.

Serial này sẽ là bài tập đầu tiên về Regular expression cho các bạn luyện tập!

---

Nội dung

Nội dung hiện tại mang tính tạm thời đáp ứng nhu cầu xem & cập nhập kiến thức cơ bản thông qua Video hướng dẫn.

Nội dung chi tiết của khóa học CRAWL DATA TỪ HOWKTEAM.COM đang trong quá trình xây dựng một cách kỹ lưỡng nhằm đảm bảo chất lượng và sẽ được cập nhập liên tục trong thời gian tới.

Các bạn nhớ theo dõi và luôn ủng hộ Kteam nhé!

Để 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ề

• Lập trình WPF
• Regular Expression

---

Project tham khảo

• Project tham khảo
• Regex test

Code MainWindow.xaml

<Window x:Class="CrawlDataFromHowKteam.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:CrawlDataFromHowKteam"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="250"></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="0" Grid.Row="0">
            <Button>Load data</Button>
        </Grid>
        <Grid Grid.Column="1" Grid.Row="0">
            <Button Click="Button_Click">Add item into tree view</Button>
        </Grid>
        
        <TreeView x:Name="treeMain" Grid.Column="0" Grid.Row="1">
            <TreeView.ItemTemplate>
                <HierarchicalDataTemplate ItemsSource="{Binding Items}">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Name}"></TextBlock>
                        <Button Content="{Binding URL}"></Button>
                    </StackPanel>
                </HierarchicalDataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>
        <WebBrowser x:Name="wbMain" Grid.Column="1" Grid.Row="1"></WebBrowser>
    </Grid>
</Window>

Code MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
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 CrawlDataFromHowKteam
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        ObservableCollection<MenuTreeItem> TreeItems;
        public MainWindow()
        {
            InitializeComponent();

             TreeItems = new ObservableCollection<MenuTreeItem>();
            MenuTreeItem item1 = new MenuTreeItem() { Name = "Item1", URL = "https://www.howkteam.com/Course/Lap-trinh-WPF-co-ban/TreeView-Binding-trong-Lap-trinh-WPF-1354",
                Items = new ObservableCollection<MenuTreeItem>()
                {
                    new MenuTreeItem() { Name = "sub item1", URL="sadsda"},
                    new MenuTreeItem() { Name = "sub item1", URL="sadsda"},
                    new MenuTreeItem() { Name = "sub item1", URL="sadsda"},
                    new MenuTreeItem() { Name = "sub item1", URL="sadsda"}
                }
            };
            MenuTreeItem item2 = new MenuTreeItem()
            {
                Name = "Item2",
                URL = "https://www.howkteam.com/Course/Lap-trinh-WPF-co-ban/TreeView-Binding-trong-Lap-trinh-WPF-1354",
                Items = new ObservableCollection<MenuTreeItem>()
                {
                    new MenuTreeItem() { Name = "sub item1", URL="sadsda"},
                    new MenuTreeItem() { Name = "sub item1", URL="sadsda"},
                    new MenuTreeItem() { Name = "sub item1", URL="sadsda"},
                    new MenuTreeItem() { Name = "sub item1", URL="sadsda"}
                }
            };

            AddItemIntoTreeViewItem(TreeItems, item1);
            AddItemIntoTreeViewItem(TreeItems, item2);

            treeMain.ItemsSource = TreeItems;
        }

        #region methods

        void AddItemIntoTreeViewItem(ObservableCollection<MenuTreeItem> root, MenuTreeItem node)
        {
            root.Add(node);
        }

        #endregion

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            MenuTreeItem item3 = new MenuTreeItem()
            {
                Name = "Item3",
                URL = "https://www.howkteam.com/Course/Lap-trinh-WPF-co-ban/TreeView-Binding-trong-Lap-trinh-WPF-1354",
                Items = new ObservableCollection<MenuTreeItem>()
                {
                    new MenuTreeItem() { Name = "sub item1", URL="sadsda"},
                    new MenuTreeItem() { Name = "sub item1", URL="sadsda"},
                    new MenuTreeItem() { Name = "sub item1", URL="sadsda"},
                    new MenuTreeItem() { Name = "sub item1", URL="sadsda"}
                }
            };

            AddItemIntoTreeViewItem(TreeItems[0].Items, item3);
        }
    }
}

Code MenuTreeItem.cs

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace CrawlDataFromHowKteam
{
    public class MenuTreeItem
    {
        public string Name { get; set; }
        public string URL { get; set; }
        public ObservableCollection<MenuTreeItem> Items { get; set; }
        public MenuTreeItem()
        {
            this.Items = new ObservableCollection<MenuTreeItem>();
        }
    }
}

---

Kết luận

Bài sau chúng ta sẽ cùng tìm hiểu về HƯỚNG DẪN DÙNG HTTP CLIENT.

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ó”

---

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.