1. What is Data binding
Data binding is a relationship in which a WPF program extracts some information from a source object and sets the properties of the target object, based on that information, as a dependency property of the target property. The source object can be anything, another WPF content, or even a purely data object that you create yourself.
2. Simple single-binding
Binding an element to another element, the first example is to bind a slider control and a TextBlock control. ElementName represents the name of the source object, and path represents the property of the source element. It needs to be enclosed in curly braces.
<Grid> <SliderName= "Sliderfontsize"Margin= "3"Minimum= "1"Maximum= "Max"Value= "Ten"tickfrequency= "1"tickplacement= "TopLeft"> </Slider> <TextBlockMargin= "10,39,10,62"Text= "Simple Text"Name= "Lblsampletext"FontSize="{Binding Elementname=sliderfontsize,path=value}the <!--binding keyword binds the slider and TextBlock - </TextBlock> </Grid>
3. Binding mode
On the basis of a single binding, add 3 buttons, corresponding to a specific preset value, click the button, the font becomes the preset size of the set.
<Grid> <SliderName= "Sliderfontsize"Margin= "3"Minimum= "1"Maximum= "Max"Value= "Ten"tickfrequency= "1"tickplacement= "TopLeft"> </Slider> <TextBlockMargin= "10,39,10,177"Text= "Simple Text"Name= "Lblsampletext"FontSize="{Binding Elementname=sliderfontsize,path=value}"> </TextBlock> <Buttonx:name= "small"Content= "Set to Small"HorizontalAlignment= "Left"Margin= "93,182,0,0"VerticalAlignment= "Top"Width= " the"Click= "Small_click"/> <Buttonx:name= "normal"Content= "Set to Normal"HorizontalAlignment= "Left"Margin= "203,182,0,0"VerticalAlignment= "Top"Width= "The "Click= "Normal_click"/> <Buttonx:name= "Large"Content= "Set to Large"HorizontalAlignment= "Left"Margin= "321,182,0,0"VerticalAlignment= "Top"Width= "$"Click= "Large_click"/> </Grid>
The point set to small triggers the Click event and executes the following code. Set the value of Sliderfontsize to 10, and the corresponding TextBlock will have the corresponding text size.
Private void Small_click (object sender, RoutedEventArgs e) { ten; ten; // error }
Note : You cannot set the value of Lblsampletext in TextBlock, which only changes the size of the text box and does not affect the value of the bound slider.
Bidirectional binding (TwoWay): In this example, there is also a way to force a value to be passed in 2 directions, from the target to the source, from the source to the target. method is to set the Mode property of the binding
Fontsize= "{Binding Elementname=sliderfontsize,path=value,mode=twoway}"
There are 5 binding modes, see the following table:
Name |
Description |
OneWay |
Source change, Target change |
TwoWay |
Source and target influence each other |
OneTime |
Initially sets the target based on the Source property value, after which all operations do not change the target property |
OneWayToSource |
In contrast to OneWay, target changes update the source |
Default |
Can be bidirectional (user settable as TextBox.Text property) and one-way |
You can also create bindings using code:
New Binding (); = sliderfontsize; New PropertyPath ("value"); = Bindingmode.twoway;
Lbsampletextb.setbinding (textblock.fontsize,binding);
4. Multi-binding
It can be a combination of multiple sources on a target object or a source that affects multiple target objects. The example here is that multiple sources act on a TextBlock object, affecting the display of TextBlock text, size
Color 3 properties.
<GridMargin= "5"> <grid.rowdefinitions> <RowDefinitionHeight= "Auto"></RowDefinition> <RowDefinitionHeight= "Auto"></RowDefinition> <RowDefinitionHeight= "Auto"></RowDefinition> <RowDefinitionHeight= "Auto"></RowDefinition> <RowDefinition></RowDefinition> </grid.rowdefinitions> <SliderName= "Sliderfontsize"Margin= "3"Minimum= "1"Maximum= "Max"Value= "Ten"></Slider> <TextBoxName= "Txtcontent"Margin= "3"Grid.Row= "2">Sample Content</TextBox> <ListBoxMargin= "3"Grid.Row= "3"Name= "Lstcolors"> <ListBoxItemTag= "Blue">Blue</ListBoxItem> <ListBoxItemTag= "Darkblue">Dark Blue</ListBoxItem> <ListBoxItemTag= "LightBlue">Light Blue</ListBoxItem> </ListBox> <TextBlockMargin= "3"Name= "Lblsampletext"FontSize="{Binding Elementname=sliderfontsize,path=value}"Grid.Row= "4" <!--D Size property and slider binding --Text="{Binding Elementname=txtcontent,path=text}"<!--content and TextBox bindings --Foreground="{Binding Elementname=lstcolors,path=selecteditem.tag}<!--color and listbox bindings, select a color in the listbox > ></TextBlock> </Grid>
You can also change the binding mode to Binding.mode to TwoWay, and two-way binding has great flexibility so that the target object in turn affects the properties of the source object.
WPF Element Binding