Dynamic XAML Through C#

Question

I'm admittedly new to the WP7 App development scene. I had found a video showing how to do something similar to this a while back, but can't locate it anymore.

Essentially I want to change the contents of a XAML page based on a selection by the user. For a simple example, there could be five buttons numbered 1-5. Clicking on whichever one would create that many textboxes on a page. So is there a way to instruct the button within the event handler to paste some XAML code to the page? Does this work similarly to CSS sheets in HTML? Thanks so much for your time, and helping me with this question! Even pointing me to a tutorial or the name of the method I could Google would be helpful.

Answer 1

You wouldn't really be "pasting" into your XAML file, you'd have C# code in your button handler to dynamically add TextBox controls to a 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 it is straight forward in many cases to generate controls at runtime in C#.

Alternatively, if you did want to look into generating XAML at runtime, here is a post by Pete Brown that will get you started.

Dynamically Generating Controls in WPF and Silverlight