UWP-012 - Laudable Layout Challenge: Solution

Sign in to queue

The Discussion

  • User profile image
    hariaidya

    I do it right, but... I don't know about ColumnSpan properties

    Btw thanks a lot, I love this and C# Foundamental series

  • User profile image
    ViktorIg

    @hariaidya: Like Bob said, in situations like this, intellisense is your best friend. :)

  • User profile image
    pjenrow

    -Update- It would have helped if I had used ColumnSpan rather than RowSpan.  Its funny how you can't see something very obvious until you step away for a time.

    I'm having a problem with the Header row "ACME Sales Corp" appearing under the first row (row 1).  It appears that the TextBlock is taking up no space and is overlapped by the next row.  I have included my code, and any advice on what to check would be appreciated.  I love the course!

        <Grid Margin="10,0,0,0" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
    
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="2*" />
                <ColumnDefinition Width="3*" />
                <ColumnDefinition Width="1*" />
            </Grid.ColumnDefinitions>
    
    
            <TextBlock Text="ACME Sales Corp" FontSize="48" Grid.RowSpan="3" />
    
            <TextBlock Grid.Row="1" Text="First Name:" VerticalAlignment="Center"/>
            <TextBox Grid.Row="1" Grid.Column="1" Margin="0,0,0,10"/>
    
            <TextBlock Grid.Row="2" Text="Last Name:" VerticalAlignment="Center"/>
            <TextBox Grid.Row="2" Grid.Column="1" Margin="0,0,0,10"/>
    
            <TextBlock Grid.Row="3" Text="Email:" VerticalAlignment="Center"/>
            <TextBox Grid.Row="3" Grid.Column="1" Margin="0,0,0,10"/>
    
    
    
            <Button x:Name="button" 
                    Content="Button" 
                    Grid.Column="1" 
                    HorizontalAlignment="Left" 
                    Margin="10,10,10,10" 
                    Grid.Row="4" 
                    VerticalAlignment="Bottom"/>
    
        </Grid>

     

  • User profile image
    BobTabor

    @pjenrow: Great that you were able to figure it out!  Good for you!  See?  Struggle is good.  :)

  • User profile image
    koeks525

    I did the exercise and it felt awesome typing up all that XML... I did mine slightly different, I used two columns and 5 rows... I applied the margins and alignment to the controls, it looked all fine. When I ran the application everything ran fine except for the textboxes - they would stretch in size as more text is entered - when I applied the third column like your solution, there was no stretching :)

    Thanks so much for an amazing video series!!

  • User profile image
    tomaat69

    First I tried to set ACME header to size 48 and then after some thinking went "rogue" and put it like in html (just tried to think errr universally or something) and here's the code:

    <Grid Margin="10 0 0 0" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
          <Grid.RowDefinitions>
             <RowDefinition Height="Auto"/>
             <RowDefinition Height="Auto"/>
             <RowDefinition Height="Auto"/>
             <RowDefinition Height="Auto"/>
             <RowDefinition Height="Auto"/>
          </Grid.RowDefinitions>
          <Grid.ColumnDefinitions>
             <ColumnDefinition Width="Auto"/>
             <ColumnDefinition Width="Auto"/>
          </Grid.ColumnDefinitions>
    
          <!-- https://msdn.microsoft.com/fi-fi/library/windows/apps/windows.ui.xaml.controls.textblock.aspx -->
          <!-- https://msdn.microsoft.com/fi-fi/library/windows/apps/xaml/mt187274.aspx#the_xaml_type_ramp -->
          <TextBlock Text="ACME Sales Corp" Style="{ThemeResource HeaderTextBlockStyle}" Grid.ColumnSpan="2" Margin="10"/>
    
          <TextBlock Grid.Column="0" Grid.Row="1" VerticalAlignment="Center" Text="First Name:"/>
          <TextBox Grid.Column="1" Grid.Row="1" Margin="0 0 0 10" Width="Auto"/>
    
          <TextBlock Grid.Column="0" Grid.Row="2" VerticalAlignment="Center" Text="Last Name:"/>
          <TextBox Grid.Column="1" Grid.Row="2" Margin="0 0 0 10" Width="Auto"/>
    
          <TextBlock Grid.Column="0" Grid.Row="3" VerticalAlignment="Center" Text="Email:"/>
          <TextBox Grid.Column="1" Grid.Row="3" Margin="0 0 0 10" Width="Auto"/>
    
          <Button Grid.Column="1" Grid.Row="4" Content="Save"/>
       </Grid>


  • User profile image
    Paladinleeds

    So I decided to use this and while it did work. It only worked in one position and even then it wasn't perfect. Seems I could have used a more refined method. As for the whole columnspan thing, I already knew what I was doing with that after a blind attempt at C# for WPF a year and a half ago (trying to create a fully fledged chat bot for a streaming service in C# with no prior knowledge of the language and following no structured tutorials, just lots and lots of Bing, that caused a LOT of frustration! But ColomnSpan was something I learned from that venture)

        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="100"/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <TextBlock Margin="20,20,20,20" Grid.ColumnSpan="3" FontSize="48">ACME Sales Corp</TextBlock>
            <TextBlock Margin="10" VerticalAlignment="Bottom" Grid.Row="1">First Name:</TextBlock>
            <TextBox Margin="10" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1"/>
            <TextBlock Margin="10" VerticalAlignment="Bottom" Grid.Row="2">Last Name:</TextBlock>
            <TextBox Margin="10" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="2" />
            <TextBlock Margin="10" VerticalAlignment="Bottom" Grid.Row="3">Email</TextBlock>
            <TextBox Margin="10" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="3" />
            <Button  Margin="10" Grid.Column="1" Grid.Row="4" VerticalAlignment="Top" Content="Save" />
        </Grid>

  • User profile image
    Jonathan

    My solution was virtually the same except for the font size. I was under the understanding that we had to use the properties panel to specify a font size in points.

    So I did that and it converted it to: FontSize="64" in the XAML.

    Great videos - you're a great educator.

  • User profile image
    Peter

    Hi Bob.

    Technically, your first/last/email textblocks are not centered in the middle of the TextBoxes because you only put a bottom margin of 10 on the TextBox.

    If you gave the TextBoxes a margin of 10 on the TOP and BOTTOM, then they would line up with the textblocks perfectly.

    That's just my 2 cents. Other than that, i was able to get my sample project done in about 22 minutes and identical to yours without cheating.

  • User profile image
    FangSuo

    Hi Bob,

    First of all, I would like to say thank you for this video series. I actually dropped software development for 4 years of traveling and this is putting me back on tracks.

    Then, I actually have a slight difference once I run the application. The margin applied on the grid has a black background (see the image here). The only way I could have it white is by adding a margin to all the textblocks present in the first column.

    Any idea where that problem could come from and how to fix it? I just can imagine, in case of multiple rows and controls per rows, having to add a margin to all of them...

    <Grid Margin="10,0,0,0" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="1*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="2*"/>
                <ColumnDefinition Width="3*"/>
                <ColumnDefinition Width="1*"/>
            </Grid.ColumnDefinitions>
    
            <TextBlock Grid.Row="0" Text="ACME Sales Corp" FontSize="48" Grid.ColumnSpan="3" Margin="0,0,0,20"/>
    
            <TextBlock Grid.Row="1" Text="First Name: " VerticalAlignment="Center"/>
            <TextBox Grid.Row="1" Grid.Column="1" Margin="0,0,0,10"/>
    
            <TextBlock Grid.Row="2" Text="Last Name: " VerticalAlignment="Center"/>
            <TextBox Grid.Row="2" Grid.Column="1" Margin="0,0,0,10"/>
    
            <TextBlock Grid.Row="3" Text="Email: " VerticalAlignment="Center"/>
            <TextBox Grid.Row="3" Grid.Column="1" Margin="0,0,0,10"/>
    
            <Button Grid.Row="4" Grid.Column="1" Content="Save"/>
        </Grid>


  • User profile image
    JohnS2063

    @FangSuo: I see the black line in the image you linked to, but we would have to see your code in order to try to figure what went wrong.

    - john

  • User profile image
    FangSuo

    @JohnS2063: Just added the code to the initial post

    - FangSuo

  • User profile image
    JohnS2063

    @FangSuo: Hi

    I copied and pasted your code into a new Project, then ran it and it displays just fine .. no black border.

    Are you using Firefox or Chrome for your "default browser" in Windows  by any chance?

    - john

  • User profile image
    JohnS2063

    @Jonathan: Yeah, Bob mentions this in one of the videos.

    You set the font size to 48 for this Challenge, but it appears as 64 in the code.

    Has something to do with Adaptive Resolution ... ratio of the text size to the total available screen size, I think he said.

    - john

  • User profile image
    FangSuo

    @JohnS2063: Yes, Firefox 44.0 is my default web browser. I also realized that I'm using Windows 10 dark theme. How could any of this create that black border?

  • User profile image
    JohnS2063

    @FangSuo: Hi. Not sure, but my guess was that Firefox is not interpreting the margin correctly, and is letting some black color show through from your background.

    So I tried setting my default browser to Firefox instead of IE, but that didn't make it look like the image you showed us. It looks like it's still rendering the page in the new Microsoft Edge browser, not IE or Firefox.

    I also changed the background theme of Visual Studio to Dark, changed my Windows 10 desktop background to solid black and neither of them made it look like the problem you are having. Also, none of the changes make the first textbox in your image outlined in red ... mine is still outlined in blue.

    You may have stumped me ...I cannot see anything in your code, nor find a setting in VS that would make the output appear as it does in your image!

    I'll think about it some more, but I really have no idea why it doesn't work for you.

    sorry

    - john

  • User profile image
    FangSuo

    @JohnS2063: Hi John! I just ran some tests and it's actually the dark theme of Windows (not Visual Studio) that produces this black margin. As for the textbox outlined in red or blue, this is actually related to the accent color of your theme in Windows.

    Thanks for your help and your time. I hope this thread will help people having the same issue.

    Cheers.

  • User profile image
    JohnS2063

    @FangSuo:

    Glad you solved it!    Good job.

    - john

  • User profile image
    Mintydog

    Mine was almost the same.

    I set the pixel values for the rows (even though I know I shouldn't) And only used 5 rows instead of 6. But I did * the final row to take up whats left and align the Save button to the top.

    I was nearly there,

    Cheers Bob

  • User profile image
    RGBPlaza

    I did this with no help at all and got a very similar result, identical when at the same window size as the provided image. My only big difference was that I didn't include the 3rd column and used a fix margin of 100px on the right of the textboxes, using the  'most' ,referring to margin sizes, as a clue.

    If you want to see my code:

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"/>
                <ColumnDefinition Width="2*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
    
            <TextBlock FontSize="48" Grid.ColumnSpan="2" Grid.Column="0" HorizontalAlignment="Left" Margin="10,10,0,20">ACME Sales Corp</TextBlock>
    
            <TextBox Grid.Column="1" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="0,0,100,10"></TextBox>
            <TextBox Grid.Column="1" Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="0,0,100,10"></TextBox>
            <TextBox Grid.Column="1" Grid.Row="3" HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="0,0,100,10"></TextBox>
            <Button Grid.Column="1" Grid.Row="4" HorizontalAlignment="Left">Save</Button>
    
            <TextBlock Grid.Column="0" Grid.Row="1" VerticalAlignment="Center" Margin="10,0,0,0">First Name:</TextBlock>
            <TextBlock Grid.Column="0" Grid.Row="2" VerticalAlignment="Center" Margin="10,0,0,0">Last Name:</TextBlock>
            <TextBlock Grid.Column="0" Grid.Row="3" VerticalAlignment="Center" Margin="10,0,0,0">Email:</TextBlock>
        </Grid>

    Just also wanted to say that I really like your videos and think you are quite an inspiration.

  • User profile image
    marcos11man​uel

    I didn't use the .RowSpan, I did more Grids in the Grid and Get more or less the same result, this is my code

        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
    
            <TextBlock Grid.Row="0" FontSize="48pt" Margin="10, 20, 10, 20">ACME Sales Corp</TextBlock>
    
            <Grid Grid.Row="1">
    
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="4*"/>
                    <ColumnDefinition Width="1*"/>
                </Grid.ColumnDefinitions>
    
    
                <TextBlock Grid.Row="0" Margin="10">First Name:</TextBlock>
                <TextBlock Grid.Row="1" Margin="10, 5 , 10, 5">Last Name:</TextBlock>
                <TextBlock Grid.Row="2" Margin="10">Email:</TextBlock>
                <TextBox Grid.Row="0" Grid.Column="2" Margin="10, 10, 10, 5"/>
                <TextBox Grid.Row="1" Grid.Column="2" Margin="10, 5, 10, 5"/>
                <TextBox Grid.Row="2" Grid.Column="2" Margin="10, 5, 10, 5"/>
                <Button Grid.Row="3" Grid.Column="2" Margin="10, 5">Save</Button>
    
            </Grid>
        </Grid>

     

    Greetings from Mexico, thanks for this awesome videos

  • User profile image
    Dexter364

    I created the layout just like the image but when I came to your solution video you did the entire xaml differently than my own solution so is it right or should I try again

Add Your 2 Cents