AvaloniaUI, WPF 렌더링 차이?

Vincent · 12월 5, 2025, 9:16오전

github.com/christian289/wpf-styling-pratice

WebToDesktop/ThemeSwitch/README.md

main

# ThemeSwitch

Day/Night 테마 전환을 위한 토글 스위치 컨트롤입니다.

![Day Mode](https://img.shields.io/badge/Mode-Day-3D7EAE) ![Night Mode](https://img.shields.io/badge/Mode-Night-1D1F2C)

## 원본

이 컨트롤은 [uiverse.io](https://uiverse.io)의 CSS 컴포넌트를 WPF와 Avalonia로 변환한 것입니다.

**원본 UI**: [https://uiverse.io/Galahhad/strong-squid-82](https://uiverse.io/Galahhad/strong-squid-82)

**원작자**: Galahhad

## 구현

이 프로젝트는 **Claude Code (Opus 4.5)** 를 사용하여 구현되었습니다.

### 지원 플랫폼

This file has been truncated. show original

제가 만든건 아니긴 한데 일단은 …

Claude Code로 Opus 4.5를 괴롭히면서 원분 CSS를 배껴봤습니다.

그런데 설정값이 같아도 아발로니아랑 WPF랑 차이가 있더군요.

타이틀 창에서 알 수 있듯 왼쪽이 아발로니아, 오른쪽이 WPF 입니다.

Gradient 설정이 같은데도 차이를 보이네요.

왜 그런지 아시는 분 계실까요?

※ 참고로 오른쪽 WPF에서 gif에 깨진거 처럼 보이는 건 gif 만들다가 프레임 누락되서 그런거고 실제로 실행하면 저렇지 않습니다.

Animation2

추가로, XamlStyler 같은거 AvaloniaUI 버전으로는 없을까요…?

al6uiz · 12월 5, 2025, 10:24오전

Avalonia에서 RadialGradientBrush를 사용할 때 GradientOrigin속성과 Center 속성의 값이 다르면 나타나는 버그인 듯합니다.

두 속성 값을 일치시킨 경우

github.com/AvaloniaUI/Avalonia

RadialGradientBrush doesn't work when the GradientOrigin is different than the Center

열림 10:59PM - 04 Jun 21 UTC

arklumpus

bug

**Describe the bug** When a RadialGradientBrush's GradientOrigin is different t…han the Center, the gradient doesn't work as expected - it looks like some gradient stops are lost. **To Reproduce** Add the following Grid to a Window: ```XAML <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="1*" /> <ColumnDefinition Width="1*" /> </Grid.ColumnDefinitions> <Rectangle> <Rectangle.Fill> <RadialGradientBrush Center="50%, 50%" GradientOrigin="50%, 50%" Radius="0.25"> <RadialGradientBrush.GradientStops> <GradientStops> <GradientStop Color="Black" Offset="0"/> <GradientStop Color="White" Offset="0.49"/> <GradientStop Color="Black" Offset="0.51"/> <GradientStop Color="White" Offset="0.99"/> <GradientStop Color="Blue" Offset="1"/> </GradientStops> </RadialGradientBrush.GradientStops> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> <Rectangle Grid.Column="1"> <Rectangle.Fill> <RadialGradientBrush Center="50%, 50%" GradientOrigin="40%, 50%" Radius="0.25"> <RadialGradientBrush.GradientStops> <GradientStops> <GradientStop Color="Black" Offset="0"/> <GradientStop Color="White" Offset="0.49"/> <GradientStop Color="Black" Offset="0.51"/> <GradientStop Color="White" Offset="0.99"/> <GradientStop Color="Blue" Offset="1"/> </GradientStops> </RadialGradientBrush.GradientStops> </RadialGradientBrush> </Rectangle.Fill> </Rectangle> </Grid> ``` Then compile and execute the program. The problematic behaviour can be somehow mitigated by adding some additional stops at the beginning of the gradient, e.g.: ```XAML <GradientStops> <GradientStop Color="Black" Offset="0"/> <GradientStop Color="White" Offset="0"/> <GradientStop Color="Black" Offset="0"/> <GradientStop Color="Black" Offset="0"/> <GradientStop Color="White" Offset="0.49"/> <GradientStop Color="Black" Offset="0.51"/> <GradientStop Color="White" Offset="0.99"/> <GradientStop Color="Blue" Offset="1"/> </GradientStops> ``` **Expected behavior** The two gradients should look the same, except for the origin being in a different position. Instead, it looks like some stops are missed in the gradient on the right. **Screenshots** ![image](https://user-images.githubusercontent.com/32712606/120869395-4e065d80-c58e-11eb-88f7-87deae676fde.png) In the image on the left, the brush's GradientOrigin is the same as the Center, and the gradient appears as expected. In the image on the right the GradientOrigin and the Center differ, and the gradient doesn't look right (even though the gradient stops are the same). ![image](https://user-images.githubusercontent.com/32712606/120870293-73946680-c590-11eb-97a3-f0ff5f45eff4.png) Here, the correct behaviour has been recovered by adding some stops at the beginning of the gradient. **Desktop (please complete the following information):** - OS: bug happens Windows 10 and Ubuntu 20.04, I have not tested on macOS. - Version: this happens at least on 0.9.12, 0.10.0, 0.10.3 and 0.10.6.

Vincent · 12월 8, 2025, 2:45오전

확인 감사합니다. 해결했습니다!

RadialGradientBrush doesn’t work when the GradientOrigin is different than the Center and the first Stop is Transparent · Issue #19888 · AvaloniaUI/Avalonia

아직도 해결되지 않았나봐요 ㅎㅎ…