4

縦向きおよび横向きモードで以下の外観にしたいSilverlightページがあります。基本的に、グリッドに配置された 3 つの画像があります。大きな画像は 2 列にまたがっています。電話が回転すると、画像は回転しますが、全体のレイアウトは回転しません。小さい画像は [戻る]、[ウィンドウ]、[検索] ボタンの近くにあり、大きい画像は電話の上部にあります。

ここに画像の説明を入力

私はこの効果を達成するために多くの方法を試しましたが、いずれも何らかの点で満足のいくものではありませんでした. 誰かが私に欠けているものを指摘してくれることを願っています。少なくとも、他の誰かが私と同じ結論に至るまで 4 ～ 5 日を無駄にするのを防いでくれることを願っています。 太字の質問:

  • 私が最初に試したのは、RotateTransform を LayoutRoot 要素に適用し、電話の回転が横向きに変わるたびに -90 度回転させることでした。レイアウト ルートの高さと幅を「自動」ではなく 800 と 400 にハード コードする必要がありました。このソリューションはほとんど機能しましたが、ページが描画された後に RotateTransform が適用されます。800x400 の画面に 400x800 の画像として描画されるため、上部 200 ピクセルと下部 200 ピクセルは描画されません。これは、回転後に明らかになり、(現在) 左右の部分が失われています。 RotateTransform が適用された後にすべてのピクセルがそこにあるように、レイアウト エンジンを強制的に画面から引き離す方法はありますか?

  • 次に検討した (ただし試していない) ことは、SupportedOrientations ページを「PortraitOnly」に設定し、加速度計を使用して独自の「OnOrientationChanged」イベントを生成し、電話が横向きに傾いたときに画像を選択的に 90 度回転させることでした。 . これは悪い考えだと判断しました。なぜなら、私のアプリで回転が他のすべてのアプリとまったく同じように機能しなかった場合、微妙な方法でこれを間違えて混乱を招く可能性があるからです。 要素を含むグリッドのレイアウトを自動的に更新せずに OnOrientationChanged イベントを発生させる方法はありますか? または、電話の向きを検出するために使用できる他のフックはありますか?

  • 私が最後に試したのは、ここで提供されているアドバイスに似ていました: Windows Phone 7 applications - Orientation Changeとここ: http://blogs.msdn.com/b/ptorr/archive/2010/03/27/strategies-for-dealing -with-orientation-changes.aspx . このソリューションは、OnOrientationChanged イベント ハンドラーと xaml コードでグリッドの行と列の相対的なサイズを変更する必要があるため、私には少し脆弱に思えます。ポートレートモードでは、1列目は5倍、2列目は2倍に設定されています。次に、横向きに切り替えると、行をそれぞれ 1* に設定し、列をそれぞれ 5* と 2* に設定する必要があります。または、小さな画像のサイズをハードコーディングして、行と列を Auto に設定することもできますが、それでも何かをハードコーディングする必要があります。私は他のすべてのオプションを使い果たしたので、これが私が立ち往生している解決策だと思います.

何か不足していますか、それともこれがその方法ですか？

4

1 に答える 1

4

何もハードコーディングする必要はありません。必要なのは賢い設計です。複数の向きをサポートする優れたアプリケーションを開発するには、混乱を招くことなくオブジェクトを好きなように再配置できる巧妙なグリッド レイアウトを考え出す必要があります。

あなたの状況では、レイアウトを検討してください：

 <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="3.5*" />
            <ColumnDefinition Width="1.5*" />
            <ColumnDefinition Width="2*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="2.5*"/>
            <RowDefinition Height="1.5*" />
            <RowDefinition Height="1.5*" />
            <RowDefinition Height="2*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Margin="12,17,0,28" Grid.ColumnSpan="3" Grid.RowSpan="3"></StackPanel>
        <Image Name="bigSmiley" Margin="8" Grid.RowSpan="3" Grid.ColumnSpan="3" Source="big.jpg"
               Stretch="Fill"/>
        <Image Name="smallSmiley1" Grid.Row="3" Source="smiley.jpg" Stretch="Fill" Margin="8"/>
        <Image Name="smallSmiley2" Grid.Row="3" Grid.Column="1"
               Source="smiley.jpg" Stretch="Fill" Margin="8"
               Grid.ColumnSpan="2" />
        <!--ContentPanel - place additional content here-->
    </Grid>

レイアウト

そして、向きを変更した方法は次のようになります。

private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
        {
            if ((e.Orientation & PageOrientation.Portrait) == PageOrientation.Portrait)
            {
                Grid.SetRow(bigSmiley, 0);
                Grid.SetColumn(bigSmiley, 0);
                Grid.SetColumnSpan(bigSmiley, 3);
                Grid.SetRowSpan(bigSmiley, 3);
                Grid.SetRow(smallSmiley1, 3);
                Grid.SetColumn(smallSmiley1, 0);
                Grid.SetColumnSpan(smallSmiley1, 1);
                Grid.SetRowSpan(smallSmiley1, 1);
                Grid.SetRow(smallSmiley2, 3);
                Grid.SetColumn(smallSmiley2, 1);
                Grid.SetColumnSpan(smallSmiley2, 2);
                Grid.SetRowSpan(smallSmiley2, 1);
            }
            else
            {
                Grid.SetRow(bigSmiley, 0);
                Grid.SetColumn(bigSmiley, 0);
                Grid.SetColumnSpan(bigSmiley, 2);
                Grid.SetRowSpan(bigSmiley, 4);
                Grid.SetRow(smallSmiley1, 0);
                Grid.SetColumn(smallSmiley1, 2);
                Grid.SetColumnSpan(smallSmiley1, 1);
                Grid.SetRowSpan(smallSmiley1, 2);
                Grid.SetRow(smallSmiley2, 2);
                Grid.SetColumn(smallSmiley2, 2);
                Grid.SetColumnSpan(smallSmiley2, 1);
                Grid.SetRowSpan(smallSmiley2, 2);
            }
        }

結果： 結果

問題が解決することを願っています。問題を解消するより良い設計が常にあることを忘れないでください。:)

于 2012-07-09T06:54:29.163 に答える