Snapped狀態的不同視圖（Metro應用程序）

我有一個簡單的應用程序，我正在對不同狀態（Full，Snapped等）有點麻煩。Snapped狀態的不同視圖（Metro應用程序）

下面是我的應用在風景，全屏視圖中的外觀。正如你所看到的，它有2個網格。一個左對齊，1個右對齊：

enter image description here

現在，當用戶捕捉我的應用程序，以向左或向右，我只想要第二個網格（右側：網格二）在可見抓拍模式，就像這樣：

enter image description here

我們怎樣才能做到這一點？

我已經嘗試了幾件事情，但我目前的代碼也無法正常工作。我知道這是錯誤的，但在這裏它是無論如何：

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

<Grid Grid.Row="1" Margin="120, 30, 0, 0" HorizontalAlignment="Stretch"> 
    <ListBox x:Name="theList" HorizontalAlignment="Left" Width="240" VerticalAlignment="Stretch" BorderBrush="{x:Null}" Background="{x:Null}"> 
     <ListBox.ItemTemplate> 
      <DataTemplate> 
       <ListBoxItem Content="{Binding Name, Mode=TwoWay}" /> 
      </DataTemplate> 
     </ListBox.ItemTemplate> 
    </ListBox> 
    <TextBox x:Name="theNote" Text="{Binding ElementName=theList, Path=SelectedItem.Content, Mode=TwoWay}" AcceptsReturn="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="245,0,10,0" BorderBrush="{x:Null}" BorderThickness="0" /> 
</Grid> 

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

來源

2012-12-26 Arrow

其實，你的圖片似乎顯示*三個網格...網格1，網格2，以及後退按鈕和頁面標題的主要應用網格。您的代碼片段僅顯示其中的2個 - 主應用網格和其下的未命名網格。如果你想在你的VisualState中操作其中的任何一個，你需要給它們一個名字屬性。 –

你需要以下條件：

<VisualState x:Name="Snapped"> 
      <Storyboard> 
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid1" Storyboard.TargetProperty="Visibility"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/> 
       </ObjectAnimationUsingKeyFrames>

你會看到我們GRID1設置爲隱藏和GRID2爲特定的寬度。當頁面移動到「捕捉」狀態時會發生這種情況。

來源

2012-12-26 09:18:35

對不起@Faster解決方案 - 當我把它放在快照視圖中時，它只顯示一個空白屏幕（只有應用程序名稱和後退按鈕） – Arrow

@Faster Solutions：在您的代碼片段中，您將網格的Visibility屬性設置爲按鈕樣式資源...可能不是你想要的。 –

嘗試在的visualSTATE =添加此「啪」

  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GridOne" Storyboard.TargetProperty="Visibility"> 
       <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

來源

2012-12-26 09:26:59 king

對不起@king - 它只是顯示一個空白屏幕（只有應用程序名稱和後退按鈕），當我把它放在快照視圖 – Arrow

在您的代碼段第二格柵有120個像素的左邊距。其中的文本有一個245像素的左邊距，以將其放置在列表的右側。嵌套對象上的邊距將是可加的，因此文本的有效左邊距爲365像素（甚至不考慮嵌套在其中的其他邊緣）。除非您在頁面放置在快照視圖中時也更改這些邊距值，否則文本將太靠右看。（回想一下，對齊視圖只有320像素寬！）

這是一個非常簡單的頁面上的兩個網格的例子。請注意，Grid2具有較大的左邊距，可將其放置在Grid1的右側。網格內的文本框沒有左邊距。

<Grid x:Name="Grid1" Grid.Row="1" Margin="120,30,0,0" Width="240" HorizontalAlignment="Left"> 
     <TextBox x:Name="theFirstNote" Text="This is grid 1." AcceptsReturn="True" HorizontalAlignment="Stretch" 
       VerticalAlignment="Stretch" Margin="0,0,10,0" BorderBrush="{x:Null}" BorderThickness="0" /> 
    </Grid> 

    <Grid x:Name="Grid2" Grid.Row="1" Grid.Column="1" Margin="370,30,0,0" HorizontalAlignment="Stretch"> 
     <TextBox x:Name="theSecondNote" Text="This is grid 2." AcceptsReturn="True" HorizontalAlignment="Stretch" 
       VerticalAlignment="Stretch" Margin="0,0,10,0" BorderBrush="{x:Null}" BorderThickness="0" /> 
    </Grid>

當的VisualState變化啪的一聲，我們不僅要改變GRID1的知名度，但我們也必須改變GRID2的保證金所以它的實際可見：

   <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> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid1" Storyboard.TargetProperty="Visibility"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid2" Storyboard.TargetProperty="Margin"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="10,10,10,10"/> 
        </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualState>

來源

2012-12-28 04:54:22

Snapped狀態的不同視圖（Metro應用程序）

回答

相關問題