Nesting Controls in WPF

Here is an example of Nesting Controls in WPF. In this example we have a Button Control with an Ellipse in it, TextBlock and a ListBox Control.



In this example we use a TimeTable of a class.

Step 1: First we use a Button Control:

<Button Margin="49,46,80,36">
</Button>

Step 2: Then we use an Ellipse in it:

<StackPanel Orientation="Vertical">
                <StackPanel Margin="6"
VerticalAlignment="Center"
Orientation="Horizontal">

<Ellipse Fill="Brown" Width="18" />

</StackPanel>
</StackPanel>

Step 3: After that we create a TextBlock in it:

<TextBlock VerticalAlignment="Center"
Margin="6" Text="Time Table" />

Step 4: Now we create a ListBox in it:

<ListBox FontSize="12" Opacity="0.5"
Margin="2" x:Name="lstTimeTable">
 <ListBoxItem>

 <TextBlock VerticalAlignment="Center" Text="Monday: Maths " />
</ListBoxItem>
<ListBoxItem>
<TextBlock VerticalAlignment="Center"
Text="Tuesday: English" />
</ListBoxItem>
 <ListBoxItem>
<TextBlock VerticalAlignment="Center"
Text="Wednesday: Social Science" />
</ListBoxItem>
 <ListBoxItem>
 <TextBlock VerticalAlignment="Center"
Text="Thursday: Physics" />
</ListBoxItem>
<ListBoxItem>
<TextBlock VerticalAlignment="Center"
Text="Friday: Biology" />
</ListBoxItem>
<ListBoxItem>
<TextBlock VerticalAlignment="Center"
Text="Saturday: Zoology" />
</ListBoxItem>

 </ListBox>

Complete Program:

<Window x:Class="Nesting_Controls_In_WPF.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>
                <Button Margin="39,46,39,36">
            <StackPanel Orientation="Vertical">
                <StackPanel Margin="6"
VerticalAlignment="Center"
Orientation="Horizontal">

                    <Ellipse Fill="Brown" Width="18" />
                    <TextBlock VerticalAlignment="Center"
Margin="6" Text="Time Table" />
</StackPanel>
                <ListBox FontSize="12" Opacity="0.5"
Margin="2" x:Name=" lstTimeTable">
                    <ListBoxItem>

                        <TextBlock VerticalAlignment="Center" Text="Monday: Maths " />
</ListBoxItem>
                    <ListBoxItem>
                        <TextBlock VerticalAlignment="Center"
Text="Tuesday: English" />
</ListBoxItem>
                    <ListBoxItem>
                        <TextBlock VerticalAlignment="Center"
Text="Wednesday: Social Science" />
</ListBoxItem>
                    <ListBoxItem>
                        <TextBlock VerticalAlignment="Center"
Text="Thursday: Physics" />
</ListBoxItem>
                    <ListBoxItem>
                        <TextBlock VerticalAlignment="Center"
Text="Friday: Biology" />
</ListBoxItem>
                    <ListBoxItem>
                        <TextBlock VerticalAlignment="Center"
Text="Saturday: Zoology" />
</ListBoxItem>

                </ListBox>

            </StackPanel>
        </Button>
    </Grid>
</Window>

Now we look at another example of a Nested Control. In the previous example we create it in XAML. Now we create it by the coding in the .cs file:

Step 1: First we create a StackPanel in the XAML page:

<StackPanel x:Name="StackPanel1"></StackPanel>

Step 2: Then we write the following code in the .cs file:

  Button Button1 = new Button();
            Button1.Name= "btn1";
            StackPanel1.Children.Add(Button1);

            TextBlock TextBlock1 = new TextBlock();
            TextBlock1.Name = "NestedTextBlock";
            TextBlock1.Text = "Click Me!!!";

            Button1.Content = TextBlock1;
 
            Button Button2 = new Button();
            Button2.Name = "MyNestedButton";
            Button2.Content = "Nested Button";
            TextBlock1.Inlines.Add(Button2);

In this example the TextBlock1 is added in the Button Control as the Content of the Button. We can't add Button2 as the content of TextBlock as the TextBlock has no Content property.