Dan-

I'm new to SilverLight but progressing well.  I've downloaded your Main Menu control and it looks fine in your demo, which has a blank canvas.  It compiles fine in my program but doesn't display.  I've read about the ZIndex but that didn't appear to work.  Here's my XAML file.  What am I missing here?  I'm trying to display the usercontrol on a canvas in Grid.Row = "1"  The remaining controls display fine, but not the MainMenu.

Thanks,

Robert

-----------------------------------------------------------------------------------------

<UserControl x:Class="IT_Pathways_SL.MainPage"

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

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

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    xmlns:liquidMenu="clr-namespace:Liquid;assembly=Liquid.Menu"

    mc:Ignorable="d"

    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot">

        <Grid.RowDefinitions>

            <RowDefinition Height="240"/>

            <RowDefinition Height="30"/>

            <RowDefinition Height="180"/>

            <RowDefinition Height="30"/>

            <RowDefinition Height="240"/>

            <RowDefinition Height="120"/>

        </Grid.RowDefinitions>

        <Image  Grid.Row="0" HorizontalAlignment="Left" Name="image1" Stretch="UniformToFill" VerticalAlignment="Top" Source="images/photo-poster.jpg"/>

        <Canvas Grid.Row="1">

            <liquidMenu:MainMenu x:Name="MyMenu" Visibility="Visible" Canvas.ZIndex="10"/>

        </Canvas>

        <Border Grid.Row="2" BorderThickness="1" BorderBrush="#ff5c7590" Background="Transparent" CornerRadius="10" Margin="10,10,10,10">

            <Border Margin="10,10,10,10" Background="Transparent">

        <StackPanel HorizontalAlignment="Left">

                     <TextBlock Style="{StaticResource ListOfItems}">If you are a senior executive in your organization, chances are you are facing one or more of these challenges.</TextBlock>

            <ListBox HorizontalAlignment="Left" Name="lbChallenges" Background="Transparent" BorderThickness="0" ScrollViewer.HorizontalScrollBarVisibility="Disabled">

                <ListBox.ItemTemplate>

                    <DataTemplate>

                        <StackPanel HorizontalAlignment="Left">

                            <Grid>

                                <Grid.ColumnDefinitions>

                                    <ColumnDefinition Width="10"/>

                                    <ColumnDefinition Width="*"/>

                                </Grid.ColumnDefinitions>

                                <TextBlock Grid.Column="0" Text="• " Style="{StaticResource ListOfItems}"></TextBlock>

                                <TextBlock Grid.Column="1" Text="{Binding}" Style="{StaticResource ListOfItems}"></TextBlock>

                            </Grid>

                        </StackPanel>

                    </DataTemplate>

                </ListBox.ItemTemplate>

            </ListBox>

        </StackPanel>

            </Border>

        </Border>

        <Border Grid.Row="4" BorderThickness="1" BorderBrush="#ff5c7590" Background="Transparent" CornerRadius="10" Margin="10,10,10,10">

            <Border Margin="10,10,10,10" Background="Transparent">

            <StackPanel HorizontalAlignment="Left">

                <TextBlock Style="{StaticResource ListOfItems}">If you are experiencing challenges in these areas, it may be due to a lack of:</TextBlock>

                <ListBox HorizontalAlignment="Left" Name="lbReasons" Background="Transparent" BorderThickness="0" ScrollViewer.HorizontalScrollBarVisibility="Disabled">

                    <ListBox.ItemTemplate>

                        <DataTemplate>

                            <StackPanel HorizontalAlignment="Left">

                                <Grid>

                                    <Grid.ColumnDefinitions>

                                        <ColumnDefinition Width="10"/>

                                        <ColumnDefinition Width="*"/>

                                    </Grid.ColumnDefinitions>

                                    <TextBlock Grid.Column="0" Text="• " Style="{StaticResource ListOfItems}"></TextBlock>

                                    <TextBlock Grid.Column="1" Text="{Binding}" Style="{StaticResource ListOfItems}"></TextBlock>

                                </Grid>

                            </StackPanel>

                        </DataTemplate>

                    </ListBox.ItemTemplate>

                </ListBox>

            </StackPanel>

            </Border>

        </Border>

    </Grid>

</UserControl>

Hi,

Firstly your MainMenu object is empty, i.e. it needs a collection of MainMenuItem objects before anything will be visible.  Please see the demo for how to add these.

Secondly, anything placed into a grid is clipped to the size of the row/column specified, I would recommend you add your canvas containing the menu after all your content that you expect to appear under your menu.  You can of course specify a Z-Index and order them as you like.

Here is some sample code that should work in your code, it will need to be added after your 2nd Border element and of course the RowSpan adjusted accordingly.

<Canvas Grid.Row="1" Grid.RowSpan="5" VerticalAlignment="Top" HorizontalAlignment="Left">

    <liquidMenu:MainMenu x:Name="MyMenu" Visibility="Visible">

        <liquidMenu:MainMenu.Items>

            <liquidMenu:MainMenuItem Text="Menu 1">

                <liquidMenu:Menu>

                    <liquidMenu:MenuItem ID="item11" Text="Item 1" />

                    <liquidMenu:MenuDivider />

                    <liquidMenu:MenuItem ID="item12" Shortcut="Ctrl+S" Text="Item 2" />

                    <liquidMenu:MenuDivider />

                    <liquidMenu:MenuItem ID="item13" Text="Item 3" />

                </liquidMenu:Menu>

            </liquidMenu:MainMenuItem>

        </liquidMenu:MainMenu.Items>

    </liquidMenu:MainMenu>

</Canvas>

Thanks!

Thanks Dan, both a quick response and it worked... the menu item and submenus are displayed.  Still didn't understand about your recommendation to "add your canvas containing the menu after all your content that you expect to appear under your menu."  So my canvas with the menu should be inside the existing Grid control with a Grid.Row specified but after the other controls, or after my main Grid control itself.  I guess it's Silverlight layout that is still causing me some pain with menus.

Any direction here would be appreciated.

Robert

Well I guess I've fixed the layout, at least with my current design.  So thanks for your great help and advice.

Now I'm implementing some functionality for the menu.  Here's the line from my XAML and my eventhandler.  When I set breakpoints on the eventhandler they are never hit but other breakpoints for other code are.  It's got to be something simple.

        <liquidMenu:MainMenu x:Name="MyMainMenu" Visibility="Visible" ItemSelected="MyMainMenu_ItemSelected">

        private void MyMainMenu_ItemSelected(object sender, MenuEventArgs e)

        {

            switch (e.Tag.ToString())

            {

                case "Home":

                    // TODO: New functionality

                    break;

                case "Services":

                    // TODO: Save functionality

                    break;

            }

        }

Hi Robert,

Is that your complete line of XAML?  Or are you populating the menu items in code?  The ItemSelected even is fired when a menu item is clicked, in the example I have given above e.Tag.ToString() will equal "item11" when Item 11 is clicked.

Without your full XAML I cannot test your specifi menu items.

Thanks!

how to assogn a image to a menu.

how to assign a image to a menu icon.

Hi,

To assign an image to a menu icon in XAML:

Icon="images/document.png"

Is all you need.  The image of course needs to be included in your project as a resource.

Thanks!