NavigationView Элемент с дополнительным контентом на правой стороне

Question

У меня есть NavigationView в моем приложении. Я хочу добавить жетоны / значки для некоторых предметов. Но что бы я ни делал, значок всегда остается рядом с этикеткой. См. Изображение ниже (вверху - то, что у меня есть, внизу - то, чего я хочу достичь)

Код, который я сейчас использую имеет следующий вид:

<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>

^{(Вы можете заменить элемент управления Badge простым TextBlock)}

Answer 1

Проблема в том, что RelativePanel не может получить SplitViewOpenPaneThemeLength автоматически. поэтому нам нужно указать c ширину RelativePanel. Как известно, SplitViewOpenPaneThemeLength равно 320 , а SplitViewCompactPaneThemeLength равно 48 . поэтому ширина NavigationViewItem.Content равна 320-48 = 272 . Пожалуйста, обратитесь к следующему коду xaml.

<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>