WinUI3中BreadcrumbBar悬停不显示上级文件夹导航链接问题

你当前的BreadcrumbBar使用TextBlock作为面包屑项的内容，而TextBlock是纯文本显示控件，默认没有内置的交互状态样式（比如悬停高亮）。虽然ItemClicked事件能正常触发，但控件本身不会提供任何视觉反馈，导致用户无法直观判断这些项是可点击的。

直接使用UWP内置的HyperlinkButton替代TextBlock，它自带悬停、点击等交互状态的默认样式，完美适配面包屑导航的交互需求。如果需要自定义样式，也可以基于它修改。

修改后的基础代码 #

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

自定义高亮样式（可选） #

如果想完全自定义悬停时的视觉效果（比如修改背景色、文字颜色），可以给HyperlinkButton添加自定义Style：

<BreadcrumbBar
    x:Name="FolderBreadcrumbBar"
    ItemsSource="{x:Bind ViewModel.Breadcrumbs}" 
    ItemClicked="FolderBreadcrumbBar_ItemClicked"> 
    <BreadcrumbBar.ItemTemplate>
        <DataTemplate x:DataType="models:Breadcrumb">
            <HyperlinkButton Content="{x:Bind Label}">
                <HyperlinkButton.Style>
                    <Style TargetType="HyperlinkButton">
                        <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
                        <Setter Property="Padding" Value="4,2" />
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="HyperlinkButton">
                                    <Grid Background="{TemplateBinding Background}">
                                        <VisualStateManager.VisualStateGroups>
                                            <VisualStateGroup x:Name="CommonStates">
                                                <VisualState x:Name="Normal" />
                                                <VisualState x:Name="PointerOver">
                                                    <Storyboard>
                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}" />
                                                        </ObjectAnimationUsingKeyFrames>
                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}" />
                                                        </ObjectAnimationUsingKeyFrames>
                                                    </Storyboard>
                                                </VisualState>
                                            </VisualStateGroup>
                                        </VisualStateManager.VisualStateGroups>
                                        <ContentPresenter x:Name="ContentPresenter"
                                                          Content="{TemplateBinding Content}"
                                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                          Padding="{TemplateBinding Padding}" />
                                    </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </HyperlinkButton.Style>
            </HyperlinkButton>
        </DataTemplate>
    </BreadcrumbBar.ItemTemplate>
</BreadcrumbBar>

内容的提问来源于stack exchange，提问作者Apoorva Petkar