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

converting-html-css-to-wpf-xaml

github.com/christian289Development4175 installsUpdated 14w ago
Repository

About converting-html-css-to-wpf-xaml

A reference skill for translating HTML/CSS layouts and effects into WPF XAML. It provides CSS-to-WPF mappings and focused notes for common layout, clipping, animation, and transform cases.

Key features

  1. 01CSS-to-WPF property mappings
  2. 02Rounded-corner clipping guidance
  3. 03Canvas and Grid layout rules
  4. 04Animation duration guidance
  5. 05Transform and converter references

Use cases

  1. 01Porting web layouts to WPF
  2. 02Implementing rounded clipping in XAML
  3. 03Positioning rotated elements
  4. 04Troubleshooting WPF animations

Install

Copy the command and run it in a terminal.

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

After installing, type/converting-html-css-to-wpf-xamlin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

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

Details

From the project 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새 케이스 추가용 템플릿

Comments

Markdown supported