In the current article I will show how to bind elements in a small application. Two types of binding are presented – the so called (by me) runtime binding and command binding. The difference is that the runtime binding is carried out automatically, without a specific command and the command binding is initiated by an event (in our case of a selection of a checkbox). So, we have the following:
- One Text Box
- Two Labels
- Two Check Buttons
What do we do with these? 🙂
We make sure, that the first label writes automatically the strings, entered in the text box. It is not that difficult and this is achieved with programming from the XAML code:
1 2 3 4 |
<WrapPanel> <Label x:Name="lb2" Margin="3" Width="60" >Target 1:</Label> <Label x:Name ="lb3" Margin="3" Width="200" Background="LightGray" Content="{Binding ElementName=tb, Path=Text}"/> </WrapPanel> |
With these lines, we inform the Label, which I have named “lb3”, that it should display the Text from the element “tb”. This is done through the Content property of the label. This is what I understand under “Runtime Binding”, because this binding works after the start of the application automatically as follows:
The more interesting part is the so-called “Command Binding” (the term is coind by me 🙂 ). It binds only if you select the checkbox “Binding”. In this case the method “cb_Checked” is initiated. In order to make the example a little more interesting, I have added colors at random (absolutely), which are run once you decide to “Bind” the application. The colors can be disabled (or simply changed to black and white) once you click on “Disable Colors” checkbox. As in the previous example, the colors are defined as styles in the XAML code and are accessed from C#.
OK, here is the the XAML code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<Window x:Class="Daten.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="VitoshAcademy" Height="350" Width="525"> <Window.Resources> <SolidColorBrush x:Key="winbrush">Pink</SolidColorBrush> <SolidColorBrush x:Key="bgbrush">Green</SolidColorBrush> <SolidColorBrush x:Key="fgbrush">Red</SolidColorBrush> <SolidColorBrush x:Key="whiteBrush">White</SolidColorBrush> <SolidColorBrush x:Key="blackBrush">Black</SolidColorBrush> </Window.Resources> <Grid> <StackPanel> <WrapPanel> <Label Margin="3" Width="60">Source:</Label> <TextBox x:Name="tb" Margin="3" Width="200">Vitosh Academy</TextBox> </WrapPanel> <WrapPanel> <Label x:Name="lb2" Margin="3" Width="60" >Target 1:</Label> <Label x:Name ="lb3" Margin="3" Width="200" Background="LightGray" Content="{Binding ElementName=tb, Path=Text}"/> </WrapPanel> <WrapPanel> <Label Margin="3" Width="60">Target 2:</Label> <Label x:Name="lb" Margin="3" Width="120" Background="LightGray" Height="25"/> <CheckBox x:Name="cb" Margin="3" VerticalAlignment="Center" Checked="cb_Checked" Unchecked="cb_Unchecked"> Binding</CheckBox> <CheckBox x:Name="cb_Copy" Margin="3" VerticalAlignment="Center" Checked="cb_DisableColors" Unchecked="cb_EnableColors" Content="Disable Colors"/> </WrapPanel> </StackPanel> </Grid> </Window> |
Here comes the C# code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace Daten { /// <summary> /// The logic of MainWindow.xaml /// </summary> public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } private void cb_Checked(object sender, RoutedEventArgs e) { Binding bi = new Binding(); bi.ElementName = "tb"; bi.Path = new PropertyPath("Text"); BindingOperations.SetBinding(lb, Label.ContentProperty, bi); lb.Foreground = FindResource("fgbrush") as Brush; tb.Foreground = FindResource("winbrush") as Brush; } private void cb_Unchecked(object sender, RoutedEventArgs e) { BindingOperations.ClearBinding(lb,Label.ContentProperty); lb.Foreground = FindResource("winbrush") as Brush; tb.Foreground = FindResource("fgbrush") as Brush; tb.Background = FindResource("bgbrush") as Brush; lb2.Foreground = FindResource("bgbrush") as Brush; lb2.Background = FindResource("fgbrush") as Brush; } private void cb_DisableColors(object sender, RoutedEventArgs e) { lb.Foreground = FindResource("blackBrush") as Brush; lb.Background = FindResource("whiteBrush") as Brush; tb.Foreground = FindResource("blackBrush") as Brush; tb.Background = FindResource("whiteBrush") as Brush; lb2.Foreground = FindResource("blackBrush") as Brush; lb2.Background = FindResource("whiteBrush") as Brush; lb3.Foreground = FindResource("blackBrush") as Brush; lb3.Background = FindResource("whiteBrush") as Brush; } private void cb_EnableColors(object sender, RoutedEventArgs e) { lb.Foreground = FindResource("winbrush") as Brush; tb.Foreground = FindResource("fgbrush") as Brush; tb.Background = FindResource("bgbrush") as Brush; lb2.Foreground = FindResource("bgbrush") as Brush; lb2.Background = FindResource("fgbrush") as Brush; lb3.Background = FindResource("bgbrush") as Brush; } } } |
Enjoy the code. If you want to download the application, you may do so from here.