1

私が作成している単純なアプリがあり、さまざまな状態 (フル、スナップなど) で少し問題があります。

以下は、私のアプリが横向きの全画面表示でどのように見えるかです。ご覧のとおり、2 つのグリッドがあります。1 つは左揃え、1 つは右揃え:

ここに画像の説明を入力

ここで、ユーザーがアプリを左または右にスナップすると、次のように、スナップ モードで 2 番目のグリッド (右側: グリッド 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 を特定の幅に設定していることがわかります。これは、ページが「スナップ済み」状態に移行したときに発生します。

于 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

コード スニペットの 2 番目のグリッドには、120 ピクセルの左余白があります。その中のテキストには、リストの右側に配置するために 245 ピクセルの左余白があります。ネストされたオブジェクトのマージンは加算されるため、テキストの有効な左マージンは 365 ピクセルです (ネストされている他のオブジェクトを考慮していません)。ページをスナップ ビューに配置するときにこれらの余白の値も変更しない限り、テキストは右にずれすぎて見えなくなります。(スナップ ビューの幅は 320 ピクセルしかないことを思い出してください!)

ページ上の 2 つのグリッドの非常に単純化された例を次に示します。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 に答える