UWP TabViewItem头部加载动画（Loading Spinner）实现方案问询

要实现类似浏览器标签页的加载状态样式，核心是自定义TabViewItem的头部模板，嵌入加载动画控件并通过状态绑定控制显示，具体步骤如下：

1. 自定义TabViewItem的HeaderTemplate #

通过替换TabViewItem.HeaderTemplate，在头部区域同时放置标题文本和加载Spinner，用水平布局让两者并排，对齐方式和浏览器标签一致：

<TabView>
    <TabViewItem x:Name="SampleTab" Header="加载中页面">
        <TabViewItem.HeaderTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Spacing="4">
                    <!-- 加载Spinner -->
                    <ProgressRing x:Name="TabLoadingRing" 
                                  Width="16" Height="16" 
                                  IsActive="{Binding IsLoading, ElementName=SampleTab}"
                                  Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
                    <!-- 标签标题 -->
                    <TextBlock Text="{Binding}" VerticalAlignment="Center" TextTrimming="CharacterEllipsis"/>
                </StackPanel>
            </DataTemplate>
        </TabViewItem.HeaderTemplate>
        <!-- 标签内容区域 -->
        <Grid Background="White">
            <!-- 你的页面内容 -->
        </Grid>
    </TabViewItem>
</TabView>

2. 添加加载状态控制属性 #

为了方便控制加载状态，可选择两种方式实现：

代码隐藏方式（快速实现） #

给页面添加附加依赖属性，直接控制TabViewItem的加载状态：

public sealed partial class MainPage : Page
{
    public static readonly DependencyProperty IsLoadingProperty =
        DependencyProperty.RegisterAttached("IsLoading", typeof(bool), typeof(MainPage), new PropertyMetadata(false));

    public static bool GetIsLoading(DependencyObject obj)
    {
        return (bool)obj.GetValue(IsLoadingProperty);
    }

    public static void SetIsLoading(DependencyObject obj, bool value)
    {
        obj.SetValue(IsLoadingProperty, value);
    }

    public MainPage()
    {
        this.InitializeComponent();
    }

    // 示例：触发加载状态
    private void StartTabLoading()
    {
        SetIsLoading(SampleTab, true);
        // 模拟加载完成后关闭动画
        Task.Delay(3000).ContinueWith(t =>
        {
            DispatcherQueue.TryEnqueue(() => SetIsLoading(SampleTab, false));
        });
    }
}

MVVM模式（推荐） #

在Tab对应的ViewModel中实现IsLoading属性（需实现INotifyPropertyChanged）：

public class TabViewModel : INotifyPropertyChanged
{
    private bool _isLoading;
    public bool IsLoading
    {
        get => _isLoading;
        set
        {
            _isLoading = value;
            OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    // 模拟加载逻辑
    public async Task LoadContent()
    {
        IsLoading = true;
        await Task.Delay(3000);
        IsLoading = false;
    }
}

绑定方式修改为：

IsActive="{Binding IsLoading}"

3. 动画样式调整（可选） #

如果默认ProgressRing不符合需求，可以自定义样式，比如缩小尺寸、调整动画速度：

<ProgressRing Width="16" Height="16" Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}">
    <ProgressRing.Template>
        <ControlTemplate TargetType="ProgressRing">
            <Viewbox>
                <Canvas Width="24" Height="24">
                    <Ellipse x:Name="E1" Width="4" Height="4" Canvas.Left="10" Canvas.Top="1" Fill="{TemplateBinding Foreground}">
                        <Ellipse.Triggers>
                            <EventTrigger RoutedEvent="Loaded">
                                <BeginStoryboard>
                                    <Storyboard RepeatBehavior="Forever">
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E1" Storyboard.TargetProperty="Opacity">
                                            <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
                                            <DiscreteDoubleKeyFrame KeyTime="0.3" Value="0.3"/>
                                            <DiscreteDoubleKeyFrame KeyTime="0.6" Value="1"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </Ellipse.Triggers>
                    </Ellipse>
                    <!-- 省略其他椭圆的动画定义，可参考系统ProgressRing模板扩展 -->
                </Canvas>
            </Viewbox>
        </ControlTemplate>
    </ProgressRing.Template>
</ProgressRing>

4. 布局优化细节 #

• 设置StackPanel.Spacing控制Spinner和标题的间距，避免拥挤
• 给TextBlock添加TextTrimming="CharacterEllipsis"，防止长标题挤压动画控件
• 利用系统主题资源设置Foreground，保证动画颜色和标签风格统一

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