エクスポート (0) 印刷
すべて展開
情報
要求されたトピックは次のとおりです。しかし、このトピックはこのライブラリには含まれていません。

Windows Phone 8 のコントロールの傾斜効果を使用する方法

2014/06/18

対象: Windows Phone 8 および Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

 

このトピックでは、アプリ内のコントロールに傾斜効果を適用する方法を示します。このトピックを確認する前に、「Windows Phone 8 のコントロールの傾斜効果」をお読みください。

このトピックは、次のセクションで構成されています。

 

このセクションでは、ベースの傾斜効果アプリを作成し、TiltEffect.cs ファイルをインポートします。TiltEffect.cs ファイルには、傾斜機能を有効化または抑制する依存関係プロパティが定義されています。 コントロール上に視覚的な "傾斜" 効果を作成するのに必要なコードも含まれています。

基本的な傾斜効果アプリを作成するには

  1. [スタート] メニューから Visual Studio を起動します。

  2. [ファイル]、[新しいプロジェクト] の順にメニュー コマンドを選択し、新しいプロジェクトを作成します。

  3. [新しいプロジェクト] ウィンドウが表示されます。Visual C# のテンプレートを展開し、Windows Phone のテンプレートを選択します。

  4. Windows Phone アプリ のテンプレートを選択します。目的のプロジェクトの名前を入力します。

  5. [OK] をクリックします。新しいプロジェクトが作成され、MainPage.xaml が Visual Studio デザイナー ウィンドウで開きます。

  6. ソリューション エクスプローラーでプロジェクトを右クリックし、[追加] をクリックして、[新しい項目] をクリックします。[クラス] を選択し、ファイルの名前を TiltEffect.cs に変更してから、ページ下部の [追加] をクリックします。

このファイルに必要なコードは、このトピックでは提供されていません。 ControlTiltEffect サンプルを「コントロールの傾斜効果のサンプル」からダウンロードする必要があります。ソリューションをダウンロードしたら、次の手順を実行する必要があります。

TiltEffect.cs ファイルをインポートするには

  1. ダウンロードしたソリューション内で TiltEffect.cs ファイルを探します。

  2. TiltEffect.cs ファイルをプロジェクトにインポートします。

  3. ソリューション エクスプローラーでプロジェクトを右クリックし、[追加] をクリックして、[既存の項目] をクリックします。TiltEffect.cs ファイルを参照し、[追加] をクリックします。

  4. TiltEffect.cs ファイルで名前空間をプロジェクトの名前空間名に変更します。 たとえば、次のコードをこのファイルにコピーした場合、名前空間は ControlTiltEffect になります。

    namespace ControlTiltEffect
    
    

    名前空間をプロジェクトの名前空間に変更します。

このセクションでは、XAML コードを使用して各種コントロールを追加し、傾斜効果を有効化または抑制します。

傾斜可能なコントロールを追加するには

  • MainPage.xaml で、ページ下部にあるコンテンツ パネル セクションの XAML コードに次のコードを追加します。このセクションの前にあるコメントは、"<!--ContentPanel - place additional content here-->" です。そのセクションにある開始 Grid タグと終了 Grid タグを削除します。

    <!--An assortment of controls that will support the tilt effect.-->
            <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
                <Button Width="186" Height="185" Content="Button" 
                  HorizontalAlignment="Left" VerticalAlignment="Top" 
                  Margin="9,20,0,0" />
                <Button Content="Button (Suppressed)" Height="150" 
                  HorizontalAlignment="Left" Margin="37,0,0,161" 
                  VerticalAlignment="Bottom" Width="380"/>
                <CheckBox Content="CheckBox" Height="72" 
                  HorizontalAlignment="Left" Margin="235,25,0,0" 
                  Name="checkBox1" VerticalAlignment="Top" />
                <RadioButton Content="RadioButton" Height="72" 
                  HorizontalAlignment="Left" Margin="235,103,0,0" 
                  Name="radioButton1" VerticalAlignment="Top" />
                <HyperlinkButton Content="HyperlinkButton" Height="30" 
                  HorizontalAlignment="Left" Margin="25,211,0,0" 
                  Name="hyperlinkButton1" VerticalAlignment="Top" 
                  Width="409" />
                <ListBox Height="110" HorizontalAlignment="Left" 
                  Margin="6,472,0,0" Name="listBox1" VerticalAlignment="Top" 
                  Width="460" ItemsSource="{Binding}" >
                    <ListBoxItem Content="First ListBoxItem" ></ListBoxItem>
                    <ListBoxItem Content="Second ListBoxItem" ></ListBoxItem>
                    <ListBoxItem Content="Third ListBoxItem" ></ListBoxItem>
                    <ListBoxItem Content="Fourth ListBoxItem" ></ListBoxItem>
                </ListBox>
            </Grid>
    
    
    メモメモ:

    これらのコントロールを [ツールボックス] からページにドラッグ アンド ドロップし、位置を調整することもできます。次の図に、ページの一般的な見た目を示します。

    AP_CoreCont_Tilt

このセクションでは、ページに IsTiltEnabled 依存関係プロパティを追加し、有効にします。作成したすべてのコントロールに傾斜効果が反映されるように、このプロパティはページのルートに追加してください。傾斜効果は、グローバルに適用することも、単一のコントロールにのみ適用することもできます。また、SuppressTilt 依存関係プロパティを使用すると、単一のコントロールに対する傾斜効果を抑制できます。

傾斜効果の依存関係プロパティを適用するには

  1. MainPage.xaml で、次の名前空間の宣言をページの先頭に追加します。[Namespace] にはアプリの名前空間を入力してください。

    xmlns:local="clr-namespace:[Namespace]"
    
    
  2. MainPage.xaml で、ページの先頭に IsTiltEnabled 依存関係プロパティを追加し、有効にします。

    local:TiltEffect.IsTiltEnabled="True"
    
    

    このコードは TiltEffect.cs ファイルから IsTiltEnabled 依存関係プロパティを参照し、傾斜効果機能をページ上でグローバルに有効にします。

  3. ページの XAML コードで、Content プロパティが Button (Suppressed) に設定されている Button コントロールを探します。そのコードを次のように変更します。

    <Button Content="Button (Suppressed)" Height="150" 
    HorizontalAlignment="Left" Margin="37,0,0,161" VerticalAlignment="Bottom" 
    Width="380" local:TiltEffect.SuppressTilt="True"/>
    
    

    上記のコードで調整したのは、SuppressTilt 依存関係プロパティを追加し、それを True に設定した点だけです。

  4. [デバッグ]、[デバッグ開始] の順にメニュー コマンドを選択してアプリを実行します。これにより、エミュレーター ウィンドウが開き、アプリが起動するか、選択内容に応じてデバイスに展開されます。アプリが実行されたら、すべてのコントロールに傾斜効果が適用されていることを確認できます。唯一の例外はボタンで、傾斜効果を抑制する依存関係プロパティが有効になっています。

表示:
© 2014 Microsoft