CODEWITHSUNDEEP
wpfxamlmahapps.metro
Biswajit Chopdar
Biswajit Chopdar

Reputation: 871

How to use icon in mahapps hamburger menu XAML

How do I use Entypo icon in mahapps hamburger menu? I've tried many ways but nothing works. Below is my xaml code:

<controls:HamburgerMenu.ItemsSource>
   <controls:HamburgerMenuItemCollection>
      <controls:HamburgerMenuIconItem Icon="{iconPacks:PackIconEntypo Kind=Users}" Label="Accounts">
         <controls:HamburgerMenuIconItem.Tag>
             <views:AccountsView/>
         </controls:HamburgerMenuIconItem.Tag>
      </controls:HamburgerMenuIconItem>
   </controls:HamburgerMenuItemCollection>
</controls:HamburgerMenu.ItemsSource>

Upvotes: 0

Views: 5622

Answers (2)

Suplanus
Suplanus

Reputation: 1601

Here is a full example with DataTemplate & ItemSource:

<mah:HamburgerMenu
    ItemTemplate="{StaticResource MenuItemTemplate}"
    OptionsItemTemplate="{StaticResource MenuItemTemplate}">

    <!--  Content  -->
    <mah:HamburgerMenu.ContentTemplate>
        <DataTemplate DataType="{x:Type mah:HamburgerMenuItem}">
            <Grid>
                <ContentControl
                    Content="{Binding Tag}"
                    Focusable="False"
                    Foreground="Black" />
            </Grid>
        </DataTemplate>
    </mah:HamburgerMenu.ContentTemplate>

    <!--  Options  -->
    <mah:HamburgerMenu.OptionsItemsSource>
        <mah:HamburgerMenuItemCollection>
            <mah:HamburgerMenuIconItem Label="Option 1">
                <mah:HamburgerMenuIconItem.Icon>
                    <iconPacks:PackIconMaterial Kind="EmoticonCool" VerticalAlignment="Center" HorizontalAlignment="Center" />
                </mah:HamburgerMenuIconItem.Icon>
                <mah:HamburgerMenuIconItem.Tag>
                    <TextBlock>Option 1</TextBlockl>
                </mah:HamburgerMenuIconItem.Tag>
            </mah:HamburgerMenuIconItem>
        </mah:HamburgerMenuItemCollection>
    </mah:HamburgerMenu.OptionsItemsSource>

    <!--  Items  -->
    <mah:HamburgerMenu.ItemsSource>
        <mah:HamburgerMenuItemCollection>
            <mah:HamburgerMenuIconItem Label="Item 1">
                <mah:HamburgerMenuIconItem.Icon>
                    <iconPacks:PackIconMaterial Kind="EmoticonCool" VerticalAlignment="Center" HorizontalAlignment="Center" />
                </mah:HamburgerMenuIconItem.Icon>
                <mah:HamburgerMenuIconItem.Tag>
                    <TextBlock>Item 1</TextBlockl>
                </mah:HamburgerMenuIconItem.Tag>
            </mah:HamburgerMenuIconItem>
        </mah:HamburgerMenuItemCollection>
    </mah:HamburgerMenu.ItemsSource>
</mah:HamburgerMenu>

Upvotes: 0

Daniele Sartori
Daniele Sartori

Reputation: 1703

You need to define a datatemplate :

<DataTemplate x:Key="MenuItemTemplate" DataType="{x:Type controls:HamburgerMenuIconItem}">
   <Grid Height="64">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="64" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
   <Grid Grid.Column="0">
        <Viewbox ToolTip="{Binding Label}" Width="32" Height="32" >
            <Viewbox.Child>
                <ContentControl Content="{Binding Path=Icon}"></ContentControl>
             </Viewbox.Child>
        </Viewbox>
    </Grid>
    <TextBlock Grid.Column="1"
               VerticalAlignment="Center"
               FontSize="16"
               Foreground="White"
               Text="{Binding Label}" />
        </Grid>
</DataTemplate>

Then apply this datatemplate setting this property in your HamburgerMenu

ItemTemplate="{StaticResource MenuItemTemplate}"

Please mind that the widths and heights defined in the datatemplate can be modified to fit your menù size. You can define your own datatemplate, but you need to tell your application where how to display the Icon

Upvotes: 5

Related Questions