Microsoft Silverlight

Member

36 points

Silverlight 2: Canvas visibility change not applied until user moves mouse over controls

03-07-2008 7:59 AM |

Symptom:

A canvas has visibility changed from Visibilty.Collapsed to Visibilty.Visible but controls inside the canvas don't appear until mouse hovers over them.

Steps to repro:

1. Create a Silverlight 2 app

2. Change the Page XAML to look like this (either manually or in Blend)

<UserControl x:Class="SilverlightApplication3.Page"

xmlns="http://schemas.microsoft.com/client/2007"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="400" Height="300">

</Canvas>

</UserControl>

3. Change the Visibility of cnvTest on clicking the button

public Page()

{

InitializeComponent();

btnTest.Click += new RoutedEventHandler(btnTest_Click);

}

void btnTest_Click(object sender, RoutedEventArgs e)

{

cnvTest.Visibility = Visibility.Visible;

}

Expected the button in the canvas to be shown as soon as the canvas is made visible.

Dave Relyea

Participant

1084 points

249 Posts

Re: Silverlight 2: Canvas visibility change not applied until user moves mouse over controls

03-09-2008 11:59 AM |

Yup. Looks like a bug in Button. (If the second Button is a TextBlock, it appears right away.)

Thanks for reporting this.

Dave Relyea [MSFT]
http://blogs.msdn.com/devdave

Member

36 points

Re: Silverlight 2: Canvas visibility change not applied until user moves mouse over controls

03-09-2008 6:36 PM |

Thanks. I guess that's answered.

Member

36 points

Re: Silverlight 2: Canvas visibility change not applied until user moves mouse over controls

03-10-2008 8:38 AM |

Further investigation shows it's anything derived from control.

UserControls, Buttons, Textboxes none of them work.

You're right about TextBlock working.

I think that this is pretty serious.

Member

36 points

Re: Silverlight 2: Canvas visibility change not applied until user moves mouse over controls

03-10-2008 9:31 AM |

The workarounds we've found:

1. Set the initial visibility of the canvas to hide to Visible - set the visibility to Collapsed in the first SizeChanged event

2. Explicitly set the Visibility of the control in the canvas to Visible (even though it already is visible)

3. Use Grid or StackPanel as the container (these both work)

Dave Relyea

Participant

1084 points

249 Posts

Re: Silverlight 2: Canvas visibility change not applied until user moves mouse over controls

03-10-2008 10:21 AM |

Thanks for drilling in further. We'll definitely take a look.

Dave Relyea [MSFT]
http://blogs.msdn.com/devdave

Member

354 points

Re: Silverlight 2: Canvas visibility change not applied until user moves mouse over controls

03-10-2008 11:32 PM |

I'd like to add one comment on this.

I have problem with Canvas object that doesn’t fire SizeChanged event when I change it’s Width or Height, however when I mouse over a button, then it suddenly fires SizeChanged event. This makes my custom layout very difficult at this time.

This seems to happen when I have nested Canvas objects with StackPanel or Grid, though I couldn’t find out the pattern of this problem yet. Still doing some testing on this

(It's may not be the same problem but I just thought problem may be in Cavas (or layout system) rather than the button)

Member

354 points

(Canvas problem) Re: Silverlight 2: Canvas visibility change not applied until user moves mouse over controls

03-11-2008 9:49 AM |

Hi Davd Relyea again,

Like you suggested in another post, I am porting my code to use two-pass layout system by deriving Panel class, or try to use default layout containers as much as I can. However I still need many portion of my code using Canvas as they rely on x-y coordinates and items are depending on the size of Canvas (perhabs I should inherit Canvas and use OverrideArrange to see what size is coming along?). I am just trying to mix all layout methods I can.

Problem 1: I was testing Canvas objects again and again and realized that Canvas itself doesn’t appear if it contains any layout elements in it. Very much similar to AdamJTP’s problem

Problem 2: When I have nested SizeChange events as I have nested Canvases. It only seem to fire SizeChanged event for first few Canvases. May be I am doing something wrong here, your advice would be greatly appriciated.

I just wish to make my application up and running again soon. Below is my test program

Thanks a lot for your help

App.xaml.cs

public partial class App : Application

{
private Page root;

public App()
{

            this.Startup += this.Application_Startup;
            this.Host.Content.Resized += new EventHandler(Content_Resized);
            InitializeComponent();
      }

private void Application_Startup(object sender, StartupEventArgs e)
{

          this.root = new Page();
          this.RootVisual = this.root;
      }

       void Content_Resized(object sender, EventArgs e)
      {
         System.Diagnostics.Debug.WriteLine(string.Format("Host Size {0} {1}", this.Host.Content.ActualWidth, this.Host.Content.ActualHeight));
         this.root.Width = this.Host.Content.ActualWidth;
         this.root.Height = this.Host.Content.ActualHeight;
       }

}

Page.xaml.   Uncomment two layout elements to see the effect for the problem 1. Green color should never display but it does.

<UserControl x:Class="CanvasTest.Page"
xmlns=http://schemas.microsoft.com/client/2007
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="500" Height="500">
<Canvas x:Name="topCanvas" Background="Green">
      <Canvas x:Name="leftCanvas" Background="Red">
           <Canvas x:Name="leftCanvasChild" Background="Blue">
                 
           </Canvas>
     </Canvas>
     <Canvas x:Name="rightCanvas" Background="Magenta">
           <Canvas x:Name="rightCanvasChild" Background="Cyan">
                
          </Canvas>
     </Canvas>
</Canvas>
</UserControl>

Page.xaml.cs

public partial class Page : UserControl
{

      public Page()
      {
          InitializeComponent();
          this.SizeChanged += new SizeChangedEventHandler(OnPageSizeChanged);
          this.topCanvas.SizeChanged += new SizeChangedEventHandler(topCanvas_SizeChanged);
          this.leftCanvas.SizeChanged += new SizeChangedEventHandler(leftCanvasSizeChanged);
          this.rightCanvas.SizeChanged += new SizeChangedEventHandler(rightCanvas_SizeChanged);
      }      private void OnPageSizeChanged(object sender, SizeChangedEventArgs e)
      {
          System.Diagnostics.Debug.WriteLine("Page Size {0},{1}", e.NewSize.Width, e.NewSize.Height);
          this.topCanvas.Width = e.NewSize.Width;
          this.topCanvas.Height = e.NewSize.Height;

}

void topCanvas_SizeChanged(object sender, SizeChangedEventArgs e)

{
        System.Diagnostics.Debug.WriteLine("TopCanvas Size {0},{1}", e.NewSize.Width, e.NewSize.Height);
        this.leftCanvas.Width = e.NewSize.Width / 2;
        this.leftCanvas.Height = e.NewSize.Height;
        Canvas.SetLeft(this.rightCanvas, e.NewSize.Width / 2);
         this.rightCanvas.Width = e.NewSize.Width / 2;
       this.rightCanvas.Height = e.NewSize.Height;

//Desired effect for the leftCanvasChild and rightCanvasChild.
//this.leftCanvasChild.Width = e.NewSize.Width / 4;
//this.leftCanvasChild.Height = e.NewSize.Height;
//this.rightCanvasChild.Width = e.NewSize.Width / 4;
//this.rightCanvasChild.Height = e.NewSize.Height;

}

void leftCanvasSizeChanged(object sender, SizeChangedEventArgs e)
{//this never gets called
System.Diagnostics.Debug.WriteLine("LeftCanvas Size {0},{1}", e.NewSize.Width, e.NewSize.Height);
this.leftCanvasChild.Width = e.NewSize.Width / 2;
this.leftCanvasChild.Height = e.NewSize.Height;

}

void rightCanvas_SizeChanged(object sender, SizeChangedEventArgs e)

{

//never reach here.
System.Diagnostics.Debug.WriteLine("RightCanvas Size {0},{1}", e.NewSize.Width, e.NewSize.Height);
this.rightCanvasChild.Width = e.NewSize.Width / 2;
this.rightCanvasChild.Height = e.NewSize.Height;

}

Member

354 points

Re: (Canvas problem) Re: Silverlight 2: Canvas visibility change not applied until user moves mouse over controls

03-11-2008 10:01 AM |

Sorry for the mess, it lost all format. I manually formatted code again. thanks

Member

354 points