Dynamic XAML via C #

Question

I am admittedly new to the WP7 application development scenario. I found a video showing how to do something like this some time ago, but I can no longer find it.

Essentially, I want to change the contents of the XAML page based on the user's choice. For a simple example, there may be five buttons numbered 1-5. Clicking on that will create a lot of text fields on the page. So, is there a way to instruct the button inside the event handler to insert some kind of XAML code on the page? Does this work like CSS sheets in HTML? Thank you very much for your time and helped me with this question! Even pointing to a tutorial or method name that I could use Google would be helpful.

Answer 1

In fact, you won’t “embed” it in your XAML file, you will have C # code in the button handler to dynamically add TextBox controls to the panel defined in your XAML.

MainWindow.xaml

<phone:PhoneApplicationPage x:Class="WindowsPhoneApplication2.MainPage"
                            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                            xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
                            xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
                            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                            mc:Ignorable="d"
                            d:DesignWidth="480"
                            d:DesignHeight="768"
                            FontFamily="{StaticResource PhoneFontFamilyNormal}"
                            FontSize="{StaticResource PhoneFontSizeNormal}"
                            Foreground="{StaticResource PhoneForegroundBrush}"
                            SupportedOrientations="Portrait"
                            Orientation="Portrait"
                            shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot"
          Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel"
                    Grid.Row="0"
                    Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle"
                       Text="MY APPLICATION"
                       Style="{StaticResource PhoneTextNormalStyle}" />
            <TextBlock x:Name="PageTitle"
                       Text="page name"
                       Margin="9,-7,0,0"
                       Style="{StaticResource PhoneTextTitle1Style}" />
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel"
              Grid.Row="1"
              Margin="12,0,12,0">
            <StackPanel>
                <Button Click="Button_Click"
                        Content="1" />
                <Button Click="Button_Click"
                        Content="2" />
                <Button Click="Button_Click"
                        Content="3" />
                <Button Click="Button_Click"
                        Content="4" />
                <Button Click="Button_Click"
                        Content="5" />
                <StackPanel x:Name="DynamicPanel">
                </StackPanel>
            </StackPanel>
        </Grid>
    </Grid>
</phone:PhoneApplicationPage>

MainWindow.cs:

using System;
using System.Windows;
using System.Windows.Controls;
using Microsoft.Phone.Controls;

namespace WindowsPhoneApplication2 {
    public partial class MainPage : PhoneApplicationPage {
        // Constructor
        public MainPage() {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e) {
            int numBoxes = Int32.Parse(((Button) sender).Content.ToString());
            DynamicPanel.Children.Clear();
            for (int i = 0; i < numBoxes; i++) {
                var newTextBlock = new TextBlock { Name = "textBlock" + i.ToString(), Text = "Hello!" };
                DynamicPanel.Children.Add(newTextBlock);
            }
        }
    }
}

Answer 2

As Wayne points out, in many cases, in many cases, it's easy to create controls at run time in C #.

Alternatively, if you want to look at the XAML generation at runtime, here is a post from Pete Brown to help you get started.

Dynamically create controls in WPF and Silverlight