• DevExpress,
  • Lập trình - Cơ sở dữ liệu (DB),
  • Sản phẩm phần mềm,
  • Tin tức

    • Tạo máy (đồng hồ) đo dạng tròn cho ứng dụng web sử dụng công cụ điều khiển Gauges trong ASP.NET Web Forms Controls

    By on 10/08/2021

    iworld.com.vn – Hướng dẫn tạo máy (đồng hồ) đo dạng tròn cho ứng dụng web sử dụng công cụ điều khiển Gauges trong ASP.NET Web Forms Controls.

    Bài hướng dẫn này giúp cho bạn biết cách tạo một máy đo dạng tròn và tùy chỉnh cài đặt thước đo của nó tại thời điểm thiết kế.

    Hướng dẫn này bao gồm các bước sau.

    1. Tạo một dự án mới và thêm công cụ điều khiển máy đo (Create a New Project and Add a Gauge Control)
    2. Chạy trình quản lý thiết lập(Run the Preset Manager)
    3. Thiết lập đồng hồ đo (Load the Required Gauge Preset)
    4. Tùy chỉnh thang đo (Customize Gauge Scales)
    5. Kết quả (Result)

    Bước 1. Tạo một dự án mới và thêm công cụ điều khiển máy đo (Create a New Project and Add a Gauge Control).

    Trong bước này, chúng tôi sẽ thực hiện yêu cầu các hành động phổ biến khi bạn thêm điều khiển Gauge vào ứng dụng của mình.

    • Tạo một dự án ASP.NET Web Application mới (Visual Studio 2012, 2013, 2015, 2017 hoặc 2019) hoặc mở một dự án hiện có.
    • Thêm thành phần ASPxGaugeControl vào dự án của bạn. Để thực hiện việc này, hãy tìm mục ASPxGaugeControl trong hộp công cụ Visual Studio trên tab DX.21.1: Data & Analytics và thả nó vào biểu mẫu.

    Lesson_Add a Gauge

    Hành động này tạo ra một ASPxGaugeControl mới.

    <body>
    <form id="form1" runat="server">
    <div>

        <dx:ASPxGaugeControl ID="ASPxGaugeControl1" runat="server" Height="250px" 
            Width="250px">
        </dx:ASPxGaugeControl>
    </div>
    </form>
</body>

    Bước 2. Chạy trình quản lý thiết lập (Run the Preset Manager).

    • Xác định vị trí của thẻ thông minh gauge và nhấp vào Run Preset Manager (chạy trình thiết lập).

    Lesson- Run Preset Manager

    Sau đó, bạn sẽ thấy một trình giao diện sau.

    Lesson-Preset Manager

    Lưu ý rằng sau khi bạn thả Gauge ở bước trước, Trình quản lý thiết lập của Gauge có thể được mở ra tự động (nếu tùy chọn “Hiển thị trình quản lý thiết lập mỗi khi điều khiển Gauge mới được thả vào biểu mẫu” được kích hoạt).

    Bước 3.Thiết lập đồng hồ đo (Load the Required Gauge Preset).

    • Trong Trình quản lý thiết lập (Preset Manager), nhấp vào CircularFull để hiển thị các cài đặt sẵn với các đồng hồ đo hình tròn.

    Bạn có thể sử dụng một trong hai cách để tải các thiết lập sẵn của máy đo:

    • Click đúp vào biểu tượng đồng hồ đo bạn muốn trên Trình quản lý thiết lập;
    • Lựa chọn biểu tượng đồng hồ đo và nhấp vào nút Tải (Load) ở cuối Trình quản lý thiết lập.

    Hình ảnh sau đây cho thấy cách thiết lập đồng hồ đo kiểu Ice-Cold Zone bằng cách thứ hai.

    Lesson - Ice-Cold Zone preset

    Sau đó, bạn thấy đồng hồ đo sau trên biểu mẫu.

    Lesson - Ice-Cold Gauge

    Bước 4.Tùy chỉnh thang đo (Customize Gauge Scales)

    • Để truy cập các phần tử của máy đo và tùy chỉnh cài đặt của chúng, hãy chạy Trình thiết kế kiểm soát máy đo trực quan (Visual Gauge Control Designer).

    Đối với thao tác này, hãy tìm thẻ thông minh của Gauge và trong menu được mở ra, nhấp vào Customize Gauge Control, như hình được hiển thị bên dưới.

    Lesson - Invoke Customize Gauge

    • Trong Gauge Designer, chọn scale thứ hai bằng cách nhấp vào nút scale2 và xóa nó bằng cách sử dụng nút Remove.

    Lesson - Remove a Second Scale

    • Click đúp vào yêu cầu phần tử đo (gauge element) để tùy chỉnh cài đặt của nó trong danh sách bên phải của Visual Gauge Control Designer hoặc nhấp vào thẻ thông minh của phần tử và chọn Run Designer như được hiển thị bên dưới cho thang đo của Gauge.

    Lesson - Run Element Designer

    • Tùy chỉnh các thuộc tính của thang đo trong trình thiết kế thang đo (Scale Designer) như được hiển thị bên dưới và nhấp vào nút Ok.

    Lesson - Customize Scale

    • Nhấp vào Ok để đóng trình thiết kế thang đo.
    • Bấm Ok để đóng trình Visual Gauge Control Designer.

    Bước 5.Kết quả

    • Chạy trang web để xem kết quả.

    Lesson - Result

     

    Biên dịch bởi Anh Đức – iworld.com.vn

    Post Views: 2,554

    more recommended stories