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. 01将网页布局移植到 WPF
  2. 02在 XAML 中实现圆角裁剪
  3. 03定位旋转元素
  4. 04排查 WPF 动画问题

安装

复制下面的命令，在终端中运行。

$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