Question

我正在创建一个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>

（通过录制生成状态）简短：堡垒测试我正在做几件事，改变图像的宽度和高度并改变对齐

我缺少什么？我认为这是一个非常小的事情，但我不知道是什么。

Answer 1

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

我不知道这是否是一个好的解决方案，但它确实有效。

所以我将构造函数更改为：

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

Window size changed事件处理状态并激活正确的状态。

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");
    }
}

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

Answer 2

有一种更好的方法可以解决您的问题。您必须将您的visualstate添加到布局根目录（当然是网格）。

<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部分中提供的内容进行更新（在此示例中，没有任何内容会发生变化，您可以简单地删除“可见”并添加“折叠”，以及还要在网格中添加一种颜色以查看更改。

视觉状态不适用于Winrt应用程序

2 个答案: