mcpField
C
converting-html-css-to-wpf-xaml

converting-html-css-to-wpf-xaml

github.com/christian289開発4175 回インストール14 週間前に更新
リポジトリ

converting-html-css-to-wpf-xaml について

HTML/CSS を WPF XAML に変換するためのリファレンススキルです。プロパティ対応表と、レイアウト、クリッピング、アニメーション、変換の要点をまとめています。

主な機能

  1. 01CSS と WPF のプロパティ対応
  2. 02角丸クリッピングの指針
  3. 03Canvas と Grid の配置規則
  4. 04アニメーション時間の設定指針
  5. 05変換とコンバーターの資料

活用シーン

  1. 01Web レイアウトの WPF への移植
  2. 02XAML での角丸クリッピング実装
  3. 03回転要素の配置
  4. 04WPF アニメーションの問題調査

インストール

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

$npx skills add https://github.com/christian289/dotnet-with-claudecode --skill converting-html-css-to-wpf-xaml

インストール後、Claude Code で/converting-html-css-to-wpf-xamlを入力して読み込まれたか確認します。

同梱ファイル

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

references/
animation.md
case-template.md
cliping.md
converters.md
index.md
layout.md
transform.md

README（原文）English

プロジェクトの README より

この README の日本語訳はまだありません。以下は英語の原文です。日本語の紹介はページ上部をご覧ください。

HTML/CSS → WPF XAML 변환 가이드

CSS → WPF 핵심 매핑 테이블

CSSWPF 구현 방법참조
overflow: hidden + border-radiusBorder.Clip + RectangleGeometry (RadiusX/Y + MultiBinding)clipping.md
position: absolute (회전 요소)Canvas + Canvas.Left/Toplayout.md
animation-duration: 3sDuration="0:0:3" 인라인animation.md
height: 130% (회전 요소)Converter로 동적 계산 (배율 2.0)transform.md
::before, ::afterCanvas 내 요소, 선언 순서로 z-orderlayout.md
z-index선언 순서 또는 Panel.ZIndexlayout.md
중앙 정렬 콘텐츠Canvas 밖 Grid에서 Alignment 적용layout.md
spacingMaring 속성으로 대체-

핵심 규칙 요약

1. Duration은 항상 인라인
<!-- ✅ -->
<DoubleAnimation Duration="0:0:3" />
<!-- ❌ StaticResource 바인딩 불가 -->
2. 둥근 모서리 클리핑은 Border.Clip + RectangleGeometry
<Border CornerRadius="20">
    <Border.Clip>
        <RectangleGeometry RadiusX="20" RadiusY="20">
            <RectangleGeometry.Rect>
                <MultiBinding Converter="{x:Static local:SizeToRectConverter.Instance}">
                    <Binding Path="ActualWidth" RelativeSource="{RelativeSource AncestorType=Border}" />
                    <Binding Path="ActualHeight" RelativeSource="{RelativeSource AncestorType=Border}" />
                </MultiBinding>
            </RectangleGeometry.Rect>
        </RectangleGeometry>
    </Border.Clip>
</Border>
3. 회전 요소는 Canvas 내 배치
<Canvas>
    <Rectangle Canvas.Left="45" Canvas.Top="{Binding ...}" RenderTransformOrigin="0.5,0.5">
        <Rectangle.RenderTransform>
            <RotateTransform Angle="0" />
        </Rectangle.RenderTransform>
    </Rectangle>
</Canvas>
4. ContentPresenter는 Canvas 밖 Grid에 배치
<Grid>
    <Canvas><!-- 회전 요소들 --></Canvas>
    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>

참조 문서

파일내용
references/index.md전체 케이스 목록 (빠른 검색용)
references/clipping.md클리핑 관련 실수 (Grid.Clip, OpacityMask, ClipToBounds)
references/animation.md애니메이션/Duration 관련
references/layout.mdCanvas/Grid/정렬, pseudo-element 관련
references/transform.md회전/높이 계산 관련
references/converters.md필수 Converter 패턴
references/case-template.md새 케이스 추가용 템플릿

コメント

Markdown 対応