WPF 数据绑定（二）

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

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查询的对象不同，绑定的属性值也就不同。