如何使用 "visualstate" 修改 xaml 中子用户控件的状态？

Question

我正在做一些事情 windows 10 UWP 应用程序开发，我遇到了一个问题，感谢大家的帮助，我的代码已经崩溃了：

在MainPage.xaml

<Grid  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Pivot Style="{StaticResource fuckpivot}" SelectionChanged="Pivot_SelectionChanged">
        <PivotItem>
            <PivotItem.Header>
                <local:test Label="item 3" Glyph="&#xE723;" />
            </PivotItem.Header>
            <Rectangle 
                      x:Name="MyAnimatedRectangle"
                      Width="100" Height="100" Fill="Blue" />
        </PivotItem>
        <PivotItem>
            <PivotItem.Header>
                <local:test Label="item 2" Glyph="&#xE723;" HighLight="Transparent"/>
            </PivotItem.Header>
            <!--<Rectangle x:Name="MyTest" Width="100" Height="100" Fill="red"/>-->
        </PivotItem>
    </Pivot>

</Grid>

和我的 "testControl":

   <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="10"/>
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0">
        <FontIcon
                        HorizontalAlignment="Center"
                        Margin="0,12,0,0"
                        Glyph="{Binding Glyph}"
                        FontSize="16" />
        <TextBlock
                        FontFamily="Segoe UI"
                        Text="{Binding Label}"
                        Style="{StaticResource CaptionTextBlockStyle}"
                        LineStackingStrategy="BlockLineHeight"
                        LineHeight="14"
                        MaxLines="2"
                        IsTextScaleFactorEnabled="False"
                        TextAlignment="Center"
                        HorizontalAlignment="Center"
                        Margin="2,5,2,7" />
    </StackPanel>
    <Grid Grid.Row="1">
        <Border BorderThickness="0,0,0,2" VerticalAlignment="Bottom" BorderBrush="Red"/>
    </Grid>
</Grid>

所以，我的问题是：如何更改名为"test"的子UserControl中的突出显示颜色？（当pivot更改为当前Index时，如何编写视觉状态？）

Answer 1

我已经在 WP8.1 RunTime 上对其进行了测试，但在这种情况下，我相信它并没有发生太大变化。下面的示例使用 VisualStateManager 将 Label.Foreground 更改为 Green。代码主要在 XAML 中，如下所示：

主页：

<Grid  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Pivot SelectionChanged="Pivot_SelectionChanged">
        <PivotItem>
            <PivotItem.Header>
                <local:testControl Label="item 3" Glyph="&#xE723;" />
            </PivotItem.Header>
            <Rectangle 
                  x:Name="MyAnimatedRectangle"
                  Width="100" Height="100" Fill="Blue" />
        </PivotItem>
        <PivotItem>
            <PivotItem.Header>
                <local:testControl Label="item 2" Glyph="&#xE723;"/>
            </PivotItem.Header>
        </PivotItem>
    </Pivot>
</Grid>

测试控制：

<Grid>        
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="SelectionStates">
            <VisualState x:Name="Unselected"/>
            <VisualState x:Name="Selected">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Foreground" Storyboard.TargetName="MyLabel">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Green"/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="10"/>
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0">
        <FontIcon   HorizontalAlignment="Center" Margin="0,12,0,0" Glyph="{Binding Glyph}" FontSize="16" />
        <TextBlock x:Name="MyLabel" FontFamily="Segoe UI" Text="{Binding Label}" LineStackingStrategy="BlockLineHeight" LineHeight="14"
                   TextAlignment="Center" HorizontalAlignment="Center" Margin="2,5,2,7" />
    </StackPanel>
    <Grid Grid.Row="1">
        <Border BorderThickness="0,0,0,2" VerticalAlignment="Bottom" BorderBrush="Red"/>
    </Grid>
</Grid>

要完成此工作，您只需在枢轴选择更改时更改 VisualStates - 这在 MainPage 的代码后面：

private void Pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (e.RemovedItems.Count > 0)
        VisualStateManager.GoToState((e.RemovedItems.First() as PivotItem).Header as testControl, "Unselected", true);
    if (e.AddedItems.Count > 0)
        VisualStateManager.GoToState((e.AddedItems.First() as PivotItem).Header as testControl, "Selected", true);
}

您还应该在某些博客和文章中找到更多帮助 at MSDN，可能还有更多帮助。

如何使用 "visualstate" 修改 xaml 中子用户控件的状态？

how to use "visualstate" to modify child usercontrol's status in xaml?

c#

xaml

user-controls

windows-10-mobile