Question

我有一个简单的应用程序，我正在处理不同的状态（Full，Snapped等）。

下面是我的应用在横向全屏视图中的外观。如您所见，它有2个网格。一个左对齐，一个右对齐：

enter image description here

现在，当用户向左或向右按下我的应用程序时，我只想在捕捉模式下看到第二个网格（在右侧：网格TWO），如下所示：

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>

Answer 1

您需要以下内容：

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

你会看到我们将Grid1设置为隐藏，Grid2设置为特定宽度。当页面移动到“Snapped”状态时会发生这种情况。

Answer 2

尝试在visualstate ='snapped'

中添加它

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

Answer 3

代码段中的第二个网格的左边距为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更改为Snapped时，我们不仅要更改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>

Snapped状态的不同视图（Metro应用程序）

3 个答案: