Thanh tiến trình là một điều khiển đồ họa giúp hình dung tiến trình của công việc hoặc một hoạt động. Trong các tình huống thời gian thực, điều khiển này chủ yếu được sử dụng để hiển thị tiến trình cài đặt và tải phần mềm, truyền tệp, tải xuống, tải và khôi phục dữ liệu, v.v.

Chúng tôi rất vui khi bao gồm hai mẫu điều khiển thanh tiến trình trong bản phát hành beta Khối lượng 3 năm 2019 của chúng tôi cho nền tảng WPF:

  • Thanh tiến trình tuyến tính
  • Thanh tiến trình tròn

Thanh tiến trình tuyến tính

Thanh tiến trình tuyến tính (hay còn gọi là hình chữ nhật) là một loại điều khiển đồ họa giúp hình dung tiến trình của bất kỳ công việc hoặc hoạt động nào trong một phân đoạn hình chữ nhật. Sau đây là một số tính năng tiêu chuẩn hiện được hỗ trợ trong thanh tiến trình tuyến tính.

Tính năng Sự mô tả
Chế độ xác định Một thanh tiến trình xác định sẽ hiển thị số lượng tiến độ đã hoàn thành cũng như thời gian của tiến trình còn lại.
Ví dụ: chúng tôi có thể sử dụng chỉ báo xác định để hiển thị tiến trình tải xuống của tệp. Màu và phần trăm tiến trình được sử dụng để cho biết phần trăm tải xuống đã hoàn tất và phần trăm còn lại.
Chế độ không xác định Thanh tiến trình không xác định sẽ hiển thị tiến trình hoạt ảnh liên tục, cho phép người dùng cuối thấy rằng không thể xác định được phần cuối của nhiệm vụ đang thực hiện.
Ví dụ: chúng tôi có thể sử dụng loại tiến trình này cho một cái gì đó đang chờ phản hồi, như trong trường hợp truy xuất dữ liệu trực tuyến khi kích thước của dữ liệu và băng thông internet khác nhau trong các môi trường máy khác nhau.
Chế độ đệm Thanh tiến trình kiểu bộ đệm đóng vai trò kép trong đó tiến trình nền biểu thị một hoạt động hoặc tải trong khi tiến trình nền trước cho biết vị trí tiến trình hiện tại.
Ví dụ: trong khi phát trực tuyến video, chúng tôi có thể sử dụng loại thanh tiến trình này để hiển thị cả tiến trình phát trực tuyến (trong nền) và vị trí phát video hiện tại.
Chế độ phân đoạn Thanh tiến trình phân đoạn có thể được sử dụng ở những nơi mà số lượng tiến trình lớn hơn có thể được chia thành các phân vùng khác nhau. Cả màu sắc và số lượng của phân khúc đều có thể tùy chỉnh.
Ví dụ, trong quá trình giao đồ ăn trực tuyến, việc đặt hàng có thể bắt đầu thanh có màu đỏ; và khi đơn hàng tiến triển, nó chuyển sang màu cam; sau khi hoàn thành, nó chuyển sang màu vàng; và cuối cùng nó chuyển sang màu xanh lá cây với trạng thái đã giao.
Phạm vi màu Phạm vi màu bên trong thanh tiến trình cho phép người dùng phân biệt và ứng biến giao diện để giao tiếp tốt hơn.
Một lần nữa, giao đồ ăn trực tuyến là ví dụ điển hình nhất, hiển thị các giai đoạn khác nhau một cách có ý nghĩa với màu sắc tùy chỉnh.
Màu theo dõi Màu đường đua (màu nền) được sử dụng để phân biệt chỉ báo tiến trình với đường đi, giúp giao diện người dùng dễ tiếp cận hơn.
Đệm Người dùng cuối có thể phân biệt các chỉ số theo dõi và tiến trình bằng cách tùy chỉnh phần đệm giữa chúng.
Bán kính góc Bán kính góc của thanh tiến trình có thể được thay đổi để xem điều khiển với góc tròn hoặc có cạnh sắc.

Bắt đầu với thanh tiến trình tuyến tính

Bước 1: Tạo ứng dụng WPF và cài đặt Gói Syncfusion.SfProgressBar.WPF NuGet.

Bước 2: Thêm không gian tên XML cần thiết và SfLinearProgressBar kiểm soát trong MainWindow.xaml. Ví dụ mã sau đây minh họa điều này.

<Window x:
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Syncfusion="http://schemas.syncfusion.com/wpf" >
    <Grid x:Name="Grid">
        <Syncfusion:SfLinearProgressBar x:Name="sfLinearProgressBar" IsIndeterminate="False" Progress="75" ProgressColor="Aquamarine" SecondaryProgress="85" SecondaryProgressColor="AntiqueWhite" SegmentCount="4" TrackColor="Beige" IndicatorCornerRadius="10" Height="20">
            <Syncfusion:SfLinearProgressBar.RangeColors>
                <Syncfusion:RangeColorCollection>
                    <Syncfusion:RangeColor Color="Red" Start="0" End="25" />
                    <Syncfusion:RangeColor Color="Orange" Start="25" End="50" />
                    <Syncfusion:RangeColor Color="Yellow" Start="50" End="75" />
                    <Syncfusion:RangeColor Color="Green" Start="75" End="100" />
                </Syncfusion:RangeColorCollection>
            </Syncfusion:SfLinearProgressBar.RangeColors>
        </Syncfusion:SfLinearProgressBar>
    </Grid>
</Window>

Bước 3: Trong tệp CS dựa trên mã của MainWindow, thêm ví dụ mã sau và chạy dự án để xem thanh tiến trình tuyến tính đang hoạt động.

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        SfLinearProgressBar sfLinearProgressBar = new SfLinearProgressBar();
        sfLinearProgressBar.IsIndeterminate = false;
        sfLinearProgressBar.Progress = 75;
        sfLinearProgressBar.ProgressColor = new SolidColorBrush(Color.FromRgb(138, 43, 226));
        sfLinearProgressBar.SecondaryProgress = 85;
        sfLinearProgressBar.SecondaryProgressColor = new SolidColorBrush(Color.FromRgb(250, 235, 215));
        sfLinearProgressBar.TrackColor = new SolidColorBrush(Color.FromRgb(245, 245, 220));
        sfLinearProgressBar.SegmentCount = 4;
        sfLinearProgressBar.IndicatorCornerRadius = 10;
        sfLinearProgressBar.Height = 20;
        sfLinearProgressBar.RangeColors = new RangeColorCollection()
        {
            new RangeColor() { Color = Color.FromRgb(255, 0, 0), Start = 0, End = 25 }, 
            new RangeColor() { Color = Color.FromRgb(255, 165, 0), Start = 25, End = 50 }, 
            new RangeColor() { Color = Color.FromRgb(255, 255, 0), Start = 50, End = 75}, 
            new RangeColor() { Color = Color.FromRgb(0, 128, 0), Start = 75, End = 100}
        };
        Grid.Children.Add(sfLinearProgressBar);
    }
}

Liên kết mẫu: Bạn có thể xem dự án mẫu từ vị trí GitHub này.

Bạn có thể tìm thêm thông tin chi tiết về các điều khiển này trong Tài liệu UG. Sau đây là ảnh chụp màn hình của các chế độ khác nhau trong thanh tiến trình tuyến tính, cùng với tùy chỉnh.

Thanh tiến trình hình tròn

Thanh tiến trình hình tròn là một điều khiển đồ họa hình tròn hoặc hình bán nguyệt giúp hình dung tiến độ công việc.

Các tính năng sau của thanh tiến trình tròn tương tự như thanh tiến trình tuyến tính:

  • Chế độ xác định
  • Chế độ không xác định
  • Phạm vi màu
  • Chế độ phân đoạn

Các tính năng độc đáo khác như sau.

Tính năng Sự mô tả
Giá trị tiến độ và nội dung tùy chỉnh Giá trị tiến độ giúp hiển thị số lượng tiến độ đã thực hiện. Nó cung cấp sự rõ ràng hơn cho người dùng cuối trong việc hiển thị cả số lượng đã hoàn thành và số lượng còn lại của một nhiệm vụ. Người dùng có thể thêm nội dung của riêng họ vào bên trong thanh tiến trình và nhúng nội dung đó vào nhãn, khối văn bản, nút, v.v.
Bán kính và Góc tùy chỉnh Bán kính của các chỉ báo bên trong và bên ngoài và đường đua có thể được tùy chỉnh. Góc bắt đầu và góc kết thúc của thanh tiến trình hình tròn có thể được điều chỉnh cho phù hợp với ứng dụng.

Bắt đầu với thanh tiến trình vòng tròn

Để khởi tạo và sử dụng thanh tiến trình hình tròn, vui lòng làm theo mẫu mã này.

Bước 1: Tạo ứng dụng WPF và cài đặt Gói Syncfusion.SfProgressBar.WPF NuGet.

Bước 2: Thêm không gian tên XML cần thiết và SfCircularProgressBar kiểm soát trong MainWindow.xaml. Ví dụ mã sau đây minh họa điều này.

<Window x:
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Syncfusion="http://schemas.syncfusion.com/wpf" >
    <Grid x:Name="Grid">
        <Syncfusion:SfCircularProgressBar x:Name="sfCircularProgressBar" IsIndeterminate="False" ShowProgressValue="True" Progress="75" ProgressColor="BlueViolet" SegmentCount="4" IndicatorOuterRadius="0.75" IndicatorInnerRadius="0.6" TrackOuterRadius="0.6" TrackInnerRadius="0.75">
            <Syncfusion:SfCircularProgressBar.RangeColors>
                <Syncfusion:RangeColorCollection>
                    <Syncfusion:RangeColor Color="Red" Start="0" End="25" />
                    <Syncfusion:RangeColor Color="Orange" Start="25" End="50" />
                    <Syncfusion:RangeColor Color="Yellow" Start="50" End="75" />
                    <Syncfusion:RangeColor Color="Green" Start="75" End="100" />
                </Syncfusion:RangeColorCollection>
            </Syncfusion:SfCircularProgressBar.RangeColors>
        </Syncfusion:SfCircularProgressBar>
    </Grid>
</Window>

Bước 3: Trong tệp CS dựa trên mã của MainWindow, thêm ví dụ mã sau và chạy dự án để xem thanh tiến trình tuyến tính đang hoạt động.

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        SfCircularProgressBar sfCircularProgressBar = new SfCircularProgressBar();
        sfCircularProgressBar.IsIndeterminate = false;
        sfCircularProgressBar.ShowProgressValue = true;
        sfCircularProgressBar.Progress = 75;
        sfCircularProgressBar.ProgressColor = new SolidColorBrush(Color.FromRgb(138, 43, 226));
        sfCircularProgressBar.SegmentCount = 4;
        sfCircularProgressBar.IndicatorOuterRadius = 0.75;
        sfCircularProgressBar.IndicatorInnerRadius = 0.6;
        sfCircularProgressBar.TrackOuterRadius = 0.6;
        sfCircularProgressBar.TrackInnerRadius = 0.75;
        sfCircularProgressBar.RangeColors = new RangeColorCollection()
        {
            new RangeColor() { Color = Color.FromRgb(255, 0, 0), Start = 0, End = 25 }, 
            new RangeColor() { Color = Color.FromRgb(255, 165, 0), Start = 25, End = 50 }, 
            new RangeColor() { Color = Color.FromRgb(255, 255, 0), Start = 50, End = 75}, 
            new RangeColor() { Color = Color.FromRgb(0, 128, 0), Start = 75, End = 100}
        };
        Grid.Children.Add(sfCircularProgressBar);
    }
}

Liên kết mẫu: Bạn có thể xem dự án mẫu từ vị trí GitHub này.

Bạn có thể tìm thêm thông tin chi tiết về các điều khiển này trong Tài liệu UG. Sau đây là ảnh chụp màn hình của các chế độ khác nhau trong thanh tiến trình hình tròn, cùng với các tùy chọn tùy chỉnh.

Các chế độ khác nhau của thanh tiến trình hình tròn với tùy chỉnh
Các chế độ khác nhau của thanh tiến trình hình tròn với tùy chỉnh

Sự kết luận

Chúng tôi hy vọng bây giờ bạn đã có ý tưởng rõ ràng về các tính năng này và cách bắt đầu với các điều khiển thanh tiến trình tuyến tính và hình tròn cho WPF. Bạn có thể tải xuống thiết lập bản phát hành beta Tập 3 năm 2019 của chúng tôi để kiểm tra các điều khiển này.

Nếu bạn có bất kỳ câu hỏi nào hoặc yêu cầu làm rõ các điều khiển này, vui lòng cho chúng tôi biết trong phần bình luận bên dưới. Bạn cũng có thể liên hệ với chúng tôi thông qua diễn đàn hỗ trợ của chúng tôi, Direct-Trac hoặc Cổng thông tin phản hồi. Chúng tôi rất vui khi hỗ trợ bạn!

Previous articleGiới thiệu Thanh trượt dọc và Thanh trượt dải dọc trong Flutter
Next articleCách xóa dấu hiệu chỉnh sửa trong Word
Natalia Quinn là một nàng thơ của How2Geeks, hiện đang là Copywriting và là nhà biên tập nội dung có tiếng chuyên về lĩnh vực công nghệ và kỹ thuật số. Các bài viết của Natalia đều có những nét riêng và chuyên cung cấp những thông tin về công nghệ, những mẹo công nghệ hay những bản tin công nghệ hay nhất và mới nhất hiện nay.