converting-html-css-to-wpf-xaml

HTML/CSS → WPF XAML Conversion Guide

CSS → WPF Key Mapping Table

CSS	WPF Implementation Method	Reference
overflow: hidden + border-radius	Border.Clip + RectangleGeometry (RadiusX/Y + MultiBinding)	clipping.md
position: absolute (rotated element)	Canvas + Canvas.Left/Top	layout.md
animation-duration: 3s	Duration="0:0:3" inline	animation.md
height: 130% (rotated element)	Dynamic calculation with Converter (scale 2.0)	transform.md
::before, ::after	Element inside Canvas, z-order by declaration order	layout.md
z-index	Declaration order or Panel.ZIndex	layout.md
Center-aligned content	Apply Alignment in Grid outside Canvas	layout.md
spacing	Replaced by Maring property	-

Key Rules Summary

1. Duration is always inline

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

2. Rounded corner clipping is 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. Rotated elements are placed inside 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 is placed in Grid outside Canvas

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

Reference Documents

File	Content
references/index.md	Full case list (for quick search)
references/clipping.md	Clipping-related mistakes (Grid.Clip, OpacityMask, ClipToBounds)
references/animation.md	Animation/Duration related
references/layout.md	Canvas/Grid/alignment, pseudo-element related
references/transform.md	Rotation/height calculation related
references/converters.md	Required Converter patterns
references/case-template.md	Template for adding new cases