In the following example, we will allow the user to change the message Hello World! to one of their choice. Starting from the previous example, we will follow the given steps:
Open the
mainpage.xamlfile.Replace the XAML code inserted in the previous example by the one highlighted as follows (we have added an additional textbox, a button, and identifiers for the controls).
<Grid x:Name="LayoutRoot" Background="White"> <StackPanel Orientation="Vertical"> <TextBlock x:Name="tbLabel" Text="Hello World!" FontSize="20"/> <StackPanel Orientation="Horizontal"> <TextBlock Text="New Text:" FontSize="16"/> <TextBox x:Name="txInput" Width="120"/> <Button Content="Change"/> </StackPanel> </StackPanel> </Grid>
When we build and execute the project, we realize that our window now has the aspect as shown in the following screenshot:
Next, we must implement the response to the
Clickevent of the Change button.Hook to the
Clickevent directly in the XAML file. As soon as we start typing, IntelliSense (Microsoft's implementation of autocompletion) will ask us if we want to create the method (hitting Enter or Tab would create the method with the default name or with the name of the control after selecting aClickevent).
Execute the same operation from the Properties panel (or by directly double-clicking on the button control):
As a result, XAML will look as follows:
<Button Content="Change" Click="Button_Click"/>
In Code-Behind, in the method invoked by the
Clickevent, we must add a line of code, which transfers the text content entered by the user to the tag where we showed 'Hello World'.private void Button_Click(object sender, RoutedEventArgs e) { tbLabel.Text = txInput.Text; }When we execute, we will be able to enter a new text that substitutes 'Hello World'.
