XAML、Pivot：如何在 PivotHeader 定义中绑定 PivotHeader 属性？

Question

我编辑了默认的枢轴 Header 项目样式以在用户将选定的枢轴项目更改为我的颜色时更改其前景属性（请参阅 VisualState Selected，我没有粘贴所有内容):

<Style TargetType="PivotHeaderItem">
        <!-- ... -->
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="PivotHeaderItem">
                    <Grid x:Name="Grid" Background="{TemplateBinding Background}">
                        <!-- ... -->
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualStateGroup.Transitions>
                                     <!-- ... -->
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Disabled">
                                    <!-- ... -->
                                </VisualState>
                                <VisualState x:Name="Unselected" />
                                <VisualState x:Name="UnselectedLocked">
                                    <!-- ... -->
                                </VisualState>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource MyColor}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                 <!-- ... -->
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <!-- ... -->
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

如果我的 PivotItem.Header 定义为 TextBlock，则前景会按预期更改。

现在我想要同样的 Ellipse。问题是 Ellipse 没有前景属性。我以为我可能必须将填充画笔绑定到前景画笔，但我不知道该怎么做。

 <Pivot Grid.Row="1">

    <PivotItem x:Name="Test">

        <PivotItem.Header>
            <Grid>

                <Ellipse
                         Fill="{How to bind PivotItemHeader Foreground?}"
                         Width="20" Height="20" />
            </Grid>
        </PivotItem.Header>

    </PivotItem>

    <PivotItem x:Name="Test2">

        <PivotItem.Header>
            <Grid>

                <Ellipse
                         Fill="{How to bind PivotItemHeader Foreground?}"
                         Width="20" Height="20" />
            </Grid>
        </PivotItem.Header>

    </PivotItem>

</Pivot>

我试过没有成功：

Fill="{Binding ElementName=Test, Path=HeaderItem.Foreground}"

Answer 1

在您的模板中，您更改 Selected VisualState 中 ContentPresenter 的 Foreground。因此，我假设您想为每个项目创建一个 Ellipse 作为 header，并在 select 每个项目时更改这些省略号的颜色。

为此，您可以将修改后的模板与 Pivot.HeaderTemplate 一起使用，并像这样使用 RelativeSource 属性：

<Pivot Grid.Row="1">
    <Pivot.HeaderTemplate>
        <DataTemplate>
            <Grid>
                <Ellipse Width="20" Height="20" Fill="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Foreground}" />
            </Grid>
        </DataTemplate>
    </Pivot.HeaderTemplate>
    <PivotItem>
        <TextBlock Text="11111" />
    </PivotItem>

    <PivotItem>
        <TextBlock Text="22222" />
    </PivotItem>
</Pivot>

此处 DataTemplate 应用于您修改后的模板中的 ContentPresenter，因此我们可以使用 TemplatedParent 将 Ellipse 绑定到其 Parent .

或者这里有另一种方法，你可以这样修改你的模板：

<ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" FontWeight="{TemplateBinding FontWeight}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
    <ContentPresenter.RenderTransform>
        <TranslateTransform x:Name="ContentPresenterTranslateTransform" />
    </ContentPresenter.RenderTransform>
    <Ellipse Width="20" Height="20" Fill="{Binding ElementName=ContentPresenter, Path=Foreground}" />
</ContentPresenter>

同时使用 Pivot 控件，如下所示：

<Pivot Grid.Row="1">
    <PivotItem>
        <TextBlock Text="11111" />
    </PivotItem>

    <PivotItem>
        <TextBlock Text="22222" />
    </PivotItem>
</Pivot>

请注意，模板的 "change color" 部分针对 ContentPresenter，而不是 HeaderItem，您可以在 [=] 的帮助下看到此 ContentPresenter 26=]。

XAML、Pivot：如何在 PivotHeader 定义中绑定 PivotHeader 属性？

XAML, Pivot: how to bind a PivotHeader property inside PivotHeader definition?

xaml

windows-store-apps

uwp

XAML、Pivo​​t：如何在 PivotHeader 定义中绑定 PivotHeader 属性？

XAML, Pivot: how to bind a PivotHeader property inside PivotHeader definition?

xaml

windows-store-apps

uwp

XAML、Pivot：如何在 PivotHeader 定义中绑定 PivotHeader 属性？