Question

我在我的应用中运行简单的淡入淡出操作时遇到了令人沮丧的问题。

我的应用程序包含三个支点。

每个支点包含三个部分，其中包含详细信息＆＃34; Collapsed＆＃34;默认情况下变为＆＃34;可见＆＃34;如果你点击该部分的任何地方。

当您点击以展开某个部分的详细信息时，将从代码隐藏中调用fadeIn（）动画：

nowExpandableContent.Visibility = System.Windows.Visibility.Visible;

            Storyboard s = new Storyboard();

            DoubleAnimation fadeInAnimation = new DoubleAnimation();
            fadeInAnimation.From = 0.0;
            fadeInAnimation.To = 1.0;
            fadeInAnimation.Duration = new Duration(TimeSpan.FromSeconds(1.0));

            Storyboard.SetTarget(fadeInAnimation, this.nowExpandableContent);
            Storyboard.SetTargetProperty(fadeInAnimation, new PropertyPath("Opacity"));

            s.Children.Add(fadeInAnimation);

            s.Begin();

我遇到的问题是，有时当我点击一个部分进行扩展时，应用会暂时闪烁/闪烁（密切注意，我注意到它显示了其他支点的内容）。有时这可能发生在我第一次点击一个部分。其他时候可能需要几次或更多次点击（打开/关闭/打开/关闭等）才能发生。它非常随机。

这是其中第一个pivot / section的xaml的摘录（注意：Tap事件处理程序，＆＃34; Now_Tap＆＃34;，是调用fadeIn方法的地方）：

<controls:PivotItem 
    x:Name="pivotNow"
    Margin="0">

    <ScrollViewer 
        Height="780"
        ManipulationStarted="ScrollViewerToday_ManipulationStarted"
        x:Name="scrollViewerNowPivot">

        <Grid 
            x:Name="GridNow">

            <Grid.RowDefinitions>
                <RowDefinition Height="*"/> <!-- NOW -->
            </Grid.RowDefinitions>

            <!-- NOW ROW START -->
            <StackPanel 
                Background="{Binding ActiveTheme.BackgroundAlt1, Source={StaticResource ThemeController}}"
                Grid.Row="0"
                Tap="Now_Tap">

                <!-- NOW GRID START -->
                <Grid
                    Margin="0,50,0,50">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="70"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="auto"/>
                        <ColumnDefinition Width="50"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>

                    <!-- NOW TITLE ROW START -->
                    <wptoolkit:WrapPanel 
                        Grid.Row="0"
                        Grid.Column="1"
                        Orientation="Horizontal">
                        <!-- NOW TITLE -->
                        <TextBlock 
                            FontSize="18"
                            FontWeight="Bold"
                            Foreground="{Binding ActiveTheme.ForegroundAlt1, Source={StaticResource ThemeController}}"
                            Text="NOW"/>
                        <!-- NOW EXPANDABLE ICON -->
                        <Border 
                            Background="{Binding ActiveTheme.BackgroundAlt1, Source={StaticResource ThemeController}}"
                            BorderBrush="{Binding ActiveTheme.ForegroundAlt1, Source={StaticResource ThemeController}}"
                            BorderThickness="1"
                            CornerRadius="250"
                            Margin="15,2,0,0"
                            Opacity="0.5"
                            Padding="4,5,4,4"
                            Width="24">
                            <TextBlock 
                                FontSize="10"
                                FontFamily="Segoe UI Symbol"                                                        
                                Foreground="{Binding ActiveTheme.ForegroundAlt1, Source={StaticResource ThemeController}}"
                                HorizontalAlignment="Center"
                                Opacity="0.5"
                                Text="&#xE109;"                                            
                                x:Name="nowExpandableIcon"/>
                        </Border>
                    </wptoolkit:WrapPanel>
                    <!-- NOW TITLE ROW END -->

                    <!-- NOW CONTENT ROW START -->
                    <StackPanel 
                        Grid.Row="1"
                        Grid.Column="1"
                        Margin="0,50,0,50">
                        <wptoolkit:WrapPanel>
                            <!-- NOW ICON -->
                            <TextBlock 
                                FontSize="80" 
                                FontWeight="Bold" 
                                FontFamily="/Assets/Fonts/WeatherIcons-Regular.otf#Weather Icons"
                                Foreground="{Binding PivotNow.IconColour}" 
                                Text="{Binding PivotNow.Icon}"
                                VerticalAlignment="Bottom"/>
                            <!-- NOW TEMPERATURE -->
                            <TextBlock 
                                FontSize="90"
                                FontWeight="Bold"
                                Margin="40,0,0,-5"
                                Text="{Binding Location.Currently.Temperature}"
                                VerticalAlignment="Bottom"/>
                        </wptoolkit:WrapPanel>
                        <!-- NOW SUMMARY -->
                        <TextBlock 
                            FontSize="24"
                            Margin="0,20,0,0"
                            TextWrapping="Wrap">
                                <Run Text="{Binding PivotNow.Summary}"/><Run Text="."/> <Run Text="Feels like "/><Run Text="{Binding Location.Currently.ApparentTemperature}"/><Run Text="."/>
                        </TextBlock>
                        <!-- NOW EXPANDABLE CONTENT -->
                        <TextBlock        
                            FontSize="24"
                            Margin="0,30,0,0"
                            TextWrapping="Wrap"
                            Text="{Binding Location.Currently.ExpandableContent}"
                            Visibility="Collapsed"
                            x:Name="nowExpandableContent"/>
                    </StackPanel>
                    <!-- NOW CONTENT ROW END -->

                </Grid>
                <!-- NOW GRID END -->
            </StackPanel>
            <!-- NOW ROW END -->

我知道在没有访问整个xaml /调试应用程序的情况下很难诊断出这个问题的根本原因，但有没有任何暗示可能导致我共享的行为？如果没有，那么我是否有任何机会远程熟悉的一般问题？

我应该补充一点，如果我在不使用动画的情况下展开一个部分，就不会出现这个问题。

感谢您的时间。

Answer 1

在调用动画之前，您需要将Opacity设置为0。现在，你制作yor元素Visible，然后几个刻度开始动画。这可能会导致您看到闪烁

nowExpandableContent.Opacity = 0.0;
nowExpandableContent.Visibility = System.Windows.Visibility.Visible;

如果这不起作用的另一种方法：

手动制作所有隐藏（未选中）的透视项Collapsed，即订阅透视SelectionChanged事件并制作导航到Visible及其他页面的面板 - {{1 }}

当UIElement的可见性更改为“可见”时使用基本淡入动画会导致屏幕瞬间闪烁

1 个答案: