视觉状态不起作用Winrt应用程序

但是，当我创建一个视觉状态（例如：snapped）当我调试应用程序时，它不会工作。

设置我的网页：

<common:LayoutAwarePage 
x:Name="pageRoot" 
x:Class="Jukebox.Windows8Metro.LoginPage" 
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:Jukebox.Windows8Metro" 
xmlns:common="using:Jukebox.Windows8Metro.Common" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
mc:Ignorable="d"> 
<Grid Style="{StaticResource LayoutRootStyle}" Background="#FF00A99E"> 
    <Grid VerticalAlignment="Top" Height="768"> 
     <TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="Let's get started" FontSize="44" FontFamily="Assets/Fonts/Oswald/Oswald-Bold.ttf#Oswald" Margin="34,285,34,0" VerticalAlignment="Top" HorizontalAlignment="Center" Foreground="#FFE6E6E6"/> 
     <TextBlock TextWrapping="Wrap" Text="Sign in with a Microsoft account" FontSize="30" FontFamily="Oswald" Margin="0,375,0,0" VerticalAlignment="Top" HorizontalAlignment="Center" Foreground="#FFED197A" Visibility="Collapsed"/> 
     <TextBlock TextWrapping="Wrap" Text="Sign in with a Facebook account" FontSize="30" FontFamily="Oswald" Margin="0,450,0,0" VerticalAlignment="Top" HorizontalAlignment="Center" Foreground="#FF17AA9E" Visibility="Collapsed"/> 
     <TextBlock TextWrapping="Wrap" Text="Sign in" FontSize="30" FontFamily="Oswald" Margin="0,525,0,0" VerticalAlignment="Top" HorizontalAlignment="Center" Foreground="#FFED197A" Visibility="Collapsed"/> 
     <Image x:Name="image3" HorizontalAlignment="Center" Height="178" Margin="0,90,0,0" VerticalAlignment="Top" Width="501" Source="Assets/WideLogoHiresTransparant.png"/> 
     <Image x:Name="image2" HorizontalAlignment="Center" Height="53" Margin="0,375,0,0" VerticalAlignment="Top" Width="316" Source="Assets/LoginButtons/LoginMS.png" Stretch="Fill" Tapped="LoginMicrosoft" /> 
     <Image x:Name="image" HorizontalAlignment="Center" Height="53" Margin="0,450,0,0" VerticalAlignment="Top" Width="316" Source="Assets/LoginButtons/LoginFB.png" Stretch="Fill" Tapped="LoginFacebook" /> 
     <Image x:Name="image1" HorizontalAlignment="Center" Height="53" Margin="0,525,0,0" VerticalAlignment="Top" Width="316" Source="Assets/LoginButtons/Login.png" Stretch="Fill" Tapped="Login" /> 
     <ProgressRing x:Name="pgWait" Height="100" Width="100" Foreground="#FFED197A"/> 
    </Grid> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup x:Name="ApplicationViewStates"> 
      <VisualState x:Name="FullScreenLandscape"/> 
      <VisualState x:Name="Filled"/> 
      <VisualState x:Name="FullScreenPortrait"> 
       <Storyboard></Storyboard> 
      </VisualState> 
      <VisualState x:Name="Snapped"> 
       <Storyboard> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="image"> 
         <DiscreteObjectKeyFrame KeyTime="0"> 
          <DiscreteObjectKeyFrame.Value> 
           <x:Double>284.4</x:Double> 
          </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="image"> 
         <DiscreteObjectKeyFrame KeyTime="0"> 
          <DiscreteObjectKeyFrame.Value> 
           <x:Double>47.7</x:Double> 
          </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="image1"> 
         <DiscreteObjectKeyFrame KeyTime="0"> 
          <DiscreteObjectKeyFrame.Value> 
           <x:Double>284.4</x:Double> 
          </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="image1"> 
         <DiscreteObjectKeyFrame KeyTime="0"> 
          <DiscreteObjectKeyFrame.Value> 
           <x:Double>47.7</x:Double> 
          </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="image2"> 
         <DiscreteObjectKeyFrame KeyTime="0"> 
          <DiscreteObjectKeyFrame.Value> 
           <x:Double>284.4</x:Double> 
          </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="image2"> 
         <DiscreteObjectKeyFrame KeyTime="0"> 
          <DiscreteObjectKeyFrame.Value> 
           <x:Double>47.7</x:Double> 
          </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="textBlock"> 
         <DiscreteObjectKeyFrame KeyTime="0"> 
          <DiscreteObjectKeyFrame.Value> 
           <x:Double>252</x:Double> 
          </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="textBlock"> 
         <DiscreteObjectKeyFrame KeyTime="0"> 
          <DiscreteObjectKeyFrame.Value> 
           <x:Double>60</x:Double> 
          </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
        <DoubleAnimation Duration="0" To="39" Storyboard.TargetProperty="(TextBlock.FontSize)" Storyboard.TargetName="textBlock" d:IsOptimized="True"/> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="image3"> 
         <DiscreteObjectKeyFrame KeyTime="0"> 
          <DiscreteObjectKeyFrame.Value> 
           <x:Double>292</x:Double> 
          </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="image3"> 
         <DiscreteObjectKeyFrame KeyTime="0"> 
          <DiscreteObjectKeyFrame.Value> 
           <x:Double>103</x:Double> 
          </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="image3"> 
         <DiscreteObjectKeyFrame KeyTime="0"> 
          <DiscreteObjectKeyFrame.Value> 
           <Thickness>0,119,0,0</Thickness> 
          </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)" Storyboard.TargetName="image3"> 
         <DiscreteObjectKeyFrame KeyTime="0"> 
          <DiscreteObjectKeyFrame.Value> 
           <HorizontalAlignment>Stretch</HorizontalAlignment> 
          </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)" Storyboard.TargetName="textBlock"> 
         <DiscreteObjectKeyFrame KeyTime="0"> 
          <DiscreteObjectKeyFrame.Value> 
           <HorizontalAlignment>Stretch</HorizontalAlignment> 
          </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)" Storyboard.TargetName="image2"> 
         <DiscreteObjectKeyFrame KeyTime="0"> 
          <DiscreteObjectKeyFrame.Value> 
           <HorizontalAlignment>Stretch</HorizontalAlignment> 
          </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)" Storyboard.TargetName="image"> 
         <DiscreteObjectKeyFrame KeyTime="0"> 
          <DiscreteObjectKeyFrame.Value> 
           <HorizontalAlignment>Stretch</HorizontalAlignment> 
          </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)" Storyboard.TargetName="image1"> 
         <DiscreteObjectKeyFrame KeyTime="0"> 
          <DiscreteObjectKeyFrame.Value> 
           <HorizontalAlignment>Stretch</HorizontalAlignment> 
          </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)" Storyboard.TargetName="pgWait"> 
         <DiscreteObjectKeyFrame KeyTime="0"> 
          <DiscreteObjectKeyFrame.Value> 
           <HorizontalAlignment>Stretch</HorizontalAlignment> 
          </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image2"> 
         <DiscreteObjectKeyFrame KeyTime="0"> 
          <DiscreteObjectKeyFrame.Value> 
           <Visibility>Visible</Visibility> 
          </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="textBlock"> 
         <DiscreteObjectKeyFrame KeyTime="0"> 
          <DiscreteObjectKeyFrame.Value> 
           <Thickness>34,252,34,0</Thickness> 
          </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="image2"> 
         <DiscreteObjectKeyFrame KeyTime="0"> 
          <DiscreteObjectKeyFrame.Value> 
           <Thickness>18,342,18,0</Thickness> 
          </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="image"> 
         <DiscreteObjectKeyFrame KeyTime="0"> 
          <DiscreteObjectKeyFrame.Value> 
           <Thickness>18,415,18,0</Thickness> 
          </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="image1"> 
         <DiscreteObjectKeyFrame KeyTime="0"> 
          <DiscreteObjectKeyFrame.Value> 
           <Thickness>18,488,18,0</Thickness> 
          </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
</Grid>

（由记录产生的状态）短：劳德测试我做几件事情，从图像变化的宽度和高度，并更改对齐

我在想什么？我认为它是一个非常小的东西，但我不知道是什么。

来源

2013-03-17 brouckaertd

请添加您的解决方案作为您的问题的答案。这样你可以将它标记为已接受并关闭你的问题。你需要等待接受，虽然 – 2013-03-17 16:11:22

我想回答我的问题，但我需要等待7个小时。（因为我的声望很低...）因此，明天我会复制/粘贴我的解决方案作为答案。 – brouckaertd 2013-03-17 16:29:40

我刚刚收到一些声誉，现在我已将它添加为答案。在两天内，我会将其标记为已接受 – brouckaertd 2013-03-17 17:02:30

感谢这篇文章我解决了我的问题。 How to programmatically respond to Snap in Windows 8 Metro

我不知道这是否是一个好的解决方案，但它的工作原理。

所以我改变了构造这样：

public LoginPage() 
{ 
    this.InitializeComponent(); 
    // Register for the window resize event 
    Window.Current.SizeChanged += WindowSizeChanged; 
}

窗口大小改变事件处理状态和激活正确的状态。

private void WindowSizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e) 
{ 
    // Obtain view state by explicitly querying for it 
    ApplicationViewState viewState = ApplicationView.Value; 
    if (viewState == ApplicationViewState.Filled) 
    { 
     System.Diagnostics.Debug.WriteLine("viewState is Filled"); 
    } 
    else if (viewState == ApplicationViewState.FullScreenLandscape) 
    { 
     System.Diagnostics.Debug.WriteLine("viewState is FullScreenLandscape"); 
    } 
    else if (viewState == ApplicationViewState.Snapped) 
    { 
     System.Diagnostics.Debug.WriteLine("viewState is Snapped"); 
     //Activate the Snapped state 
     VisualStateManager.GoToState(this, "Snapped", true); 
    } 
    else if (viewState == ApplicationViewState.FullScreenPortrait) 
    { 
     System.Diagnostics.Debug.WriteLine("viewState is FullScreenPortrait"); 
    } 
    else 
    { 
     System.Diagnostics.Debug.WriteLine("viewState is something unexpected"); 
    } 
}

也许有更好的方法来解决这个问题吗？

来源

2013-03-17 17:00:15 brouckaertd

有更好的方法来解决你的问题。您必须将视觉状态添加到布局根（当然是网格）。

<common:LayoutAwarePage 
    x:Name="pageRoot" 
    x:Class="MyApp.LoginPage" 
    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:Jukebox.Windows8Metro" 
    xmlns:common="using:Jukebox.Windows8Metro.Common" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d"> 
     <Grid x:Name="LayoutRoot"> 
     <Grid x:Name="foo"> 
      <!--Your stuff--> 
     </Grid> 
     <VisualStateManager.VisualStateGroups>  
      <VisualStateGroup x:Name="ApplicationViewStates"> 
       <VisualState x:Name="FullScreenLandscape"/> 
       <VisualState x:Name="Filled"/> 
       <VisualState x:Name="FullScreenPortrait"/> 
       <VisualState x:Name="Snapped"> 
        <Storyboard> 
         <!--Sample--> 
         <ObjectAnimationUsingKeyFrames Storyboard.TargetName="foo" Storyboard.TargetProperty="Visibility"> 
          <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> 
         </ObjectAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualState> 
      </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 
    </Grid> 
</common:LayoutAwarePage>

你应该避免在代码背后处理你的视觉状态。当你的页面会改变他的视觉状态（例如捕捉）时，视图将会用你在snapp部分提供的内容进行更新（在这个例子中，没有什么会改变，你可以简单地移除“visible”并添加“collapsed”并在网格中添加一种颜色以查看更改）。

来源

2013-03-17 18:07:52 David

我完全是这样做的，但是我的页面并没有自动触发视觉状态改变。随着代码在我的页面后面的代码知道，视觉状态已更改并更新布局。 [我用我的完整页面更新了我的问题。] – brouckaertd 2013-03-18 11:44:52

视觉状态不起作用Winrt应用程序

回答

相关问题