Post
Ask Question

Binding Various Elements in WPF

In this article we will learn how to bind an element property with any other element in WPF. In WPF binding is very useful because using it we can populate an interface using very little code. With data binding in WPF we can take data from a property of an element and bind it to any other dependency property of another element.

In this article I will bind the following Element Properties:

  • Binding of a Button to a CheckBox.
  • Binding of a Text Box to a Slider.
  • Binding an Image to Slider.
  • Binding of a Text Box to a List Box.
  • Binding Text Block to Text Box.
  • Now I will explain each Binding one by one.
  1. Binding of a Button to a CheckBox

    Designing

    Add a CheckBox and a Button from the ToolBox.

    Binding
    1. <Button x: Name="button" Content="Register Now"  HorizontalAlignment="Left" Margin="86,109,0,0" VerticalAlignment="Top" IsEnabled="{Binding ElementName=enable, Path=IsChecked}" Width="98" RenderTransformOrigin="-1.818,0.761" Height="34" Click="button_Click"/>  
    2.  <Checkbox x: Name="enable" Content="I accept the terms and condition."   FontSize="20" HorizontalAlignment="Left" Margin="56,48,0,0" VerticalAlignment="Top" Height="38" Width="466"/>  




    In the preceding code, the Button was Enabled and Disabled by checking and unchecking the CheckBox.

  2. Binding Of the TextBox to a Slider

    Designing

    Add a TextBox and a Slider from the ToolBox.

    Binding
    1. <Grid>  
    2.         <Slider x: Name="mySlider" Margin="20,141,72,131"/>  
    3.         <Textbox x: Name="myTextBox" Text="{Binding ElementName=mySlider, Path=Value}" Margin="20,63,38,200"/  
    4.  </Grid>  


    In the preceding code, the value in the TextBox increases as we move the Slider forward.

  3. Binding an Image to a Slider

    Designing

    Add an Image and a Slider from the ToolBox.

    Binding
    1. <Image x:Name="image" Margin="120,171,133,146" Stretch="Uniform" Source="Source path of the image">  
    2.             <Image.RenderTransform>  
    3.                 <ScaleTransform CenterX="150" CenterY="100" ScaleX="{Binding Value, ElementName=slider}" ScaleY="{Binding Value, ElementName=slider}" x:Name="transform"></ScaleTransform>  
    4.             </Image.RenderTransform>  
    5.         </Image>  
    6. <Slider Minimum="1" Maximum="10" x:Name="slider" Margin="137,362,150,90" RenderTransformOrigin="0.5,0.5"  >  
    7.             <Slider.RenderTransform>  
    8.                 <TransformGroup>  
    9.                     <ScaleTransform/>  
    10.                     <SkewTransform AngleX="0.584"/>  
    11.                     <RotateTransform/>  
    12.                     <TranslateTransform X="1.482"/>  
    13.                 </TransformGroup>  
    14.             </Slider.RenderTransform>  
    15.         </Slider>  

    In the preceding code, the size of the image increases as we move the Slider forward.

  4. Binding a TextBox to a ListBox

    Designing

    Add a TextBox and a ListBox from the ToolBox.

    Binding
    1. <Grid>  
    2. <TextBox FontSize="20" Height="47" Margin="12,23,12,0" Name="textBox1" VerticalAlignment="Top" Text="{Binding ElementName=listBox1, Path=SelectedItem.Content}"/>  
    3. <ListBox Margin="10,102,14,60" Name="listBox1">  
    4. <ListBoxItem>Item 1</ListBoxItem>  
    5. <ListBoxItem>Item 2</ListBoxItem>  
    6. <ListBoxItem>Item 3</ListBoxItem>  
    7. <ListBoxItem>Item 4</ListBoxItem>  
    8. <ListBoxItem>Item 5</ListBoxItem>  
    9. <ListBoxItem>Item 6</ListBoxItem>  
    10. </ListBox>  
    11. </Grid>  


    In the preceding code, the value of the TextBox changes depending on the item in the ListBox that we select.

  5. Binding of a TextBlock to a TextBox

    Designing

    Add a TextBlock and a TextBox from the ToolBox.

    Binding
    1. <Grid >  
    2. <Grid.RowDefinitions >  
    3. <RowDefinition Height="107*" />  
    4. <RowDefinition Height="0*" />  
    5. <RowDefinition Height="213*" />  
    6. </Grid.RowDefinitions>  
    7. <TextBox Name="mySourceElement" Grid.Row="0" Margin="188,32,62,40" >I Like C# Corner</TextBox>  
    8. <TextBlock Margin="169,0,106,178" Grid.Row="2">  
    9. <TextBlock.Text>  
    10. <Binding ElementName="mySourceElement" Path="Text" />  
    11. </TextBlock.Text>  
    12. </TextBlock>  
    13. <TextBlock FontSize="20" Margin="38,32,334,30">Enter Your Text:</TextBlock>  
    14. <TextBlock FontSize="20" Margin="48,98,348,190" Grid.RowSpan="3">Output :</TextBlock>  
    15. </Grid>  


    In the preceding code, the value of the output TextBlock changes depending on the changes we have done in the TextBox.

    That's all about Element Binding in this article. I will explain a few other bindings in my next article. I hope this article will be useful for all of you and you are able to explain how binding is done in WPF.

    For any query, please comment.


Similar Articles