CODEWITHSUNDEEP
c#uwpuwp-xaml
Jonas Kohl
Jonas Kohl

Reputation: 1142

NavigationView Item with extra content on right side

I have a NavigationView in my app. I want to add counters/badges to some of the items. But whatever I do, the badge always stays right next to the label. See the image below (on the top is what I have, on the bottom what I want to achieve)

enter image description here

The code I'm currently using is the following:

<NavigationViewItem Icon="Mail">
    <NavigationViewItem.Content>
        <RelativePanel HorizontalAlignment="Stretch">
            <TextBlock RelativePanel.AlignLeftWithPanel="True">Inbox</TextBlock>
            <local:Badge RelativePanel.AlignRightWithPanel="True" BadgeText="30"/> <!-- can be replaced with a simple "TextBlock" -->
        </RelativePanel>
    </NavigationViewItem.Content>
</NavigationViewItem>

(You can subsitute the Badge control with a simple TextBlock)

Upvotes: 0

Views: 254

Answers (1)

Nico Zhu
Nico Zhu

Reputation: 32775

The problem is that RelativePanel can't get SplitViewOpenPaneThemeLength automatically. so we need specific the width for RelativePanel. As we known SplitViewOpenPaneThemeLength is 320, and SplitViewCompactPaneThemeLength is 48. so the width of NavigationViewItem.Content is 320-48 = 272. Please refer the following xaml code.

<RelativePanel HorizontalAlignment="Stretch" Width="{ThemeResource SplitViewOpenPaneThemeLength}">
    <TextBlock RelativePanel.AlignLeftWithPanel="True">Inbox</TextBlock>
    <TextBlock RelativePanel.AlignRightWithPanel="True" Text="30" Margin="0,0,48,0"/>
    <!-- can be replaced with a simple "TextBlock" -->
</RelativePanel>

enter image description here

Upvotes: 1

Related Questions