Question

I’m trying to replace a Silverlight 2-era third-party menubar control in our Silverlight application with this one, after upgrading to VS2010 and Silverlight 4 broke the third-party control and the vendor informed me that the version we bought won’t work on Silverlight 4. I’ve managed to replace all of the other controls of theirs that we were using with standard ones, but there’s no standard Silverlight menu control. I thought it would be fairly straightforward to replace, but apparently my XAML skills aren’t up to the task (note: I didn’t write the application myself, I’ve inherited it).

The Silverlight application consists of a Windows application-style top menubar for navigation, and a content pane. The menu should display its drop-downs overlapping the content (as it would be displayed over your code in VS, for example).

The problem that I have is that if I put the menu and content in different cells of one grid, the menu is cropped to within its grid cell (so that the drop-down menu is not shown when clicked), but if I add a canvas with 2 grids having different z-indexes I can get the menu to display properly (overlapping the content), but the application does not resize to fit the browser window.

i.e. the menu is cropped if I lay it out like this (this is simplified XAML to try to explain what I mean, I’ve tried not to exclude any important attributes, but might have):

<Grid x:Name="LayoutRoot">
    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <slm:SLMenu Grid.Row="0" Grid.Column="0"/>
        <StackPanel x:name="Content" Grid.Row="1" Grid.Column="0" />
    </Grid>
</Grid>

and if I lay it out like this the menu is fine but the control does not fill the window (adding background colours indicates that the canvas stretches to fill the grid, but its sub-grids don’t fill it, but the grid containing the menu control will resize to contain the menu control when it is displaying a drop-down):

<Grid x:Name="LayoutRoot">
    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
        <Canvas>
            <Grid Canvas.ZIndex="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <!-- define grid with 2 rows, one the height of the menu -->
                <slm:SLMenu Grid.Row="0" Grid.Column="0" />
            </Grid>
            <Grid Canvas.ZIndex="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <!-- define grid with 2 rows, one the height of the menu -->
                <StackPanel x:name="Content" Grid.Row="1" Grid.Column="0" />
            </Grid>
    </Grid>
</Grid>

I would much prefer to fix it with the first layout, as this is how it was done before. I’ve tried setting Z-index values on the menu control itself, but nothing I do seems to allow it to escape the bounds of the grid cell.

The third-party control had no issues with overlapping its grid cell, so what am I doing wrong with this one?

The CodeProject article where this new menu control is published seems to have unanswered questions, so I thought I’d try here first.

Answer 1

The menu control works perfectly when it is just in the LayoutRoot grid, trying to position it inside a sub-grid was what caused the problem.