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″ />
</Canvas.RenderTransform>
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.
Image may be NSFW.
Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
