1

我正在创建一个 winrt 应用程序。

但是当我创建一个视觉状态时（例如：捕捉）它在我调试应用程序时不起作用。

我的页面设置：

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

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

我错过了什么？我认为这是一件很小的事情，但我不知道是什么。

4

2 回答 2

2

感谢这篇文章，我解决了我的问题。 如何在 Windows 8 Metro 中以编程方式响应 Snap

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

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

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

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

于 2013-03-17T17:00:15.830 回答
1

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

<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 部分中提供的内容进行更新（在此示例中，什么都不会改变，您可以简单地删除“可见”并添加“折叠”，并且还向网格添加一种颜色以查看更改）。

于 2013-03-17T18:07:52.780 回答