C# Căn Bản

Từ căn bản tới nâng cao

Lập trình WPF

[WPF] Hướng dẫn Bind đến một thuộc tính của một UI Element trong wpf

Byantonhyip

Th11 4, 2020 #[C#] Cách sử dụng Listview Control, #[C#] Cách xác định địa chỉ IP theo tên miền, #[C#] Cài đặt Visual Studio qua 9 bước, #[C#] DùngTreeview để hiện danh sách ổ đĩa và thư mục, #[C#] Giữ cho cửa sổ luôn ở TOP, #Bind đến một thuộc tính của một UI Element trong wpf, #binding data to datagrid in wpf, #binding data to gridview in c# wpf, #binding dataset to datagrid in wpf, #Cách Bind đến một thuộc tính của một UI Element trong wpf, #data bind progress bar in wpf, #data binding combobox c# wpf, #data binding datagrid wpf c#, #data binding radio button c# wpf, #data binding textbox c# wpf, #data binding to usercontrol wpf c#, #data binding wpf, #data binding wpf c#, #data binding wpf combobox, #data binding wpf datagrid, #data binding wpf listview, #data binding wpf mvvm, #data binding wpf tutorial, #data binding wpf vs winforms, #databind control in wpf, #databind in wpf, #databind wpf combobox, #databinding in wpf datagrid control using sql server database, #how to bind data combobox in wpf, #how to bind data from database to combobox in wpf, #how to bind data from database to combobox in wpf mvvm, #how to bind data from database to datagrid in wpf, #how to bind data in combobox in c# wpf, #how to bind data in wpf datagrid, #how to bind data to combobox from database in c# wpf, #how to bind data to combobox in wpf mvvm, #how to bind data to datagrid in wpf c#, #how to bind data to datagrid in wpf mvvm, #how to bind data to datagrid in wpf using linq, #how to bind data to listview in wpf, #how to bind data to textblock in wpf, #how to bind dataset to datagrid in wpf c#, #how to bind datasource to datagridview in wpf, #how to debug data binding issues in wpf, #how to debug data binding wpf, #itemssource combobox wpf c#, #itemssource wpf combobox, #Làm sao để Bind đến một thuộc tính của một UI Element trong wpf, #listbox data binding c# wpf, #textbox databinding wpf, #wpf combobox data binding code behind, #wpf combobox xaml data binding, #wpf data binding code behind property, #wpf data binding in code, #wpf data binding in code behind, #wpf data binding tutorial c#, #wpf data binding without mvvm, #wpf databind code behind, #wpf databinding combobox, #wpf datagrid data binding mvvm, #wpf mvvm combobox data binding, #wpf mvvm data binding, #wpf mvvm data binding example, #wpf mvvm data binding tutorial, #wpf mvvm entity-framework data binding, #wpf set data binding in code, #wpf viewmodel data binding
Chia sẻ

Nội dung

Giới thiệu

Bài viết này hướng dẫn các bạn bind thuộc tính Text của TextBlock đến thuộc tính Value của Slider control để văn bản trong TextBlock tự động thay đổi và được cập nhật tự động khi slider thay đổi.

Bạn cần bind một thuộc tính của một UI Element đến một thuộc tính của một UI Element khác. Chẳng hạn, bạn cần bind thuộc tính Text của TextBlock đến thuộc tính Value của Slider control để văn bản trong TextBlock tự động thay đổi và được cập nhật tự động khi slider thay đổi.

Giải pháp: Trong WPF đã có sẵn các phương thức Bind dữ liệu, trong trường hợp này chúng ta sử dụng System.Windows.Data.Binding, xác định 2 thuộc tính ElementName và Path.

Cơ chế hoạt động: Binding class tạo một mối quan hệ giữa 2 thuộc tính: một binding source (nguồn để binding đến) và binding target (nơi binding đến binding source). Trong trường hợp này, đích là thuộc tính của phần tử với giá trị mà bạn muốn thiết lập. Source là thuộc tính của phần tử mà bạn muốn nhận giá trị từ đó. Thuộc tính đích phải là một System.Windows.DependencyProperty – được thiết kế để hỗ trợ data binding.

Khi bạn tạo data binding trong mã XAML, khai báo cú pháp Binding bên trong dấu ngoặc nhọn { }. Sau đó thiết lập thuộc tính ElementName trỏ đến tên phần tử nguồn, thiết lập thuộc tính Path trỏ đến thuộc tính của phần tử nguồn.

Xem thêm  [WPF] Hướng dẫn Bind to Label trong wpf

Cấu trúc Bind dữ liệu trong wpf

Xây dựng ứng dụng

Ứng dụng tạo ra sẽ có giao diện như hình dưới. Bao gồm Slider, và 2 TextBox. Khi di chuyển con trượt trên Slider sẽ tự động thay đổi giá trị của Textbox.

Hướng dẫn Bind giá trị của Slider đến một thuộc tính của Textbox trong wpf

Mã XAML của ứng dụng như dưới đây.

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Bind to a property of a UI Element" Height="300" Width="300">
        <StackPanel>
            <Slider Name="slider" Margin="4" Interval="1" TickFrequency="1" IsSnapToTickEnabled="True" Minimum="10" Maximum="100"></Slider>
            <TextBlock Width="Auto" HorizontalAlignment="Left" Margin="4" Text="Giá trị của Slider là:"></TextBlock>
            <TextBlock Width="40" HorizontalAlignment="Center" Text="{Binding ElementName=slider, Path=Value}"></TextBlock>
        </StackPanel>
</Window>

Kết luận

Như vậy, trên đây csharpcanban.com đã Hướng dẫn các bạn Bind đến một thuộc tính của một UI Element trong wpf. Chúc các bạn thành công.

ĐĂNG KÝ MUA HÀNG

    Email (*)

    Điện thoại (*)

    Tên sản phẩm/Dịch vụ:

    Lượt xem: 2.246

    Chia sẻ

    Bài viết liên quan:

    By antonhyip

    Bài viết liên quan

    Lập trình CSharp Lập trình WPF

    [WPF] Validation đối với Textbox trên wpf

    Th2 19, 2023 antonhyip
    Lập trình CSharp Lập trình WPF

    [WPF] Cách sử dụng log4net trong wpf

    Th11 27, 2022 antonhyip
    Lập trình CSharp Lập trình WPF

    [WPF, C#] 2 phương pháp quét trang web bằng HtmlAgilityPack

    Th11 16, 2020 antonhyip

    Trả lời

    Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

    Bài hay

    Phần mềm doanh nghiệp Phần mềm Marketing

    Phần mềm TUK Zalo Automation

    18 Tháng Hai, 2024 antonhyip
    Lập trình CSharp

    Tương tác dữ liệu với SqlDataAdapter trong C#

    16 Tháng Ba, 2023 antonhyip
    Lập trình CSharp Lập trình WPF

    [WPF] Validation đối với Textbox trên wpf

    19 Tháng Hai, 2023 antonhyip
    Lập trình CSharp Lập trình WPF

    [WPF] Cách sử dụng log4net trong wpf

    27 Tháng Mười Một, 2022 antonhyip
    ĐƠN VỊ CHỦ QUẢN

    CÔNG TY TNHH CÔNG NGHỆ TUK-TECH

    Mã số thuế: 0109842484

    Số 4b, 342/20, Hạ Đình, Thanh Xuân, Hà Nội

    Tel./Zalo: 037.989.40.60

    Email: tuktechco@gmail.com

    Website: https://tuk-tech.com

    Liên kết: Hàng Nga xách tay – Nhà đất chính chủ – Phần mềm doanh nghiệp

     

    Xem nhiều

    ĐĂNG KÝ MUA HÀNG

      Email (*)

      Điện thoại (*)

      Tên sản phẩm/Dịch vụ:

      C# Căn Bản

      Từ căn bản tới nâng cao

      Proudly powered by WordPress | Theme: Newsup by Themeansar.