Home > Silverlight > Silverlight – Visibility.Collapsed

Silverlight – Visibility.Collapsed

As I am a creative guy as well as a developer, I like to play around with nice and shiny tools that let me do lot’s of cool stuff on top of the SharePoint platform. I’ve been playing around with Silverlight for quite some time now and I’ve created a drag and droppable grid (more info on that in a later post). The problem that seems to arise is when I create two different canvas items (big container items) and use them at the exact same location, they do not work properly. I’ve created a detail view and an edit view of items in my grid. When I click on the edit or view icon of an item I get a popup dispaying the edit window or the view window. So, the different scenarios:

Start application, click on edit, add some info, click on save, it works.
Start application, click on view, close the view, it works.
Start application, click on edit, add some info, save it, click on view, close the view, it works
Start application, click on view, close the view, click on edit, add some info, click on save, IT DOES NOT WORK

Rather weird. So what is exactly happening? And why doesn’t it work?

The popup windows are 2 canvas area’s, at the exact same location, with 2 buttons at the exact same location. Depending on wether we are in the list view (both hidden), edit screen(view hidden), view screen(edit hidden) one of the popups or both are hidden. When I launch the applcation, both are hidden. But they are hidden ABOVE each other, so the view canvas lies above the edit canvas. This means that when I use my Visibility.Collapsed on the view canvas through code, it isn’t hidden proporly. So when I open my edit canvas, it does show, but the button of the view canvas is lying ON TOP of my edit button. Clicking the edit button is doing nothing and it seems as if the application is frozen (the hover over animation of the button no longer works either)

Solution : Make it invisible AND move it away.
I added a transform action to my canvas: 

    <TranslateTransform x:Name=”DetailTransForm” X=”0″ Y=”0″ />

Then I added a simple

        private void ShowDetail()
            //this.DetailBorder.Visibility = Visibility.Visible;
            //this.DetailInfo.Visibility = Visibility.Visible;
            this.DetailTransForm.X = 0;
        private void HideDetail()
            //this.DetailInfo.Visibility = Visibility.Collapsed;
            //this.DetailBorder.Visibility = Visibility.Collapsed;
            this.DetailTransForm.X = 1000;

to make sure my detailform moved out of the way. And both buttons are now working just as intended. Agreed, not the most beautiful solution, but for now it’ll have to do. Notice the // before the Visibility stuff. For some reason, and that I haven’t figured out yet, when I put them on Invisible they return to their starting position. So you really need to move the objects out of the grid to hide them.

Categories: Silverlight Tags:
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: