Getting Started with WPF Basics-Class4-WPF Binding

Getting Started with WPF Basics

Class4: WPF binding

1. Simple binding of data
1. Set the data to be bound in the cs file:

public partial class Class_4 : Window
    {
    
    
        public Class_4()
        {
    
    
            InitializeComponent();
            List<Color> test = new List<Color>();
            test.Add(new Color() {
    
     Code = "Yellow", Name = "Red" });
            test.Add(new Color() {
    
     Code = "#00FF00", Name = "Green" });
            test.Add(new Color() {
    
     Code = "#0000FF", Name = "Blue" });
            //数据绑定到grid
            grid.ItemsSource = test;
        }
    }
    public class Color
    {
    
    
        public string Code {
    
     get; set;}

        public string Name {
    
     get; set; }
    }

2. Write xaml binding

<Grid>
		<!--AutoGenerateColumns和CanUserAddRows去掉多余的行列-->
        <DataGrid x:Name="grid" AutoGenerateColumns="False" CanUserAddRows="False">
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding Code}" Header="Code"></DataGridTextColumn>
                <DataGridTextColumn Binding="{Binding Name}" Header="Name"></DataGridTextColumn>
                <DataGridTextColumn Header="操作"></DataGridTextColumn>
                <DataGridTemplateColumn Header="操作">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <Border Width="10" Height="10" Background="{Binding Code}"></Border>
                                <TextBlock Margin="10,0" Text="{Binding Name}"></TextBlock>
                            </StackPanel>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                
            </DataGrid.Columns>
        </DataGrid>
    </Grid>

3. Effect display:

2. Control binding
1. Binding ElementName: Binding element
2. Path=绑定的属性
3. Mode: Binding mode, default two-way list TwoWay

Mode binding mode, onetime only changes once,
default is bidirectional,
OneWay can only be affected,
OneWayToSource can only affect the source ElementName, and is not affected by the source.

<Grid>
        <StackPanel>
            <!--WPF的控件数据绑定-->
            <!--滑块-->
            <Slider x:Name="slide" Margin="5" ValueChanged="Slider_ValueChanged"></Slider>
            <TextBox 
                x:Name="txt1" Margin="5" Height="30"
                     Text="{Binding ElementName=slide, Path=Value,Mode=OneWayToSource}"></TextBox>
            <TextBox 
                x:Name="txt2" Margin="5" Height="30" 
                Text="{Binding ElementName=slide, Path=Value, Mode=OneWay}"></TextBox>
            <TextBox
                x:Name="txt3" Margin="5" Height="30"
                Text="{Binding ElementName=slide, Path=Value, Mode=TwoWay}"></TextBox>

        </StackPanel>
</Grid>