Question

我有一个带网格的页面，上面有两个textBlock，底部有一个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>

我希望在FlipView上的RelativePanel处于活动状态时更改txt1文本颜色，当ScrollViewer处于活动状态时，我想更改txt2。我该怎么办？

Answer 1

您有多种选择可以做到这一点。其中两个使用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>

这是一个完整的样本：

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

您可以尝试将txt1的background属性绑定到翻转视图的选定项目;

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

然后创建一个converter class来获取所选项目，检查其类型并根据类型返回所需的颜色;

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

如何在FlipView更改时更改textBlock.Foreground颜色？ c＃UWP

2 个答案: