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}">  <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++;  }

2 thoughts on “Intro to XAML Part 2 – Challenge Solution

  1. Pingback: Nelson

  2. Pingback: Nelson

Leave a Reply

Your email address will not be published. Required fields are marked *