Windows應用商店：頁面元素加載令人不安，令人厭煩

Question

我有一個包含圖片的頁面，其來源是本地.png資源。它以最令人討厭的方式加載到視圖中。

它在整個網格中加載，如RowSpan =「2」，然後在一兩秒後彈出。這太可怕了。

根據新的空白商店應用程序從repro應用程序演示。

<common:LayoutAwarePage 
    x:Name="pageRoot" 
    x:Class="DeleteMeApp1.BasicPage1" 
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:DeleteMeApp1" 
    xmlns:common="using:DeleteMeApp1.Common" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d"> 

    <Page.Resources> 

     <!-- TODO: Delete this line if the key AppName is declared in App.xaml --> 
     <x:String x:Key="AppName">My Application</x:String> 
    </Page.Resources> 

    <!-- 
     This grid acts as a root panel for the page that defines two rows: 
     * Row 0 contains the back button and page title 
     * Row 1 contains the rest of the page layout 
    --> 
    <Grid Style="{StaticResource LayoutRootStyle}" Background="Brown"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="140"/> 
      <RowDefinition Height="*"/> 
     </Grid.RowDefinitions> 

     <VisualStateManager.VisualStateGroups> 

      <!-- Visual states reflect the application's view state --> 
      <VisualStateGroup x:Name="ApplicationViewStates"> 
       <VisualState x:Name="FullScreenLandscape"/> 
       <VisualState x:Name="Filled"/> 

       <!-- The entire page respects the narrower 100-pixel margin convention for portrait --> 
       <VisualState x:Name="FullScreenPortrait"> 
        <Storyboard> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style"> 
          <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/> 
         </ObjectAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualState> 

       <!-- The back button and title have different styles when snapped --> 
       <VisualState x:Name="Snapped"> 
        <Storyboard> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style"> 
          <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/> 
         </ObjectAnimationUsingKeyFrames> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style"> 
          <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/> 
         </ObjectAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualState> 
      </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 

     <Image Grid.Row="0" Stretch="UniformToFill" Source="Assets/BackgroundTexturedBlackboard.png" /> 

     <!-- Back button and page title --> 
     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="Auto"/> 
       <ColumnDefinition Width="*"/> 
      </Grid.ColumnDefinitions> 
      <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/> 
      <TextBlock x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}"/> 
     </Grid> 

     <StackPanel Grid.Row="1"> 

     </StackPanel> 

    </Grid> 
</common:LayoutAwarePage> 

Answer 1

問題在於佈局。雖然技術上合法，但這種安排行不通。

我解決了這個問題，通過在現有根目錄下添加另一個網格，並將新網格作爲新根目錄。

進入新的根目錄後，我添加了圖像和其他元素，我需要覆蓋這些作品，並且這些元素的順序呈現得更好，不過，對於過渡效果，我仍然需要對其進行調整。

更新

其實，這並不是故事的結尾。移除圖像並留下一個Opacity 0.5矩形，矩形的不透明度在頁面加載後設置一秒。它是可怕的。

我做了一個repro應用程序，錄製了問題並提交了一個連接錯誤。

https://connect.microsoft.com/VisualStudio/feedback/details/792303/windows-store-xaml-atrocious-obvious-delayed-application-of-opacity#details