如何在 Pivot header 中添加类似于 Windows 10 中 iOS 的页面控制器的图像?

How to add a image in Pivot header similar to page controller of iOS in Windows 10?

我目前正在使用 Windows 10 和 Pivot 控件。我知道我们可以通过添加图像或自定义 TextBlock 来自定义 header 模板。我知道如何自定义基本模板,如下所示

<Pivot.HeaderTemplate>
    <DataTemplate>
        <Grid>
            <TextBlock Text="{Binding}"
                       FontSize="22"/>
        </Grid>
    </DataTemplate>
</Pivot.HeaderTemplate>

这对于基本用途来说工作得很好,但我想获得类似于以下屏幕截图的输出。为每个 header 添加椭圆,它应该在页面的中心。

有人可以建议这是否可行吗?

更新

我添加了如下所示的 StackPanel。

 <StackPanel HorizontalAlignment="Center" Grid.Row="1" Orientation="Horizontal">
                    <Ellipse Fill="Cyan"
                             Height="10"
                             Width="10"
                             Margin="10,0"/>
                    <Ellipse Fill="Gainsboro"
                             Height="10"
                             Width="10"
                             Margin="10,0"/>
                    <Ellipse Fill="Gainsboro"
                             Height="10"
                             Width="10"
                             Margin="10,0"/>

                </StackPanel>

现在如何将 PivotHeaderForegroundSelectedBrushPivotHeaderForegroundUnselectedBrush 分配给椭圆?

用于设计页面中心的椭圆。
选项 1
您可以通过绑定边距 属性 来完成。每次调整大小都需要更新此边距 属性。
选项2
否则指定一个 Stackpanel,其方向为水平、居中对齐并包含椭圆,这些椭圆会在 Pivot 选择更改时立即更新。您可以找到由 Jerry Nixon Pagination
创建的类似控件
至于椭圆颜色更改,您可以为不同的状态创建模板,使用触发器甚至覆盖当前的 Pivot header 模板

<SolidColorBrush x:Key="PivotHeaderForegroundSelectedBrush" Color="Blue" />
<SolidColorBrush x:Key="PivotHeaderForegroundUnselectedBrush" Color="White" />