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

2012/02/09

このトピックでは、アプリケーション内のコントロールに傾斜効果を適用する方法を示します。このトピックの内容に進む前に、「Windows Phone の傾斜効果の概要」を読んでください。このトピックでは、次の手順について説明します。

  1. 基本的な Windows Phone アプリケーションを作成し、TiltEffect クラス ファイルを追加する

    注注:

    TiltEffect.cs ファイルは、傾斜効果を有効化または抑制する依存関係プロパティを定義します。また、コントロールで視覚的な "傾斜" 効果を作成するために必要なコードも提供します。

  2. 傾斜するコントロールの組み合わせを追加する

  3. IsTiltEnabled 依存関係プロパティをグローバルに適用し、指定されたすべてのコントロールに傾斜機能を提供する

  4. SuppressTilt 依存関係プロパティを単一のコントロールに適用し、傾斜機能を抑制する

このセクションでは、基本的な傾斜効果アプリケーションを作成し、TiltEffect.cs ファイルをインポートします。

基本的な傾斜効果アプリケーションを作成するには

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

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

  3. [新しいプロジェクト] ウィンドウが表示されます。Visual C# のテンプレートを展開してから、Silverlight for 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 タグを削除します。

    <!--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 で、次の名前空間の宣言をページの先頭に追加します。

    xmlns:local="clr-namespace:[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. [デバッグ]、[デバッグ開始] の順にメニュー コマンドを選択してアプリケーションを実行します。これにより、エミュレーター ウィンドウが開いてアプリケーションが起動されるか、または選択内容に基づいてデバイスに配置されます。アプリケーションを実行すると、すべてのコントロールに傾斜効果が適用されていることを確認できます。例外は、傾斜抑制の依存関係プロパティが有効になっているボタンのみです。

表示: