choiminyeong
5e5ef8c36f
소스(Core/Shell/Launcher)와 실행 PC가 받아갈 업데이트 파일(dist)을 함께 올린다. Launcher가 켤 때 이 저장소의 dist와 D:\UbisamPlatform\bin을 비교해 새 버전이면 받아간다. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
104 lines
4.3 KiB
Markdown
104 lines
4.3 KiB
Markdown
# 패치 14 — 차트가 흰 판 위에 그려지는 문제
|
|
|
|
적용 화면을 보니 차트 컨트롤 자체가 흰 배경으로 렌더되고 있습니다. 여기서 세 가지 증상이 한꺼번에 나옵니다.
|
|
|
|
| 증상 | 원인 |
|
|
| --- | --- |
|
|
| 다크 테마인데 차트 판만 흰색 | `CartesianChart` / `PieChart`의 기본 배경이 흰색이고, 테마 브러시를 상속하지 않음 |
|
|
| 격자선·게이지 남은 구간이 검게 보임 | 다크용 토큰(`#383D44`)을 흰 판에 그려서 — 색은 맞지만 판이 틀림 |
|
|
| 게이지 가운데 숫자(82.4)가 안 보임 | 값 라벨이 다크용 본문색(`#E8EAED`)인데 판이 흰색이라 묻힘 |
|
|
|
|
`ChartTheme`은 축·시리즈만 칠합니다. 컨트롤의 배경은 XAML에서 지정해야 합니다.
|
|
|
|
## 1. 차트에 배경을 지정하세요
|
|
|
|
```xml
|
|
<lvc:CartesianChart Series="{Binding TrendSeries}"
|
|
XAxes="{Binding TrendXAxes}"
|
|
YAxes="{Binding TrendYAxes}"
|
|
Background="Transparent"
|
|
Height="240"/>
|
|
```
|
|
|
|
`Background="Transparent"`가 핵심입니다. `PieChart`(게이지)도 같습니다.
|
|
|
|
## 2. 판은 셸의 도면 프레임으로 감싸세요
|
|
|
|
시안(<a>11a</a>)의 차트 패널은 흰 채움이 아니라 **선 드로잉**입니다 — 1px 헤어라인 + 네 모서리 등록 마크, 배경은 컨텐츠 바탕색 그대로.
|
|
|
|
```xml
|
|
<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`은 **호출 시점**에 리소스를 읽습니다.
|
|
|
|
테마 적용 코드 끝에:
|
|
|
|
```csharp
|
|
ChartTheme.NotifyThemeChanged();
|
|
```
|
|
|
|
차트를 가진 ViewModel에서 구독해 다시 만드세요:
|
|
|
|
```csharp
|
|
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 기본 툴팁은 밝은 판입니다.
|
|
|
|
```xml
|
|
<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 헤어라인인지
|