Clever Geek Handbook

Appbar button positioning items automatically UWP

I am working on a UWP app. I am using Appbar buttons to show icon quick buttons for actions. The problem is that the labels are automatically placed horizontally on the icon and some are still placed below the icon. Is there a way that they can be committed? Below is a picture for a clearer understanding of the problem:

Automatically aligns them horizontally

This is the worst of all

But ideally I want them to look below

Perfectly

Is there a way to make sure they (the icons and their corresponding labels) stay vertically aligned. Below is my code:

<AppBarButton Label="Share" Grid.Column="2" HorizontalAlignment="Center">
    <AppBarButton.Icon>
        <PathIcon HorizontalAlignment="Center" Data="ShareIconPathDataHere"/>
    </AppBarButton.Icon>
</AppBarButton>
<AppBarButton Label="Add to" Grid.Column="3" HorizontalAlignment="Center">
    <AppBarButton.Icon>
        <PathIcon HorizontalAlignment="Center" Data="AddToIconPathDataHere"/>
    </AppBarButton.Icon>
</AppBarButton>
<AppBarButton Label="Report" Grid.Column="4" HorizontalAlignment="Center">
    <AppBarButton.Icon>
        <PathIcon HorizontalAlignment="Center" Data="ReportIconPathDataHere"/>
    </AppBarButton.Icon>
</AppBarButton>
+3


source to share


1 answer


When AppBarButton

used internally CommandBar

, setting the position of the mark is as easy as setting DefaultLabelPosition

from CommandBar

to Bottom

.

Other than that, there are several things you can try.



  • Try installing IsCompact="False"

    on each AppBarButton

    .
  • If 1. doesn't work, open the default style for AppBarButton

    here and remove Storyboard

    to visual state LabelOnRight

    . This way, even when the control asks for a label to align to the right, there is no state to set it, so nothing will visually change.

Hope it helps.

+4


source






More articles:


All Articles