choiminyeong 5e5ef8c36f 플랫폼 최초 커밋 + 자동 업데이트 배포 폴더(dist)
소스(Core/Shell/Launcher)와 실행 PC가 받아갈 업데이트 파일(dist)을 함께 올린다.
Launcher가 켤 때 이 저장소의 dist와 D:\UbisamPlatform\bin을 비교해 새 버전이면 받아간다.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-21 21:56:35 +09:00

4.3 KiB

패치 14 — 차트가 흰 판 위에 그려지는 문제

적용 화면을 보니 차트 컨트롤 자체가 흰 배경으로 렌더되고 있습니다. 여기서 세 가지 증상이 한꺼번에 나옵니다.

증상 원인
다크 테마인데 차트 판만 흰색 CartesianChart / PieChart의 기본 배경이 흰색이고, 테마 브러시를 상속하지 않음
격자선·게이지 남은 구간이 검게 보임 다크용 토큰(#383D44)을 흰 판에 그려서 — 색은 맞지만 판이 틀림
게이지 가운데 숫자(82.4)가 안 보임 값 라벨이 다크용 본문색(#E8EAED)인데 판이 흰색이라 묻힘

ChartTheme은 축·시리즈만 칠합니다. 컨트롤의 배경은 XAML에서 지정해야 합니다.

1. 차트에 배경을 지정하세요

<lvc:CartesianChart Series="{Binding TrendSeries}"
                    XAxes="{Binding TrendXAxes}"
                    YAxes="{Binding TrendYAxes}"
                    Background="Transparent"
                    Height="240"/>

Background="Transparent"가 핵심입니다. PieChart(게이지)도 같습니다.

2. 판은 셸의 도면 프레임으로 감싸세요

시안(11a)의 차트 패널은 흰 채움이 아니라 선 드로잉입니다 — 1px 헤어라인 + 네 모서리 등록 마크, 배경은 컨텐츠 바탕색 그대로.

<Border BorderBrush="{DynamicResource Ubisam.Brush.Input.Border}"
        BorderThickness="1"
        Background="Transparent"
        Padding="20,18,20,12">
    <StackPanel>
        <TextBlock Text="라인 트렌드"
                   FontFamily="{StaticResource Ubisam.Font.Heading}"
                   FontSize="19" FontWeight="SemiBold"
                   Foreground="{DynamicResource Ubisam.Brush.ContentForeground}"
                   Margin="0,0,0,16"/>
        <lvc:CartesianChart … Background="Transparent" Height="200"/>
    </StackPanel>
</Border>

등록 마크까지 넣으려면 Ubisam.Style.Tag처럼 스타일로 빼는 게 편합니다 — 필요하시면 Ubisam.Style.BlueprintPanel로 만들어 드립니다.

3. 테마를 바꾼 뒤에는 시리즈를 다시 만들어야 합니다

막대 색이 진한 파랑(#1E7FD4)이 아니라 밝은 파랑으로 보이는 것은, 차트가 만들어진 시점의 브러시를 그대로 들고 있기 때문입니다. ChartTheme은 호출 시점에 리소스를 읽습니다.

테마 적용 코드 끝에:

ChartTheme.NotifyThemeChanged();

차트를 가진 ViewModel에서 구독해 다시 만드세요:

public MonitorViewModel()
{
    Rebuild();
    ChartTheme.ThemeChanged += Rebuild;
}

private void Rebuild()
{
    TrendSeries = new ISeries[] { ChartTheme.ReferenceLine(baseline), ChartTheme.Line(measured) };
    TrendXAxes = new[] { ChartTheme.XAxis() };
    TrendYAxes = new[] { ChartTheme.YAxis(format: "0", min: 100, max: 140) };
    OnPropertyChanged(nameof(TrendSeries));
    OnPropertyChanged(nameof(TrendXAxes));
    OnPropertyChanged(nameof(TrendYAxes));
}

ThemeChanged -= Rebuild를 뷰가 사라질 때 해제하는 것을 잊지 마세요.

4. 툴팁·범례도 판을 따라야 합니다

LiveCharts2 기본 툴팁은 밝은 판입니다.

<lvc:CartesianChart TooltipBackgroundPaint="{Binding TooltipBackground}"
                    TooltipTextPaint="{Binding TooltipText}"
                    LegendTextPaint="{Binding LegendText}"
                    LegendPosition="Top"/>

5. 게이지에서 확인할 것

  • 판이 어두워지면 남은 구간(GridLine)이 검정이 아니라 회색으로 읽힙니다
  • 가운데 숫자가 나타납니다. 안 보이면 DataLabelsPaint가 Text 토큰인지 확인하세요
  • 목표선(파선)은 LiveCharts2가 그려주지 않습니다 — 시안의 75% 틱은 차트 위에 Path를 얹어야 합니다. 계산식은 FIX-10.md §5에 있습니다

6. 확인

  1. 다크 테마에서 차트 판이 배경과 같은 어두운 색인지
  2. 격자선이 검은 실선이 아니라 헤어라인으로 보이는지
  3. 막대가 진한 파랑(#1E7FD4)인지
  4. 게이지 가운데 82.4가 보이는지
  5. 라이트 테마로 바꾸고 화면을 다시 열었을 때 색이 라이트 토큰으로 바뀌는지
  6. 차트 패널 테두리가 셸의 다른 판과 같은 1px 헤어라인인지