Question

我试图建立一个与此类似的枢轴控制，除了没有标签：

为了做到这一点，我从this page获取了代码，除了我没有在XAML中获得动画。我的问题是，它使用FontIcons并通过动画ContentPresenter的Foreground属性来更改整个标题项的颜色。我想使用Path，并且不知道如何访问Fill属性。

该结构分为一个TabHeader类，其中包含一个带有Path的RelativePanel，另一个带有TextBlock的标签。

一个动画状态如下：

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
    Storyboard.TargetProperty="Foreground" >
    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Icon"
                   Storyboard.TargetProperty="Fill" >
    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
</ObjectAnimationUsingKeyFrames>

如您所见，我尝试为图标对象添加动画状态，因为它是TabHeader元素中路径的名称，但这不起作用。

编辑：

以下是TabHeader类的代码：

<UserControl
x:Class="DynamicPivot.TabHeader"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:DynamicPivot"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">

<Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="Narrow">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="Icon.(RelativePanel.AlignHorizontalCenterWithPanel)" Value="True" />
                    <Setter Target="LabelText.(RelativePanel.Below)" Value="Icon" />
                    <Setter Target="LabelText.(RelativePanel.AlignHorizontalCenterWith)" Value="Icon" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Wide">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="500" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="Icon.(RelativePanel.AlignVerticalCenterWithPanel)" Value="True" />
                    <Setter Target="LabelText.(RelativePanel.RightOf)" Value="Icon" />
                    <Setter Target="LabelText.(RelativePanel.AlignVerticalCenterWith)" Value="Icon" />
                    <Setter Target="RelativePanel.Margin" Value="0,0,12,0"/>
                    <Setter Target="Icon.Margin" Value="0,0,0,0"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <RelativePanel x:Name="RelativePanel">
        <!--<FontIcon x:Name="Icon"
                  HorizontalAlignment="Center"
                  Margin="0,12,0,0"
                  Glyph="{Binding Glyph}"
                  FontSize="16" />-->
        <Path x:Name="Icon" HorizontalAlignment="Center" Margin="0,12,0,0" Data="{Binding Glyph}"  Width="16" Height="16" Stretch="Uniform"/>
        <TextBlock x:Name="LabelText"
                   Text="{Binding Label}"
                   Style="{StaticResource CaptionTextBlockStyle}"
                   Margin="2,4,2,4" />
    </RelativePanel>
</Grid>

Answer 1

您应该能够将动画添加到VisualStateManager中，如下所示：

<UserControl
x:Class="DynamicPivot.TabHeader"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:DynamicPivot"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">

<Grid>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="Narrow">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="Icon.(RelativePanel.AlignHorizontalCenterWithPanel)" Value="True" />
                    <Setter Target="LabelText.(RelativePanel.Below)" Value="Icon" />
                    <Setter Target="LabelText.(RelativePanel.AlignHorizontalCenterWith)" Value="Icon" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Wide">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="500" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="Icon.(RelativePanel.AlignVerticalCenterWithPanel)" Value="True" />
                    <Setter Target="LabelText.(RelativePanel.RightOf)" Value="Icon" />
                    <Setter Target="LabelText.(RelativePanel.AlignVerticalCenterWith)" Value="Icon" />
                    <Setter Target="RelativePanel.Margin" Value="0,0,12,0"/>
                    <Setter Target="Icon.Margin" Value="0,0,0,0"/>
                </VisualState.Setters>
            </VisualState>

            <VisualState x:Name="Selected">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Icon" Storyboard.TargetProperty="Fill" >
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>

        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <RelativePanel x:Name="RelativePanel">
        <!--<FontIcon x:Name="Icon"
                  HorizontalAlignment="Center"
                  Margin="0,12,0,0"
                  Glyph="{Binding Glyph}"
                  FontSize="16" />-->
        <Path x:Name="Icon" HorizontalAlignment="Center" Margin="0,12,0,0" Data="{Binding Glyph}"  Width="16" Height="16" Stretch="Uniform"/>
        <TextBlock x:Name="LabelText"
                   Text="{Binding Label}"
                   Style="{StaticResource CaptionTextBlockStyle}"
                   Margin="2,4,2,4" />
    </RelativePanel>
</Grid>

然后你将使用这样的调用进入视觉状态：

VisualStateManager.GoToState(this, "Selected", false);

这应该触发＆＃34; Icon＆＃34;填充到SystemControlHighlightAltBaseMediumHighBrush。

如何使用Path个性化XAML Pivot？

1 个答案: