syncfusion-winui-shimmer

Name: syncfusion-winui-shimmer
Author: syncfusion

github.com/syncfusionデザイン・UI147 回インストール1 週間前に更新

syncfusion-winui-shimmer について

コンテンツの読み込み中にアニメーション付きスケルトンを表示する、Syncfusion の WinUI SfShimmer コントロールを扱うスキルです。WinUI 開発者向けに、組み込みレイアウトやカスタムプレースホルダー、外観とアニメーションの設定を説明します。

主な機能

017種類の組み込みシマーを使用
02カスタムプレースホルダーの作成
03塗りつぶしと波の外観調整
04アニメーション時間と反復回数の設定

活用シーン

01フィード読み込み中のプレースホルダー表示
02プロフィールやアカウント画面の仮表示
03商品グリッドの読み込み状態表示

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/syncfusion/winui-ui-components-skills --skill syncfusion-winui-shimmer

インストール後、Claude Code で/syncfusion-winui-shimmerを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/

built-in-types.md

custom-layouts.md

customization.md

getting-started.md

詳細

WinUI Shimmer の実装

このスキルを使用するタイミング

次のような場合に、このスキルを使用してください。

コンテンツの読み込み中にスケルトンスクリーンを表示する
読み込みプレースホルダーとしてシマー効果を表示する
データ取得中の体感パフォーマンスを向上させる
リスト、プロフィール、記事、動画の読み込みアニメーションを作成する
非同期のコンテンツ読み込み中に視覚的なフィードバックを提供する
最新の読み込み UX パターン（スケルトンローダー）を実装する

ユーザーが次の内容に言及した場合は、必ずこのスキルを適用してください。 WinUI アプリケーションでのシマー効果、スケルトンスクリーン、読み込みプレースホルダー、コンテンツ読み込みアニメーション、シマーローダー、またはスケルトン UI。

コンポーネントの概要

SfShimmer は Syncfusion の WinUI コントロールで、読み込み処理中にアニメーション付きのプレースホルダーコンテンツ（スケルトンスクリーン）を表示します。7 種類の組み込みシマータイプを備え、あらゆるコンテンツ構造に合わせたカスタムレイアウトにも対応しています。

名前空間： Syncfusion.UI.Xaml.Core
NuGet パッケージ： Syncfusion.Core.WinUI
プラットフォーム： WinUI 3 Desktop（.NET 5 以降、Windows App SDK 1.0 以降）

主な利点： データの読み込み中にコンテンツの構造を表示することで体感パフォーマンスを向上させ、待ち時間中のユーザーの不満を軽減します。

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

はじめに

📄 参照： references/getting-started.md

インストールと NuGet パッケージのセットアップ
名前空間のインポートと基本的な初期化
デフォルトのシマータイプ（CirclePersona）
ライセンス登録の要件
最初の完全なサンプル

組み込みシマータイプ

📄 参照： references/built-in-types.md

7 種類の組み込みシマータイプ（CirclePersona、SquarePersona、Profile、Article、Video、Feed、Shopping）
Type プロパティの使用方法
視覚的な説明と比較
コンテンツに適したタイプの選び方
タイプの切り替え

カスタムレイアウト

📄 参照： references/custom-layouts.md

カスタムシマーデザインを作成するための CustomLayout プロパティ
Grid、StackPanel、Rectangle 要素の使用
複雑なレイアウトの例
シマーを実際のコンテンツ構造に合わせる方法
ベストプラクティスとパフォーマンス

カスタマイズオプション

📄 参照： references/customization.md

Fill プロパティ（背景色）
WaveColor プロパティ（アニメーションの色）
WaveWidth プロパティ（波の幅の制御）
WaveDuration プロパティ（アニメーションの速度）
RepeatCount プロパティ（ビューの繰り返し）
カスタマイズの組み合わせ

クイックスタートの例

<Page
    xmlns:syncfusion="using:Syncfusion.UI.Xaml.Core">
    <Grid>
        <syncfusion:SfShimmer 
            x:Name="shimmer"
            Type="Article"
            Fill="#F6F6F6"
            WaveColor="#E0E0E0"
            RepeatCount="3"/>
    </Grid>
</Page>

using Syncfusion.UI.Xaml.Core;
using Microsoft.UI;

// Create and configure Shimmer
SfShimmer shimmer = new SfShimmer
{
    Type = ShimmerType.Article,
    Fill = Colors.LightGray,
    WaveColor = Colors.White,
    RepeatCount = 3
};

// Add to UI
this.Content = shimmer;

よくあるパターン

1. シンプルなプロフィール読み込みシマー

<syncfusion:SfShimmer Type="Profile"/>

使用する場面： ユーザープロフィールページ、アカウント画面、連絡先情報の読み込み。

2. 繰り返し表示を使用した記事／ブログの読み込み

<Grid>
    <syncfusion:SfShimmer 
        Type="Article"
        RepeatCount="5"
        Fill="#F5F5F5"
        WaveColor="#E0E0E0"/>
</Grid>

使用する場面： ブログフィード、ニュース記事、テキスト中心のコンテンツの読み込み。

3. ショッピング／商品グリッドのシマー

<syncfusion:SfShimmer 
    Type="Shopping"
    RepeatCount="6"
    WaveDuration="1500"/>

使用する場面： E コマースの商品グリッド、ショッピングカタログ、商品ギャラリー。

4. 動画／メディアフィードのシマー

<syncfusion:SfShimmer 
    Type="Video"
    RepeatCount="4"
    Fill="#000000"
    WaveColor="#333333"/>

使用する場面： 動画ストリーミングアプリ、メディアギャラリー、YouTube のようなフィード。

5. 条件付きシマー表示

<Grid>
    
    <syncfusion:SfShimmer 
        x:Name="shimmer"
        Type="Feed"
        Visibility="{x:Bind IsLoading, Mode=OneWay}"/>
    
    
    <ListView 
        x:Name="contentListView"
        Visibility="{x:Bind IsLoaded, Mode=OneWay}"
        ItemsSource="{x:Bind Items}"/>
</Grid>

private bool isLoading = true;
public bool IsLoading
{
    get => isLoading;
    set
    {
        isLoading = value;
        OnPropertyChanged();
    }
}

public bool IsLoaded => !IsLoading;

private async void LoadContentAsync()
{
    IsLoading = true;
    
    try
    {
        var data = await FetchDataAsync();
        contentListView.ItemsSource = data;
    }
    finally
    {
        IsLoading = false;
    }
}

使用する場面： 読み込み状態に応じて、シマーと実際のコンテンツを切り替える。

6. 特定の UI 向けカスタムレイアウト

<syncfusion:SfShimmer>
    <syncfusion:SfShimmer.CustomLayout>
        <Grid RowSpacing="10" ColumnSpacing="15">
            <Grid.RowDefinitions>
                <RowDefinition Height="60"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="60"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            
            
            <Ellipse Grid.Row="0" Grid.RowSpan="2" Width="60" Height="60"/>
            
            
            <Rectangle Grid.Row="0" Grid.Column="1" 
                      Height="15" RadiusX="3" RadiusY="3"
                      HorizontalAlignment="Left" Width="200"/>
            
            
            <Rectangle Grid.Row="1" Grid.Column="1" 
                      Height="12" RadiusX="3" RadiusY="3"
                      HorizontalAlignment="Left" Width="250"/>
            
            
            <Rectangle Grid.Row="2" Grid.ColumnSpan="2" 
                      Height="100" RadiusX="5" RadiusY="5"/>
        </Grid>
    </syncfusion:SfShimmer.CustomLayout>
</syncfusion:SfShimmer>

使用する場面： 組み込みタイプに合わない独自のコンテンツ構造。

主なプロパティ

プロパティ	型	デフォルト	説明
`Type`	ShimmerType	CirclePersona	組み込みのシマーレイアウトの種類です。選択肢：CirclePersona、SquarePersona、Profile、Article、Video、Feed、Shopping。
`CustomLayout`	UIElement	null	特定のコンテンツ構造に合わせたシマーデザインを作成するためのカスタムレイアウトです。
`Fill`	Brush	#F6F6F6	シマービューの背景色（プレースホルダーの色）です。
`WaveColor`	Brush	White	シマー上を移動するアニメーションウェーブの色です。
`WaveWidth`	double	200	アニメーションウェーブの幅（ピクセル単位）です。値が大きいほど、ウェーブの幅が広くなります。
`WaveDuration`	int	1000	ウェーブアニメーションの時間（ミリ秒単位）です。値が大きいほど、アニメーションが遅くなります。
`RepeatCount`	int	1	組み込みのシマービューを垂直方向に繰り返す回数です。リストに便利です。

一般的な使用例

リスト／フィードの読み込み

ソーシャルメディアのフィード
ニュース記事のリスト
商品カタログ
コメントセクション
検索結果

おすすめの種類： Feed、Article、Shopping

プロフィール／ユーザーの読み込み

ユーザープロフィール
連絡先カード
アカウントの詳細
チームメンバーの表示
概要セクション

おすすめの種類： Profile、CirclePersona、SquarePersona

メディアの読み込み

動画のサムネイル
画像ギャラリー
メディアプレーヤー
ストリーミングコンテンツ
フォトアルバム

おすすめの種類： Video、画像プレースホルダーを使ったカスタムレイアウト

Eコマース

商品グリッド
ショッピングカート
商品の詳細
カテゴリページ
ウィッシュリスト

おすすめの種類： Shopping、カスタムレイアウト

実装のヒント

シマーをコンテンツに合わせる： スムーズに切り替わるよう、実際のコンテンツ構造にできるだけ近いシマーレイアウトを設計します。
リストにはRepeatCountを使用する： RepeatCountを、ビューポート内に表示される想定アイテム数に合わせて設定します。
タイミング：
- 読み込み開始時にすぐシマーを表示します
- コンテンツが表示可能になったらシマーを非表示にします
- シマーの一般的な表示時間：500ms～3000ms
カラーのテーマ設定：
- ライトテーマ：Fill = #F6F6F6、WaveColor = White
- ダークテーマ：Fill = #2C2C2C、WaveColor = #3C3C3C
パフォーマンス： シマーアニメーションはGPUで高速化されます。複数のシマーを同時に実行しても、パフォーマンス上の問題はありません。
アクセシビリティ： シマーは視覚的な表示のみです。ライブリージョンやステータスメッセージを使用して、スクリーンリーダーに読み込み状態を別途通知してください。
ウェーブの速度：
- 高速な読み込み（<2s）：WaveDuration = 800-1000ms
- 通常の読み込み（2-5s）：WaveDuration = 1000-1500ms
- 遅い読み込み（>5s）：WaveDuration = 1500-2000ms
カスタムレイアウト： 角を丸めたRectangle要素（RadiusX/RadiusY）と、円形のプレースホルダー用のEllipseを使用します。

シマーとその他の読み込みパターンの比較

シマーを使用する場合：

コンテンツ構造が事前にわかっている
読み込み時間が500ms～5秒
リスト形式または構造化されたコンテンツを表示する
体感パフォーマンスを重視する最新のアプリ

BusyIndicatorを使用する場合：

コンテンツ構造が不明
一般的な読み込み表示が必要
モーダル操作／操作をブロックする処理
非常に短い（<500ms）または非常に長い（>10s）処理

ProgressBarを使用する場合：

進捗状況を確定値で表示できる
ファイルのアップロード／ダウンロード
進捗率を取得できる
測定可能な進捗を伴う逐次処理

基本情報

作者: syncfusion
リポジトリ: syncfusion/winui-ui-components-skills
カテゴリ: デザイン・UI
インストール数: 47
GitHub スター: 1

問題を報告