locked
How to correctly make the chevron (~down arrow) that indicates a header menu

    Question

  • Hi all,

    Headers which popup a header menu to navigate to different sections are supposed to have a chevron beside them (sort of: v), indicating a tap will bring up the header menu flyout. (Eg http://msdn.microsoft.com/en-US/library/windows/apps/hh761500#header_menu_and_section_labels)

    In XAML, what's the recommended way to get the exact right chevron glyph? I presume it's one of the glyphs from 'Segoe UI Symbols'. But there's about 6 different downward-pointing chevrons in there. (OK, some of them are obviously not the one.)

    Does anyone know exactly which character to use? (And correct size and spacing?) Or if there is another way to do this which I am missing (XAML)?

    Cheers,
    Shane

    Tuesday, August 7, 2012 8:39 AM

Answers

  • Take a look at the DropDownGlyph in the ComboBox template in \Program Files (x86)\Windows Kits\8.0\Include\winrt\xaml\design\generic.xaml :

                            <TextBlock x:Name="DropDownGlyph"
                                       Text="&#57361;"
                                       Grid.Column="1"
                                       IsHitTestVisible="False"
                                       Margin="0,0,6,4"
                                       Foreground="{StaticResource ComboBoxArrowForegroundThemeBrush}"
                                       FontWeight="Bold"
                                       FontSize="{StaticResource ComboBoxArrowThemeFontSize}"
                                       FontFamily="{StaticResource SymbolThemeFontFamily}"
                                       HorizontalAlignment="Right"
                                       VerticalAlignment="Center" />

    The standard control templates are all available in that file and are the definitive way to find out how to do something like a standard control. You can also get individual controls in the designer (VS or Blend) by selecting an item and then choosing "Edit Template" from the context menu.

    --Rob



    • Marked as answer by ShaneMorris Wednesday, August 8, 2012 6:01 AM
    Wednesday, August 8, 2012 4:50 AM
    Moderator

All replies

  • Take a look at the DropDownGlyph in the ComboBox template in \Program Files (x86)\Windows Kits\8.0\Include\winrt\xaml\design\generic.xaml :

                            <TextBlock x:Name="DropDownGlyph"
                                       Text="&#57361;"
                                       Grid.Column="1"
                                       IsHitTestVisible="False"
                                       Margin="0,0,6,4"
                                       Foreground="{StaticResource ComboBoxArrowForegroundThemeBrush}"
                                       FontWeight="Bold"
                                       FontSize="{StaticResource ComboBoxArrowThemeFontSize}"
                                       FontFamily="{StaticResource SymbolThemeFontFamily}"
                                       HorizontalAlignment="Right"
                                       VerticalAlignment="Center" />

    The standard control templates are all available in that file and are the definitive way to find out how to do something like a standard control. You can also get individual controls in the designer (VS or Blend) by selecting an item and then choosing "Edit Template" from the context menu.

    --Rob



    • Marked as answer by ShaneMorris Wednesday, August 8, 2012 6:01 AM
    Wednesday, August 8, 2012 4:50 AM
    Moderator
  • Thanks Rob,

    just didn't occur to me to copy what's in ComboBox. D'oh.

    Shane

    Wednesday, August 8, 2012 6:03 AM
  • Hi guys,

    Do you know how to do the opposite i.e. upwards chevron?

    Cheers, Riussi

    Monday, August 13, 2012 11:33 AM
  • If you look in charmap for the down chevron at U+E011 you'll see an up chevron next to it at U+E010:

    Monday, August 13, 2012 4:31 PM
    Moderator