Breadcrumb bar doesn't show link to navigate previous folder level on hover winui3

Apoorva Petkar 0
Viewed 51

I added breadcrumb component in my project and tried several things, but link on hover on breadcrumb is not shown to navigate back to previously displayed folders.

My code for breadcrumb is here

<BreadcrumbBar
    x:Name="FolderBreadcrumbBar"
    ItemsSource="{x:Bind ViewModel.Breadcrumbs}" 
    ItemClicked="FolderBreadcrumbBar_ItemClicked"> 
    <BreadcrumbBar.ItemTemplate>
        <DataTemplate x:DataType="models:Breadcrumb">
            <TextBlock Text="{x:Bind Label}"/>
        </DataTemplate>
    </BreadcrumbBar.ItemTemplate>
</BreadcrumbBar>

I was trying to have hyperlink enabled to navigate to previous folder level in breadcrumb, Like below example

image

On click on Folder1 it navigates back to that level, but my issue is the hyperlink on Folder1 is not shown to trigger my onclick handler.

It doesn't highlight the link on hover of the mouse like below ex:

image

Can someone please help where I'm going wrong or how I can achieve this. Thanks in advance.

windows-community-toolkit breadcrumbs uwp-xaml winui-3 uwp
1 Answers

You can use the HyperlinkButton.

.xaml

<BreadcrumbBar
    x:Name="FolderBreadcrumbBar"
    ItemsSource="{x:Bind ViewModel.Breadcrumbs}">
    <BreadcrumbBar.ItemTemplate>
        <DataTemplate x:DataType="models:Breadcrumb">
            <HyperlinkButton
                Content="{x:Bind Label}"
                Click="HyperlinkButton_Click" />
        </DataTemplate>
    </BreadcrumbBar.ItemTemplate>
</BreadcrumbBar>

.xaml.cs

private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
{
    if (sender is HyperlinkButton hyperlinkButton &&
        hyperlinkButton.DataContext is Breadcrumb breadcrumb)
    {
    }
}

ANOTHER OPTION

As requested, if you need to use the ItemClicked from BreadcrumbBar, you can do it this way. The highlight will be low-contrast though.

<BreadcrumbBar
    x:Name="FolderBreadcrumbBar"
    ItemClicked="FolderBreadcrumbBar_ItemClicked"
    ItemsSource="{x:Bind ViewModel.Breadcrumbs}">
    <BreadcrumbBar.ItemTemplate>
        <DataTemplate x:DataType="models:Breadcrumb">
            <BreadcrumbBarItem Content="{Binding}">
                <BreadcrumbBarItem.ContentTemplate>
                    <DataTemplate x:DataType="models:Breadcrumb">
                        <TextBlock Text="{x:Bind Label}" />
                    </DataTemplate>
                </BreadcrumbBarItem.ContentTemplate>
            </BreadcrumbBarItem>
        </DataTemplate>
    </BreadcrumbBar.ItemTemplate>
</BreadcrumbBar>
Andrew KeepCoding0
Related