syncfusion-winui-shadow

Shadow Control の実装（SfShadow）

Syncfusion WinUI Shadow コントロール（SfShadow）は、任意のフレームワーク要素にカスタマイズ可能な影を適用します。これにより視覚的な奥行きが生まれ、重なり合う UI 要素を区別しやすくなります。影の効果は、モダンなデザイン原則に基づいて立体感と視覚的な階層を加え、ユーザーインターフェイスを向上させます。

このスキルを使用する場面

次のような場合に Shadow コントロールを使用します。

• UI 要素に奥行きを加える - ボタン、カード、パネル、画像に影を適用します
• 視覚的な階層を作成する - インターフェイス内のレイヤーや高さを区別します
• マテリアルデザインを強化する - モダンな UI パターンに高さの効果を実装します
• UX の明瞭さを向上させる - インタラクティブな要素や重要な要素をユーザーが識別しやすくします
• デザインに仕上げを加える - プロフェッショナルで魅力的なユーザーインターフェイスを作成します

トリガーキーワード： shadow、SfShadow、奥行き、高さ、ドロップシャドウ、ぼかし効果、視覚的な奥行き、レイヤー、マテリアルデザイン、重なり合う要素

コンポーネントの概要

コントロール： SfShadow
名前空間： Syncfusion.UI.Xaml.Core
NuGet パッケージ： Syncfusion.Core.WinUI
プラットフォーム： WinUI 3 Desktop（.NET 5+）

主な機能

• 任意のフレームワーク要素（ボタン、画像、図形、パス）に影を適用
• アルファ透明度を指定して影の色をカスタマイズ
• ぼかしの強さを調整し、柔らかい影やシャープな影を設定
• X/Y オフセットで影の位置を調整
• 影の角を要素の角丸に合わせる
• 影を動的に有効化／無効化
• テーマを自動サポート（ライト／ダークモード）

ドキュメントとナビゲーションガイド

はじめにと基本的な使い方

📄 参照： references/getting-started.md

• Syncfusion.Core.WinUI NuGet パッケージのインストール
• WinUI 3 デスクトップアプリケーションの作成
• Syncfusion.UI.Xaml.Core 名前空間のインポート
• XAML と C# での SfShadow コントロールの初期化
• ボタンへの影の適用
• 画像への影の適用
• 図形やパスへの影の適用
• 各シナリオの完全なコード例

カスタマイズオプション

📄 参照： references/customization.md

• 影の色の変更（Color プロパティ）
• ぼかし半径の調整（BlurRadius プロパティ）
• 角丸の設定（ShadowCornerRadius プロパティ）
• 影の配置（OffsetX、OffsetY プロパティ）
• 影の有効化／無効化（EnableShadow プロパティ）
• すべてのプロパティの既定値
• 複数のカスタマイズの組み合わせ
• 高度な視覚効果

クイックスタートの例

ボタンへの基本的な影の適用

XAML：

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:syncfusion="using:Syncfusion.UI.Xaml.Core">
    
    <Grid>
        <syncfusion:SfShadow>
            <Button Height="50" Width="100" Content="Click Me"/>
        </syncfusion:SfShadow>
    </Grid>
</Page>

C#：

using Syncfusion.UI.Xaml.Core;

// Create shadow control
SfShadow shadow = new SfShadow();

// Create button
Button button = new Button();
button.Height = 50;
button.Width = 100;
button.Content = "Click Me";

// Add button to shadow
shadow.Content = button;

よくあるパターン

1. カスタムシャドウを適用した高さのあるボタン

<syncfusion:SfShadow 
    Color="DarkBlue" 
    BlurRadius="10" 
    OffsetX="5" 
    OffsetY="5">
    <Button Height="50" Width="120" Content="Action"/>
</syncfusion:SfShadow>

2. 柔らかな影を付けたカード

<syncfusion:SfShadow 
    BlurRadius="15" 
    OffsetX="0" 
    OffsetY="8"
    ShadowCornerRadius="8">
    <Border 
        Background="White" 
        CornerRadius="8" 
        Padding="20">
        <TextBlock Text="Card Content"/>
    </Border>
</syncfusion:SfShadow>

3. 影の効果を付けた画像

<syncfusion:SfShadow 
    BlurRadius="12" 
    OffsetX="4" 
    OffsetY="4">
    <Image 
        Height="150" 
        Width="150" 
        Source="/Assets/photo.png"/>
</syncfusion:SfShadow>

4. 形状に合わせた影を付けた円形ボタン

<syncfusion:SfShadow 
    ShadowCornerRadius="25"
    BlurRadius="8"
    OffsetX="3"
    OffsetY="3">
    <Button 
        Height="50" 
        Width="50" 
        CornerRadius="25"
        Content="+"
        FontSize="24"/>
</syncfusion:SfShadow>

5. 影を付けた星評価

<StackPanel Orientation="Horizontal">
    <syncfusion:SfShadow>
        <Path Data="M44.5 4L54.0608 33.4114H85L59.9696 51.5886L69.5304 81L44.5 62.8228L19.4696 81L29.0304 51.5886L4 33.4114H34.9392L44.5 4Z" 
              Fill="#FFD700"/>
    </syncfusion:SfShadow>
    
</StackPanel>

6. 条件付きで有効になる影

<syncfusion:SfShadow EnableShadow="{Binding IsElevated}">
    <Button Content="Toggle Shadow"/>
</syncfusion:SfShadow>

// Toggle shadow programmatically
shadow.EnableShadow = false; // Disable shadow
shadow.EnableShadow = true;  // Enable shadow

主なプロパティ

プロパティ	型	既定値	説明
Content	object	null	影を適用する UI 要素
Color	Color	黒（アルファ 25%）	透明度を指定した影の色
BlurRadius	double	8	ぼかしの強さ（値が大きいほど柔らかな影）
ShadowCornerRadius	double	0	影の角丸の半径
OffsetX	double	4	水平方向の影のオフセット（+ = 右、- = 左）
OffsetY	double	4	垂直方向の影のオフセット（+ = 下、- = 上）
EnableShadow	bool	true	影の効果を表示または非表示にする

プロパティの使用上のヒント

Color:

• リアルな影を表現するには、半透明の色を使用します
• 控えめな効果にするには、影の色を背景色に合わせます
• 高さがあるほど、より濃い影を使用します

BlurRadius:

• 0-5：シャープで近い影（低い高さ）
• 8-12：標準的な高さの影
• 15+：柔らかく遠い影（高い高さ）

Offsets:

• X/Yが同じ：斜めの影（バランスの取れた奥行き）
• X=0、Y>0：ドロップシャドウ（一般的なパターン）
• 負の値：要素の上または左にできる影

ShadowCornerRadius:

• コンテンツのCornerRadiusと一致させる必要があります
• 影をシームレスに見せます
• 角丸ボタンやカードには欠かせません

一般的な使用例

マテリアルデザインの高さレベル

レベル1（通常時）：

<syncfusion:SfShadow OffsetX="0" OffsetY="2" BlurRadius="4">
    <Button Content="Resting"/>
</syncfusion:SfShadow>

レベル2（持ち上げた状態）：

<syncfusion:SfShadow OffsetX="0" OffsetY="4" BlurRadius="8">
    <Button Content="Raised"/>
</syncfusion:SfShadow>

レベル3（さらに高くした状態）：

<syncfusion:SfShadow OffsetX="0" OffsetY="8" BlurRadius="16">
    <Button Content="Elevated"/>
</syncfusion:SfShadow>

影を使ったホバー効果

<Button.Style>
    <Style TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <syncfusion:SfShadow x:Name="ButtonShadow" OffsetY="2" BlurRadius="4">
                        <ContentPresenter/>
                    </syncfusion:SfShadow>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="ButtonShadow" Property="OffsetY" Value="8"/>
                            <Setter TargetName="ButtonShadow" Property="BlurRadius" Value="16"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Button.Style>

画像に影を付けたギャラリー

<ItemsControl ItemsSource="{Binding Photos}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <syncfusion:SfShadow 
                BlurRadius="10" 
                OffsetX="4" 
                OffsetY="4"
                Margin="10">
                <Image Source="{Binding ImagePath}" Height="150" Width="150"/>
            </syncfusion:SfShadow>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

ベストプラクティス

パフォーマンス

• 頻繁に更新される要素には、影を控えめに使用します
• パフォーマンスに影響が出る場合は、アニメーション中に影を無効にすることを検討します
• 項目が多いリストでは、パフォーマンス向上のためにぼかし半径を小さくします

ビジュアルデザイン

• 高さの一貫性：同じ高さの要素には、同じ影の設定を使用します
• 自然な光源：左上から光が当たるように影を配置します（OffsetX=4、OffsetY=4）
• 控えめな影：強い影は避け、透明度とぼかしを使用します
• テーマへの適応：ライトテーマとダークテーマの両方で影をテストします

アクセシビリティ

• 情報を伝えるために影だけに頼らないでください
• 影の有無にかかわらず、十分な色のコントラストを確保してください
• 影による奥行きの代わりとなる視覚的な手がかりを用意してください

避けるべきよくある間違い

• ❌ コンテンツのCornerRadiusに合わせずにShadowCornerRadiusを設定する
• ❌ 不透明な黒い影を使用する（必ず透明度を加えてください）
• ❌ 多くの要素に過度なぼかし半径を設定する（パフォーマンスに影響します）
• ❌ UI全体で影の方向が一貫していない
• ❌ Syncfusion.UI.Xaml.Core名前空間のインポートを忘れる

トラブルシューティング

影が見えない場合：

• EnableShadowがtrueであることを確認します
• 影のオフセットが十分か確認します（OffsetX/OffsetYを増やしてみてください）
• ぼかし半径が0より大きいことを確認します
• 影の色が背景色と同じではないことを確認します
• コンテンツの背景が透明かどうか確認します

影が切れて表示される場合：

• SfShadowの周囲にマージンまたはパディングを追加します
• 親コンテナーのサイズを大きくします
• 親でClipToBoundsがtrueに設定されていないことを確認します

パフォーマンスに問題がある場合：

• ビュー内の影の数を減らします
• ぼかし半径を小さくします
• EnableShadowを使用して、影を条件付きで表示します
• 影付きの項目を含むリストでは、仮想化を検討します

---

詳しい情報が必要ですか？ 詳細なドキュメントと使用例については、上記のナビゲーションガイドでリンクされているリファレンスファイルをお読みください。