Working With Controls Dynamically in Windows Store Apps

In this article I will describe you how you can work with XAML controls at run time in code-behind file. In XAML every control has a parent control. If you want to perform working on these controls, you can easily do this.

Here I will take two scenarios to understand how to get child controls and work on them dynamically.

So, let's start with create a Blank Windows Store Apps with XAML/C#.

Suppose you have many textboxes in a page to fill up the form and you want to give the user a button that reset the value of all textboxes in the page. Then, you probably do this by getting the textboxes with each and set the text property NULL or Blank. But, there is another easiet way to do this.

Here is that.

Code of XAML file.

<Page

x:Class="Getting_All_Controls_At_Runtime.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="using:Getting_All_Controls_At_Runtime"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</StackPanel>

</Grid>

</Page>

Code of .cs file.

First thing is that you have to count all the child controls from its parent.

int count = VisualTreeHelper.GetChildrenCount(Parent);

Now, travarse the loop untill child contorls exists and get each of child control from its parent.

FrameworkElement childVisual = (FrameworkElement)VisualTreeHelper.GetChild(Parent, i);

Then, check if child control is textbox or not. If it is type of textbox then set it's text property to blank.

if (childVisual is TextBox)

{

((TextBox)childVisual).Text = "";

}

Full code.

private void Reset_Click(object sender, RoutedEventArgs e)

{

int count = VisualTreeHelper.GetChildrenCount(Parent);

for (int i = 0; i < count; i++)

{

FrameworkElement childVisual = (FrameworkElement)VisualTreeHelper.GetChild(Parent, i);

if (childVisual is TextBox)

{

((TextBox)childVisual).Text = "";

}

}

Output

Run this application and fill all the textbox in the page.

Now, click on the Reset button to clear the values of the textboxes. You will see that all the textboxes will be reset to NULL.

Now in the next scenario I will show you how to remove the controls from it's parent control at runtime.

Here is the code of XAML

In the XAML file I put some TextBlocks in the page and a ListBox to view the name of TextBlocks at runtime. I also use two buttons, one is for showing the name of all the TextBlocks and the other is used to delete the particular TextBlocks from the page. The code is as follows:

<Page

x:Class="Getting_All_Controls_At_Runtime.BlankPage1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="using:Getting_All_Controls_At_Runtime"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</StackPanel>

</StackPanel>

</Grid>

</Page>

Here is the code to get the name of all TextBolcks:

private void getname_Click(object sender, RoutedEventArgs e)

{

int count = VisualTreeHelper.GetChildrenCount(Parent);

for (int i = 0; i < count; i++)

{

FrameworkElement childVisual = (FrameworkElement)VisualTreeHelper.GetChild(Parent, i);

if (childVisual is TextBlock)

{

ListBoxItem li = new ListBoxItem();

li.Content=childVisual.Name;

ListofControls.Items.Add(li);

}

}
}

Output

Here is the code to remove the TextBlock from the page dynamically:

private void delete_Click(object sender, RoutedEventArgs e)

{

ListBoxItem item =(ListBoxItem) ListofControls.SelectedValue;

string name = item.Content.ToString();

int count = VisualTreeHelper.GetChildrenCount(Parent);

for (int i = 0; i < count; i++)

{

FrameworkElement childVisual = (FrameworkElement)VisualTreeHelper.GetChild(Parent, i);

if (childVisual.Name==name)

{

VisualTreeHelper.DisconnectChildrenRecursive(childVisual);

}

}

Output

Select the name of the TextBlock that you want to delete and click on the Delete button.

You will see that the specific TextBlock with the selected name is removed from the page.