Sub Menue width

5 posts, 2 answers
  1. Abdulhameed
    Abdulhameed avatar
    27 posts
    Member since:
    Jul 2010

    Posted 30 Jul 2011 Link to this post

    I would like to have a fixed width for the sub menu.
    I tried to use style\template but I couldn't.

    Please advise.
  2. Answer
    Dani
    Admin
    Dani avatar
    848 posts

    Posted 01 Aug 2011 Link to this post

    Hi Abdulhameed,

    You need to modify the TopLevelHeaderTemplate. You can obtain that by generating the ItemContainerStyle in Expression Blend. In the TopLevelHeaderTemplate, change the width of the Grid that is contained in the PopUp element:

    <telerik:Popup x:Name="PART_Popup" HorizontalOffset="-1" VerticalOffset="-1">
                    <!-- NOTE: change Width of PopUp-->
                    <Grid  Width="100">
                        <Grid x:Name="PopupContentElement" Margin="0 0 3 3">
                            <Telerik_Windows_Controls_Chromes:ShadowChrome telerik:StyleManager.Theme="{StaticResource Theme}"/>
                            <Border BorderBrush="{StaticResource MenuPopupOuterBorder}" BorderThickness="1" Background="{StaticResource MenuPopupBackground}">
                                <Grid>
                                    <Grid HorizontalAlignment="Left" Width="{Binding Menu.IconColumnWidth, RelativeSource={RelativeSource TemplatedParent}}">
                                        <Rectangle Fill="{StaticResource MenuPopupIconsBackground}" Margin="0 0 2 0"/>
                                        <Grid HorizontalAlignment="Right" Margin="{StaticResource MenuPopupIconsSeparatorMargin}">
                                            <Rectangle Fill="{StaticResource MenuPopupIconsSeparatorLeft}" HorizontalAlignment="Right" Margin="0 0 1 0" Width="1"/>
                                            <Rectangle Fill="{StaticResource MenuPopupIconsSeparatorRight}" HorizontalAlignment="Right" Margin="0 0 0 0" Width="1"/>
                                        </Grid>
                                    </Grid>
                                    <ItemsPresenter Margin="1"/>
                                </Grid>
                            </Border>
                        </Grid>
                    </Grid>
                </telerik:Popup>

    If you need to apply the same change for the deeper level of RadMenuItems, you also need to modify the SubMenuHeaderTemplate in the same way.

    I hope this helps.

    Greetings,
    Dani
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>
  3. DevCraft banner
  4. Abdulhameed
    Abdulhameed avatar
    27 posts
    Member since:
    Jul 2010

    Posted 07 Aug 2011 Link to this post

    I tried it but it didn't work,
    Acutaly for the top level header it worked when I set the ContentGrid width. but for the sub menu it did not work at all.

    Please advise?
  5. Answer
    Dani
    Admin
    Dani avatar
    848 posts

    Posted 08 Aug 2011 Link to this post

    Hi Abdulhameed,

    Attached is a working sample project demonstrating the suggested approach. Search for "NOTE" to check the modified spots. Also, notice how the ItemContainerStyle attached property is applied.

    I hope this helps.

    All the best,
    Dani
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>
  6. Abdulhameed
    Abdulhameed avatar
    27 posts
    Member since:
    Jul 2010

    Posted 08 Aug 2011 Link to this post

    Many Thanks.
Back to Top
DevCraft banner