美文网首页
WPF 数据绑定(二)

WPF 数据绑定(二)

作者: Ritchie_Li | 来源:发表于2022-06-08 21:56 被阅读0次

本例演示如何将数据模型的实例绑定到界面控件。

XAML代码如下:

<Page x:Class="WpfApp.Page1"

      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

      xmlns:local="clr-namespace:WpfApp"

      mc:Ignorable="d"

      d:DesignHeight="450" d:DesignWidth="800"

      Title="Page1-Binding to Product Object">

    <Grid Background="LightGreen">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"></RowDefinition>

            <RowDefinition Height="*"></RowDefinition>

        </Grid.RowDefinitions>

        <!-- Row 1-->

        <Grid>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="Auto"></ColumnDefinition>

                <ColumnDefinition></ColumnDefinition>

                <ColumnDefinition Width="Auto"></ColumnDefinition>

            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>

                <RowDefinition Height="Auto"></RowDefinition>

            </Grid.RowDefinitions>

            <TextBlock Margin="7">Product ID:</TextBlock>

            <TextBox Name="txtID" Margin="5" Grid.Column="1">356</TextBox>

            <Button x:Name="cmdGetProduct" Click="cmdGetProduct_Click" Margin="5" Padding="2" Grid.Column="2">Get Product</Button>

        </Grid>

        <!-- Row 2-->

        <Border Grid.Row="1" Padding="7" Margin="7" Background="LightSteelBlue">

            <Grid  Name="gridProductDetails">

                <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="Auto"></ColumnDefinition>

                    <ColumnDefinition></ColumnDefinition>

                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>

                    <RowDefinition Height="Auto"></RowDefinition>

                    <RowDefinition Height="Auto"></RowDefinition>

                    <RowDefinition Height="Auto"></RowDefinition>

                    <RowDefinition Height="Auto"></RowDefinition>

                    <RowDefinition Height="*"></RowDefinition>

                </Grid.RowDefinitions>

                <TextBlock Margin="7">Model Number:</TextBlock>

                <TextBox Margin="5" Grid.Column="1" Text="{Binding Path=ModelNumber}"></TextBox>

                <TextBlock Margin="7" Grid.Row="1">Model Name:</TextBlock>

                <TextBox Margin="5" Grid.Row="1" Grid.Column="1" Text="{Binding Path=ModelName}"></TextBox>

                <TextBlock Margin="7" Grid.Row="2">Unit Cost:</TextBlock>

                <TextBox Margin="5" Grid.Row="2" Grid.Column="1" Text="{Binding Path=UnitCost}"></TextBox>

                <TextBlock Margin="7,7,7,0" Grid.Row="3">Description:</TextBlock>

                <TextBox Margin="7" Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2"

                VerticalScrollBarVisibility="Visible" TextWrapping="Wrap" Text="{Binding Path=Description}"></TextBox>

            </Grid>

        </Border>

    </Grid>

</Page>

后台代码:

/// <summary>

    /// Page1.xaml 的交互逻辑

    /// </summary>

    public partial class Page1 : Page

    {

        public Page1()

        {

            InitializeComponent();

        }

        private void cmdGetProduct_Click(object sender, RoutedEventArgs e)

        {

            int ID;

            if (Int32.TryParse(txtID.Text, out ID))

            {

                try

                {

                    //绑定到数据源

                    gridProductDetails.DataContext = App.StoreDb.GetProduct(ID);

                }

                catch (Exception)

                {

                    MessageBox.Show("Error contacting database.");

                }

            }

            else

            {

                MessageBox.Show("Invalid ID.");

            }

        }

    }

分析:

实现主要方式是从数据查询数据,返回一个数据模型对象,将对象绑定到Grid,也即使代码:

gridProductDetails.DataContext = App.StoreDb.GetProduct(ID);

Grid内的文本控件都可以绑定到模型对象的属性字段,如:

<TextBox Margin="5" Grid.Column="1" Text="{Binding Path=ModelNumber}"></TextBox>

将文本绑定到模型的ModelNumber属性字段,当输入不同ID,获取的不同的对象时,这些绑定文本跟随动态变化。

效果如下:

不同ID查询的对象不同,绑定的属性值也就不同。

相关文章

  • WPF 数据绑定(二)

    本例演示如何将数据模型的实例绑定到界面控件。 XAML代码如下:

    WPF数据绑定

    元素绑定 数据绑定最简单的形式是,源对象是WPF元素而且源属性是依赖属性。依赖项属性具有内置的更改通知支持,当在源...

  • WPF 数据绑定Binding

    自定义Binding 当为Binding设置了继承System.ComponentModel.INotifyPro...

  • WPF 数据绑定(一)

    最基本的绑定 将Text 的文本绑定到Window的Background属性,设置双向绑定,修改文本的值,改变Gr...

  • WPF 数据绑定(三)

    实现绑定一个对象的集合。在界面添加ListBox控件,指定显示对象的属性值。 在后台代码,获取数据集合源,绑定到L...

  • WPF 数据绑定(四)

    实现绑定到DataSet对象。 界面设计: 同样创建Grid的绑定,指定到列表元素,选择的Item

  • WPF 数据绑定(四)

    筛选的数据源的绑定,使用Linq Filter Data Collection。从数据集合中筛选符合设定条件的数据...

  • wpf 中的无效绑定

    设置wpf绑定的跟踪级别为high,output中观察wpf的处理流程: 对于一个无效的绑定,wpf尝试了5次,最...

  • WPF 数据绑定-绑定数据组集合

    UI设计: 列表绑定数据集合 后台代码: private ICollection products; produ...

  • WPF绑定数据验证

    1、修改ViewModel类继承IDataErrorInfo接口 IDataErrorInfo接口程序集为...

网友评论

      本文标题:WPF 数据绑定(二)

      本文链接:https://www.haomeiwen.com/subject/amhpmrtx.html