Forums Retired Products and Controls
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
venkateswarlu
80
Horizontal XamMenu Data binding with HierarchicalData
posted

Hi ,

I want to Display XamMenu horizontally with HierarchicalData as datasource. It  should support

navigation also. the following code works fine but it is not diaplying horizontally. Please help me in this.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<

 

 

 

my:XamMenu.HierarchicalItemTemplate

>

 

 

 

 

<ig:HierarchicalDataTemplate ItemsSource="{Binding Path

=Children}">

 

 

 

 

 

<ig:HierarchicalDataTemplate.DefaultItemsContainer

>

 

 

 

 

<DataTemplate>

 

 

 

 

<my:XamMenuItem NavigationOnClick

="True"

 

 

 

NavigationUri="{Binding PageURL

}"

 

 

 

NavigationElement="{Binding ElementName=menuFrame}"

 

 

 

StaysOpenOnClick

="True">

 

 

 

 

<my:XamMenuItem.Header

>

 

 

 

 

<TextBlock Text="{Binding Name

}"/>

 

 

 

 

</my:XamMenuItem.Header>

 

 

 

 

</my:XamMenuItem>

 

 

 

 

 

</DataTemplate

>

 

 

 

 

</ig:HierarchicalDataTemplate.DefaultItemsContainer>

 

 

 

 

<DataTemplate

>

 

 

 

 

<StackPanel Orientation

="Horizontal">

 

 

 

 

<my:XamMenuItem Header="{Binding Name}" MenuOrientation="Horizontal" StaysOpenOnClick

="True">

 

 

 

 

 

</my:XamMenuItem

>

 

 

 

 

</StackPanel

>

 

 

 

 

 

</DataTemplate>

 

 

 

 

</ig:HierarchicalDataTemplate>

 

 

 

 

</my:XamMenu.HierarchicalItemTemplate

>

 

 

 

 

 

</my:XamMenu

>

Parents
No Data
Reply
  • 6475
    Verified Answer
    posted

    Hi,

    You shouldn't place a XamMenuItem in your ItemTemplate. A XamMenuItem will be created as a container for the DataTemplate you provide, which means you'll end up having XamMenuItem inside a XamMenuItem. So, you'll have a XamMenuItem with MenuOrientation set to "Horizontal" inside of another XamMenuItem, generated as a container to host the one you specified in your  DataTemplate. And the Parent one will have it's MenuOrientation set to the default value (which is Vertical). Instead, you could specify a DefaultItemsContainer, which will be used when generating the container items.

    So your code should look something like this:

     

            <ig:XamMenu x:Name="igMenu" Height="30" Margin="10" ItemsSource="{StaticResource data}">
            <ig:XamMenu.DefaultItemsContainer>
                <DataTemplate>
                    <ig:XamMenuItem MenuOrientation="Horizontal" />
                </DataTemplate>
            </ig:XamMenu.DefaultItemsContainer>
            
            <ig:XamMenu.HierarchicalItemTemplate>
                <ig:HierarchicalDataTemplate ItemsSource="{Binding Path=Children}">
                    <ig:HierarchicalDataTemplate.DefaultItemsContainer>
                        <DataTemplate>
                            <ig:XamMenuItem NavigationOnClick="True"
                                            MenuOrientation="Horizontal"
                                            NavigationUri="{Binding PageURL}"
                                            NavigationElement="{Binding ElementName=menuFrame}"
                                            StaysOpenOnClick="True">
                            </ig:XamMenuItem>
                        </DataTemplate>                      
                    </ig:HierarchicalDataTemplate.DefaultItemsContainer>
                    
                    <ig:HierarchicalDataTemplate.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Name}" />
                        </DataTemplate>
                    </ig:HierarchicalDataTemplate.ItemTemplate>                    
                    
                    <DataTemplate>
                        <TextBlock Text="{Binding Name}" />
                    </DataTemplate>
                </ig:HierarchicalDataTemplate>
            </ig:XamMenu.HierarchicalItemTemplate>
        </ig:XamMenu>

    Hope this helps,

Children