CODEWITHSUNDEEP
c#xamluwp
iam.Carrot
iam.Carrot

Reputation: 5276

Appbar Button label positions automatically UWP

I am working on a UWP app. I am using Appbar buttons to show quick Icon buttons for actions. The issue is, The labels automatically get placed horizontally to the icon while some are still placed below the icon. Is there any way they the label position can be fixed? Below is the picture for clearer understanding of the issue:

Automatically aligns them horizontal

This is the worst of all

But ideally I want them to look like below

Ideally

Is there any way of making sure they(the icons and their respective labels) remain 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>

Upvotes: 4

Views: 1657

Answers (1)

Justin XL
Justin XL

Reputation: 39006

When AppBarButton is used inside a CommandBar, setting the position of the label is as easy as setting the DefaultLabelPosition of the CommandBar to Bottom.

Outside of it, there are a couple of things you could try.

  1. Try setting IsCompact="False" on each AppBarButton.
  2. If 1. doesn't work, go grab the default style for the AppBarButton here, and remove the Storyboard under the visual state LabelOnRight. So even when control asks the label to align right, there's no state to set it hence nothing visually will be changed.

Hope this helps.

Upvotes: 4

Related Questions