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. 

Enjoy:

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. 

 

The XAML

  <Grid x:Name="Silhouette" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
 <Grid.RowDefinitions>
 <RowDefinition Height="140"/>
 <RowDefinition Height="*"/>
 </Grid.RowDefinitions>
 <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.
 </Paragraph>
 </RichTextBlock>
 <Grid Grid.Row="1" x:Name="ContentRegion">
 <Grid.ColumnDefinitions>
 <ColumnDefinition Width="auto" />
 <ColumnDefinition Width="*" />
 <ColumnDefinition Width="200"/>
 </Grid.ColumnDefinitions>
 <Grid.RowDefinitions>
 <RowDefinition Height="*"/>
 <RowDefinition Height="2*"/>
 </Grid.RowDefinitions>
 <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" />
 </Grid>
 </Grid>

 

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)
 {
 secondChallenge();
 
 thirdChallenge();//part 1
 
 addNumber(); //third challenge part 2
 
 firstTime = false;
 toggle = !toggle;
 return;
 }
 }
 else
 {
 //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);
 this.ContentRegion.Children.Add(sViewer);
 }
 
 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();
 sPanel.Children.Add(nBlock);
 counter++;
 }