Как изменить textBlock.Foreground цвет, когда FlipView изменился? C# UWP

Question

У меня есть страница с сеткой, есть два TextBlocks на ней и FlipView в нижнем

<Grid> 

<TextBlock x:Name="txt1" Text="First"/> 
<TextBlock x:Name="txt2" Text="Second"/> 

<FlipView x:Name="flipView"> 

    <RelativePanel Background="White"> 
    //PanelContent 
    </RelativePanel> 

    <ScrollViewer> 
    //ScrollViewerContent 
    </ScrollViewer> 

</FlipView> 

</Grid> 

Я хочу изменить txt1 цвет текста, когда RelativePanel на FlipView активен, и то же самое с txt2, когда ScrollViewer активен. Как мне это сделать?

Answer 1

Поместите RelativePanel и ScrollViewer внутри FlipViewItem и обработайте событие SelectionChanged с флип-представлением. Проверьте SelectedIndex с флип-представлением и измените Foreground в соответствии с индексом.

Answer 2

У вас есть несколько вариантов для этого. Два из них с помощью DataTriggerBehavior:

---

Вариант 1: Решение с VisualStates

Добавить VisualStateGroup, содержащий два VisualStates к вашему VisualStateManager:

<VisualStateManager.VisualStateGroups> 
     <VisualStateGroup x:Name="SelectionStates"> 
      <VisualState x:Name="RelativeSelected"/> 
      <VisualState x:Name="ScrollSelected"> 
       <Storyboard> 
        <ColorAnimation Duration="0" To="Black" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="txt1" d:IsOptimized="True"/> 
        <ColorAnimation Duration="0" To="#FFFB6700" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="txt2" d:IsOptimized="True"/> 
       </Storyboard> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 

и вызвать их, вызывая GoToStateAction :

<Interactivity:Interaction.Behaviors> 
     <Core:DataTriggerBehavior x:Name="RelativePanelSelectedTrigger" Binding="{Binding SelectedIndex,ElementName=flipView}" Value="0"> 
      <Core:GoToStateAction StateName="RelativeSelected" /> 
     </Core:DataTriggerBehavior> 
     <Core:DataTriggerBehavior x:Name="ScrollViewerSelectedTrigger" Binding="{Binding SelectedIndex,ElementName=flipView}" Value="1"> 
      <Core:GoToStateAction StateName="ScrollSelected" /> 
     </Core:DataTriggerBehavior> 
    </Interactivity:Interaction.Behaviors> 

Here's полный образец:

<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Interactivity:Interaction.Behaviors> 
     <Core:DataTriggerBehavior x:Name="RelativePanelSelectedTrigger" Binding="{Binding SelectedIndex,ElementName=flipView}" Value="0"> 
      <Core:GoToStateAction StateName="RelativeSelected" /> 
     </Core:DataTriggerBehavior> 
     <Core:DataTriggerBehavior x:Name="ScrollViewerSelectedTrigger" Binding="{Binding SelectedIndex,ElementName=flipView}" Value="1"> 
      <Core:GoToStateAction StateName="ScrollSelected" /> 
     </Core:DataTriggerBehavior> 
    </Interactivity:Interaction.Behaviors> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup x:Name="SelectionStates"> 
      <VisualState x:Name="RelativeSelected"/> 
      <VisualState x:Name="ScrollSelected"> 
       <Storyboard> 
        <ColorAnimation Duration="0" To="Black" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="txt1" d:IsOptimized="True"/> 
        <ColorAnimation Duration="0" To="#FFFB6700" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="txt2" d:IsOptimized="True"/> 
       </Storyboard> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
    <TextBlock x:Name="txt1" Text="First" Foreground="#FF0068FF"/> 
    <TextBlock x:Name="txt2" Text="Second"/> 

    <FlipView x:Name="flipView"> 

     <RelativePanel x:Name="relativePanel" Background="White"> 
      <TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="RelativePanel is selected" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
     </RelativePanel> 

     <ScrollViewer x:Name="scrollViewer"> 
      <TextBlock x:Name="textBlock1" TextWrapping="Wrap" Text="ScrollViewer is Selected" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
     </ScrollViewer> 

    </FlipView> 

</StackPanel> 

---

Вариант 2: Решение с помощью ChangePropertyAction Если вы хотите, чтобы избежать создания VisualStates вы можете изменить Foreground -свойстве непосредственно.

<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Interactivity:Interaction.Behaviors> 
     <Core:DataTriggerBehavior x:Name="RelativePanelSelectedTrigger" Binding="{Binding SelectedIndex,ElementName=flipView}" Value="0"> 
      <Core:ChangePropertyAction TargetObject="{Binding ElementName=txt1}" PropertyName="Foreground"> 
       <Core:ChangePropertyAction.Value> 
        <SolidColorBrush Color="#FF1700FF"/> 
       </Core:ChangePropertyAction.Value> 
      </Core:ChangePropertyAction> 
      <Core:ChangePropertyAction TargetObject="{Binding ElementName=txt2}" PropertyName="Foreground"> 
       <Core:ChangePropertyAction.Value> 
        <SolidColorBrush Color="Black"/> 
       </Core:ChangePropertyAction.Value> 
      </Core:ChangePropertyAction> 
     </Core:DataTriggerBehavior> 
     <Core:DataTriggerBehavior x:Name="ScrollViewerSelectedTrigger" Binding="{Binding SelectedIndex,ElementName=flipView}" Value="1"> 
      <Core:ChangePropertyAction TargetObject="{Binding ElementName=txt1}" PropertyName="Foreground"> 
       <Core:ChangePropertyAction.Value> 
        <SolidColorBrush Color="Black"/> 
       </Core:ChangePropertyAction.Value> 
      </Core:ChangePropertyAction> 
      <Core:ChangePropertyAction TargetObject="{Binding ElementName=txt2}" PropertyName="Foreground"> 
       <Core:ChangePropertyAction.Value> 
        <SolidColorBrush Color="#FF73E017"/> 
       </Core:ChangePropertyAction.Value> 
      </Core:ChangePropertyAction> 
     </Core:DataTriggerBehavior> 
    </Interactivity:Interaction.Behaviors> 

Answer 3

Вы можете попробовать привязать свойство фона txt1 к выбранному элементу вашего флип-представления;

background = "{Binding SelectedItem, ElementName=flipView, Converter={StaticResource ObjectTypeToColorConverter}}" 

Затем создайте converter class, который принимает выбранный элемент, проверяет его тип и возвращает цвет вы хотите на основе типа;

if(obj.getType() == (typeOf)RelativePanel) return color.red;