Intro to XAML Part 2 – Challenge Solution

Hi All,

So this is a solution to the challenge from Windows 8 Introduction to Xaml - Part 2.  Hopefully you were all able to get it in some fashion.  What I am posting below is just a single answer to the problem.  I would not recommend using this solution as a basis for how to code, I broke it out in an attempt to demonstrate each point as best as possible in a way that is conducive to your learning. 


The Problem again:

The new exercise I would like you to try is to add a second button which is centered in the middle column of the content region.  When clicking this button I want it to do three things.  Firstly, change the width of the first button to switch between 75 and *.  Secondly, change the width of the RichTextBlock to * and have it horizontally and vertically aligned to the center and span only a single row.  Thirdly I want it to add a new StackPanel inside of a scrollviewer to the second row of the second column of the content region if it does not exist and add a new textblock as a child element to that region with the number for how many times you clicked the button. 



 <Grid x:Name="Silhouette" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
<RichTextBlock x:Name="TitleText" VerticalAlignment="Bottom" HorizontalAlignment="Right" Grid.RowSpan="2" Width="20">
<Paragraph FontSize="40" FontWeight="Bold" FontStyle="Italic" FontFamily="algerian">
This is some text.
<Grid Grid.Row="1" x:Name="ContentRegion">
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="200"/>
<RowDefinition Height="*"/>
<RowDefinition Height="2*"/>
<Button x:Name="FirstButton" Grid.Column="0" Grid.RowSpan="2" Content="I am a tall button!" VerticalAlignment="Center" Height="400" Click="Button_Click_1" Width="75"/>
<Button Grid.Column="1" Grid.Row="0" Grid.RowSpan="1" Content="Change Stuff, YAY!" VerticalAlignment="Center" HorizontalAlignment="Center" Click="ChangeStuff" Width="200" Height="100" />


The code behind

 bool toggle = true;
bool firstTime = true;
StackPanel sPanel;
ScrollViewer sViewer;
int counter = 1;
private void ChangeStuff(object sender, RoutedEventArgs e)
if (toggle)
//first challenge part 1
FirstButton.Width = double.NaN;

if (firstTime)

thirdChallenge();//part 1

addNumber(); //third challenge part 2

firstTime = false;
toggle = !toggle;
//first challenge part 2
FirstButton.Width = 75;
addNumber();//third challenge part 2
toggle = !toggle;


//this is part 1
private void thirdChallenge()
//Third Challenge, Add StackPanel inside of ScrollViewer to the Grid
sPanel = new StackPanel();
sPanel.VerticalAlignment = Windows.UI.Xaml.VerticalAlignment.Stretch;
sPanel.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Stretch;
sViewer = new ScrollViewer();
sViewer.VerticalScrollBarVisibility = ScrollBarVisibility.Auto;
sViewer.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Center;
sViewer.VerticalAlignment = Windows.UI.Xaml.VerticalAlignment.Center;
sViewer.Width = 150;
sViewer.Height = 200;
sViewer.Content = sPanel;
Grid.SetColumn(sViewer, 1);
Grid.SetRow(sViewer, 1);

private void secondChallenge()
//First Challenge with RichTextBlock
TitleText.Width = double.NaN;
TitleText.VerticalAlignment = Windows.UI.Xaml.VerticalAlignment.Center;
TitleText.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Center;
Grid.SetRowSpan(TitleText, 1);

private void addNumber()
TextBlock nBlock = new TextBlock();
nBlock.Width = 20;
nBlock.Height = 20;
nBlock.FontSize = 20;
nBlock.Text = counter.ToString();
Skip to main content