Search code examples
c#wpficonsmahapps.metro

Align icon in the DropDownButton (MahApps.Metro)


The icon is not aligned by default in the DropDownButton. How can I horizontally align the icon?

I am using MahApps.Metro v1.6.5 and MahApps.Metro.IconPacks v2.3.0.

I have tried to set Padding, HorizontalAlignment and VerticalAlignment for the button, but it didn't solve the problem.

<controls:DropDownButton ArrowVisibility="Hidden" ItemsSource="{Binding MenuItems}" BorderThickness="0" Focusable="False">
    <controls:DropDownButton.Icon>
        <iconPacks:PackIconEntypo Kind="Menu" VerticalAlignment="Center" HorizontalAlignment="Center" />
    </controls:DropDownButton.Icon>
</controls:DropDownButton>

Screenshot: https://i.ibb.co/4NhXZ8S/Untitled.png

I am trying to align the icon inside DropDownButton, but can't remove the padding (you can see it on the screenshot).


Solution

  • Okay, I found the problem. It was arrow, which is visible by default: https://i.ibb.co/CQmZn3p/Screenshot-22.png

    It occupies the space for itself even if it is hidden (ArrowVisibility="Hidden"). In this case ArrowVisibility="Collapsed" should be used instead, it solves the problem.