UWP：XAMLでシャドーを作成する

Question

現在、UWPで2つの楕円要素を持つ円形のボタンを作成し、そのうちの1つが特定の角度でシャドーするようにしたいと考えています。

WPF XAMLを：：

<Ellipse> 
    <Ellipse.BitmapEffect> 
    <DropShadowBitmapEffect Color="Black" Direction="-50" ShadowDepth="50" Softness=".7"/> 
    </Ellipse.BitmapEffect> 
</Ellipse> 

UWPの等価は何私はこのようになりますWPFでそうする方法を見つけましたか？

Answer 1

最も簡単な方法は、UWPコミュニティツールキットのDropShadowPanelを使用することです。

だから、最初だけでインストール

インストール・パッケージMicrosoft.Toolkit.Uwp.UI.Controls 2.0.0

-Versionは、その後、あなたのXAMLに次のコードを使用し

<controls:DropShadowPanel Color="Black" 
          OffsetX="-50" 
          OffsetY="-50" 
          BlurRadius="50" 
          ShadowOpacity=".7" 
          Width="120" 
          Height="120" 
          HorizontalContentAlignment="Stretch" 
          VerticalContentAlignment="Stretch"> 
    <Ellipse /> 
</controls:DropShadowPanel> 

Answer 2

UWPには、この仕事を行うための別のコンポーネントがあります。これはComposition APIと呼ばれ、NuGetパッケージ "Win2D.uwp"で利用可能です。

基本的には

_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor; 

であなたのビジュアルオブジェクトのためのコンポを取得し、植字を使用してドロップシャドウを作成する必要があります。

_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor; 

// create a red sprite visual 
var myVisual = _compositor.CreateSpriteVisual(); 
myVisual.Brush = _compositor.CreateColorBrush(Colors.Red); 
myVisual.Size = new System.Numerics.Vector2(100, 100); 

// create a blue drop shadow 
var shadow = _compositor.CreateDropShadow(); 
shadow.Offset = new System.Numerics.Vector3(30, 30, 0); 
shadow.Color = Colors.Blue; 
myVisual.Shadow = shadow; 

// render on page 
ElementCompositionPreview.SetElementChildVisual(this, myVisual); 

これはかなり単純ではないという欠点があります。さまざまなブラシを使用してイメージ、ソリッドカラーなどを表示することができますが、それは画面上の既存のビジュアルには適用されません（理解する限り）。基本については、hereをご覧ください。 Probalbyでは、表面ブラシを使用する必要があります。サーフェスブラシには、画像などのさまざまな種類のさまざまな視覚的な種類を保持できます。しかし、現在、楕円のための準備が整ったコンポーネントがあるように見えません。

また、純粋なxaml、might be worth a shotを使用して、すべてのことを行うxaml拡張があり、楕円もサポートしています。

これはすべて現在、microsoftsの部分で進行中の作業であり、今後UWP APIのネイティブな部分になるはずです。