comment utiliser "visualstate" pour modifier le statut de l'utilisateur usercontrol dans xaml?

Question

que je fais quelque chose fenêtres 10 développement d'applications UWP, et je suis arrivé un problème, Merci à tous de l'aide, fait sauter mon code:

Dans 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> 

et mon "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> 

Alors, ma question est: comment changer la couleur de surbrillance dans le UserControl enfant nommé « test » (lorsque le changement de pivot à l'indice actuel, comment écrire l'état visuel?)

Answer 1

Je l'ai testé sur WP8.1 RunTime, mais dans ce cas, je crois qu'il n'avait pas beaucoup changé. L'exemple ci-dessous utilise VisualStateManager pour remplacer le Label.Foreground par Vert. Code est la plupart du temps en XAML et va comme ceci:

MainPage:

<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> 

testControl:

<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> 

Pour faire ce travail, vous ne devez changer VisualStates lorsque la sélection change pivot - cela va dans le code de MainPage derrière:

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); 
} 

Vous devriez également trouver plus d'aide at MSDN et probablement plus dans certains blogs et articles.