converting-html-css-to-wpf-xaml

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

HTML/CSS → WPF XAML 변환 가이드

HTML/CSS → WPF XAML 转换指南

CSS → WPF 핵심 매핑 테이블

CSS → WPF 核心映射表

CSS	WPF 구현 방법	참조
`overflow: hidden` + `border-radius`	`Border.Clip` + `RectangleGeometry` (RadiusX/Y + MultiBinding)	clipping.md
`position: absolute` (회전 요소)	`Canvas` + `Canvas.Left/Top`	layout.md
`animation-duration: 3s`	`Duration="0:0:3"` 인라인	animation.md
`height: 130%` (회전 요소)	Converter로 동적 계산 (배율 2.0)	transform.md
`::before` , `::after`	Canvas 내 요소, 선언 순서로 z-order	layout.md
`z-index`	선언 순서 또는 `Panel.ZIndex`	layout.md
중앙 정렬 콘텐츠	Canvas 밖 Grid에서 Alignment 적용	layout.md
`spacing`	Maring 속성으로 대체	-

CSS	WPF 实现方法	参考
`overflow: hidden` + `border-radius`	`Border.Clip` + `RectangleGeometry` (RadiusX/Y + MultiBinding)	clipping.md
`position: absolute` (旋转元素)	`Canvas` + `Canvas.Left/Top`	layout.md
`animation-duration: 3s`	`Duration="0:0:3"` 内联写法	animation.md
`height: 130%` (旋转元素)	使用Converter进行动态计算（倍率2.0）	transform.md
`::before` , `::after`	Canvas内元素，通过声明顺序控制z-order	layout.md
`z-index`	声明顺序或 `Panel.ZIndex` 属性	layout.md
居中对齐内容	在Canvas外的Grid中应用Alignment属性	layout.md
`spacing`	用Margin属性替代	-

핵심 규칙 요약

核心规则总结

1. Duration은 항상 인라인

1. Duration始终使用内联方式

xml

<!-- ✅ -->
<DoubleAnimation Duration="0:0:3" />
<!-- ❌ StaticResource 바인딩 불가 -->

xml

<!-- ✅ -->
<DoubleAnimation Duration="0:0:3" />
<!-- ❌ 不能绑定StaticResource -->

2. 둥근 모서리 클리핑은 Border.Clip + RectangleGeometry

2. 圆角裁剪使用Border.Clip + RectangleGeometry

xml

<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>

xml

<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 내 배치

3. 旋转元素放置在Canvas内

xml

<Canvas>
    <Rectangle Canvas.Left="45" Canvas.Top="{Binding ...}" RenderTransformOrigin="0.5,0.5">
        <Rectangle.RenderTransform>
            <RotateTransform Angle="0" />
        </Rectangle.RenderTransform>
    </Rectangle>
</Canvas>

xml

<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에 배치

4. ContentPresenter放置在Canvas外的Grid中

xml

<Grid>
    <Canvas><!-- 회전 요소들 --></Canvas>
    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>

xml

<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.md	Canvas/Grid/정렬, pseudo-element 관련
references/transform.md	회전/높이 계산 관련
references/converters.md	필수 Converter 패턴
references/case-template.md	새 케이스 추가용 템플릿

文件	内容
references/index.md	完整案例列表（快速检索用）
references/clipping.md	裁剪相关误区（Grid.Clip, OpacityMask, ClipToBounds）
references/animation.md	动画/Duration相关
references/layout.md	Canvas/Grid/对齐、伪元素相关
references/transform.md	旋转/高度计算相关
references/converters.md	必备Converter模式
references/case-template.md	新增案例用模板