如何在FlipView更改時更改textBlock.Foreground顏色？ c＃UWP

Question

我有一個帶Grid的頁面，它上面有兩個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>

當ScrollView的RelativePanel處於活動狀態時，我想更改txt1文本顏色，當ScrollViewer處於活動狀態時，我想更改txt2。 我該怎么做？

Answer 1

將RelativePanel和ScrollViewer放在FlipViewItem中，並處理翻轉視圖的SelectionChanged事件。 檢查翻轉視圖的SelectedIndex並根據索引更改Foreground。

Answer 2

您有多種選擇可以做到這一點。 其中兩個使用DataTriggerBehavior ：

---

選項1：使用VisualStates解決方案

將包含兩個VisualStates的VisualStateGroup添加到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 -property。

<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屬性綁定到翻轉視圖的選定項目;

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

然后創建一個轉換器類 ，它接受所選項目，檢查其類型並根據類型返回所需的顏色;

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