O'Reilly Forums: Wpf Xaml - Picking Up & Using Background Color In Grid Instead Of Canvas For Flying Bees - O'Reilly Forums

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Wpf Xaml - Picking Up & Using Background Color In Grid Instead Of Canvas For Flying Bees Setting Background Can Only Work On Grid As A Parent?

#1 User is offline   ClockEndGooner 

  • New Member
  • Pip
  • Group: Members
  • Posts: 8
  • Joined: 28-November 13

Posted 23 February 2014 - 03:35 PM

I've been working through the Animated Bees application as a WPF XAML Application using C# and Visual Studio 2012 Professional, and I've noticed something that has me a bit perplexed.

In the WPF Learners Guide To Head First C# on page 790 for the WPF version of the application, as well as the Windows Store Application for Windows 8 on page 790 in Head First C# - Third Edition, the SkyBlue Background color is set as an attribute in both application types on the Canvas Layout Control Panel. When I declare and set the Background Color attribute in the Canvas inside the Grid, the WPF application's background color for the main window remains white:

<Window x:Class="BeeAnimationWPF.View.FlyingBees"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:view="clr-namespace:BeeAnimationWPF.View"
        Title="Flying Bees WPF" Height="400" Width="600" WindowStartupLocation="CenterScreen" ResizeMode="CanResizeWithGrip">
    <Grid>
        <!-- Background Color Attribute Set in the Canvas: Window Background Remains White -->
        <Canvas Grid.Row="0" Grid.Column="0" Background="SkyBlue" HorizontalAlignment="Left" Margin="120,0,120,120">
            <view:AnimatedImage x:Name="firstBee" Canvas.Left="55" Canvas.Top="40" Width="50" Height="50" />
            <view:AnimatedImage x:Name="secondBee" Canvas.Left="80" Canvas.Top="260" Width="200" Height="200" />
            <view:AnimatedImage x:Name="thirdBee" Canvas.Left="230" Canvas.Top="100" Width="300" Height="125" />
        </Canvas>
    </Grid>
</Window>


Posted Image

However, if I remove the Background element from the Canvas child panel and set the Background attribute in the parent Grid layout panel instead, the WPF application's background color for the main window does display with a SkyBlue background:

<Window x:Class="BeeAnimationWPF.View.FlyingBees"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:view="clr-namespace:BeeAnimationWPF.View"
        Title="Flying Bees WPF" Height="400" Width="600" WindowStartupLocation="CenterScreen" ResizeMode="CanResizeWithGrip">
    <!-- Background Color Attribute Set in the Grid: Window Background Becomes SkyBlue -->
    <Grid Background="SkyBlue">        
        <Canvas Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" Margin="120,0,120,120">
            <view:AnimatedImage x:Name="firstBee" Canvas.Left="55" Canvas.Top="40" Width="50" Height="50" />
            <view:AnimatedImage x:Name="secondBee" Canvas.Left="80" Canvas.Top="260" Width="200" Height="200" />
            <view:AnimatedImage x:Name="thirdBee" Canvas.Left="230" Canvas.Top="100" Width="300" Height="125" />
        </Canvas>
    </Grid>
</Window>


Posted Image

This is also the case at design time, and not just at runtime, as shown with the screen shot with Visual Studio 2012.

Posted Image

I'm not 100% sure, but is this something I overlooked with the book's and WPF PDF addendum's code? Based on the following extract from Panels Overview at MSDN, http://msdn.microsof...754152(v=vs.110).aspx, in the Panel Common Members section:

Panel exposes additional properties that are of critical importance in understanding and using layout. The Background property is used to fill the area between the boundaries of a derived panel element with a Brush. Children represents the child collection of elements that the Panel is comprised of. InternalChildren represents the content of the Children collection plus those members generated by data binding. Both consist of a UIElementCollection of child elements hosted within the parent Panel.

it seems to me that since the Canvas Panel content control is a child of the Grid Panel content control, the Background color attribute has to be set and can only be set in the Parent, the Grid Panel, in order for the background to be SkyBlue. Is my understanding of this correct?

Any explanation or insights on this would be greatly appreciated.

Thank you.
0

#2 User is offline   AndrewStellman 

  • Andrew Stellman
  • PipPipPipPipPipPipPipPipPipPipPip
  • Group: O'Reilly Author
  • Posts: 738
  • Joined: 08-October 08
  • Gender:Male
  • Location:Brooklyn, NY
  • Interests:Author of: "Head First C#", "Beautiful Teams", "Head First PMP", "Applied Software Project Management"

Posted 24 February 2014 - 07:18 AM

No, it's much simpler than that. Here's your <Canvas> tag:

<Canvas Grid.Row="0" Grid.Column="0" Background="SkyBlue" HorizontalAlignment="Left" Margin="120,0,120,120">


Try removing the HorizontalAlignment property. You should see the canvas in the middle of the window with 120 pixel margins. Remove the Margin property to get it to fill the window. You can also remove Grid.Row and Grid.Column, because they default to zero. Here's what it looks like now:

<Canvas Background="SkyBlue">


The MSDN page for the WPF Canvas control has an explanation:

http://msdn.microsof...(v=vs.110).aspx

Quote

Canvas is the only panel element that has no inherent layout characteristics. A Canvas has default Height and Width properties of zero, unless it is the child of an element that automatically sizes its child elements. Child elements of a Canvas are never resized, they are just positioned at their designated coordinates. This provides flexibility for situations in which inherent sizing constraints or alignment are not needed or wanted.


Dropping the Canvas control into a Grid cell causes it to fill up the cell, but setting the alignment tells it to use its Width and Height properties, which default to zero.

I hope this helps!

Andrew



Andrew Stellman
Author, Head First C#
Building Better Software -- http://www.stellman-greene.com
0

#3 User is offline   ClockEndGooner 

  • New Member
  • Pip
  • Group: Members
  • Posts: 8
  • Joined: 28-November 13

Posted 25 February 2014 - 07:09 PM

Andrew;

Thank you for the follow-up, and like the overall approach in the book, you're spot on! And the MSDN excerpt on the <Canvas> element's lack of inherent sizing and layout characteristics really helped.

Now, I do have a follow-up question with regards to the XAML for the Widnows 8 Store Application.

From the third edition on page 790, the Windows 8 Store Application code for the first pass at the Flying Bees application is as follows:

<Canvas Grid.Row="1" Background="SkyBlue" Width="600" HorizontalAlignment="Left" Margin="120,0,120,120">
    <view:AnimatedImage Canvas.Left="55" Canvas.Top="40" x:Name="firstBee" Width="50" Height="50"/>
    <view:AnimatedImage Canvas.Left="80" Canvas.Top="260" x:Name="secondBee" Width="200" Height="200"/>
    <view:AnimatedImage Canvas.Left="230" Canvas.Top="100" x:Name="thirdBee" Width="300" Height="125"/>
</Canvas>



Hopefully, this doesn't seem too particular, but I was trying to test and stretch my limited knowledge of XAML and WPF by "backporting" the Windows 8 code for the Flying Bees for a Windows 7 C# XAML based application without relying on the "WPF Learner's Guide", and tried to use the Windows 8 code as a baseline. I was under, and apparently, wrong impression, that the basic layout characteristics of panel or container controls in XAML for Windows WPF desktop applications and Windows Store Applications were essentially the same. If that is the case, why does the <Canvas> element have the HorizontalAlignment attribute set to "Left" where the WPF Desktop application XAML's <Canvas> element doesn't? Is there a fundamental difference between container or panel controls in Windows Store applications when compared to Windows Desktop applications?

Again, many thanks for your time, help, patience and explanations. I really appreciate it.

This post has been edited by ClockEndGooner: 25 February 2014 - 07:10 PM

0

#4 User is offline   AndrewStellman 

  • Andrew Stellman
  • PipPipPipPipPipPipPipPipPipPipPip
  • Group: O'Reilly Author
  • Posts: 738
  • Joined: 08-October 08
  • Gender:Male
  • Location:Brooklyn, NY
  • Interests:Author of: "Head First C#", "Beautiful Teams", "Head First PMP", "Applied Software Project Management"

Posted 27 February 2014 - 06:09 AM

First of all, that is a fantastic way to use this book, and exactly how I hoped readers would use these projects for experimentation and learning. Nice!

Second, yes, your initial assumption was incorrect -- the characteristics of various controls in Windows Store can be different than in WPF. Hopefully they're mostly improvements. :) But you definitely cannot make that assumption.

The reason I left the HorizontalAlignment and Margin properties on that Canvas was that it's meant to be in the top-level grid, under row with the back button and title. That's why Grid.Row="1" on page 790. You're right that if you put it in its own one-cell grid like in your XAML, you'd want to remove the HorizontalAlignment and Margin properties.
Andrew Stellman
Author, Head First C#
Building Better Software -- http://www.stellman-greene.com
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users