1

我正在制作一个简单的应用程序，但在不同的状态（完整、快照等）方面遇到了一些麻烦。

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

在此处输入图像描述

现在，当用户将我的应用程序向左或向右对齐时，我只希望第二个网格（右侧：Grid TWO）在对齐模式下可见，如下所示：

在此处输入图像描述

我们怎样才能做到这一点？

我已经尝试了几件事，但我当前的代码也不起作用。我知道这是错误的，但无论如何都是这样：

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

4

3 回答 3

1

您需要以下内容：

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

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

于 2012-12-26T09:18:35.957 回答
1

尝试将其添加到 visualstate = 'snapped' 

           <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GridOne" Storyboard.TargetProperty="Visibility">
                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
于 2012-12-26T09:26:59.933 回答
0

代码片段中的第二个网格的左边距为 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>
于 2012-12-28T04:54:22.300 回答