視覺狀態不起作用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應用程序

回答

相關問題