choiminyeong
5e5ef8c36f
소스(Core/Shell/Launcher)와 실행 PC가 받아갈 업데이트 파일(dist)을 함께 올린다. Launcher가 켤 때 이 저장소의 dist와 D:\UbisamPlatform\bin을 비교해 새 버전이면 받아간다. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
109 lines
5.3 KiB
Markdown
109 lines
5.3 KiB
Markdown
# 패치 06 — DataGrid (그리드 컨트롤)
|
|
|
|
`ListView` + `GridView`가 읽기 전용 표라면 `DataGrid`는 편집 가능한 격자입니다. 셸과 같은 도면 톤으로 맞췄습니다.
|
|
패치 04(`Controls.xaml`)를 이미 적용한 상태를 전제로 합니다.
|
|
|
|
리포지토리에 아직 `DataGrid`를 쓰는 화면이 없어서 **스타일만** 넣습니다 — 나중에 격자를 붙이면 그대로 적용됩니다.
|
|
|
|
## 모양
|
|
|
|
- 헤더: 회색 판, 세로 구분선만, 정렬된 열은 accent 글자 + accent 화살표
|
|
- 행: 짝수 행 옅은 줄무늬, hover 옅은 틴트, 선택은 accent 틴트
|
|
- 행 머리(폭 26): 선택된 행만 accent 바로 채워져 어느 행인지 왼쪽 끝에서 바로 읽힘
|
|
- 편집 중인 셀만 accent 테두리 + 내부 여백을 줄여 입력칸처럼 보임
|
|
- 행 높이 34, 헤더 높이 34, 각진 모서리 · 1px 헤어라인
|
|
|
|
## 1. 파일 교체
|
|
|
|
| 파일 | 변경 |
|
|
| --- | --- |
|
|
| `src/UbisamBase.Core/Themes/Controls.xaml` | DataGrid 스타일 6종 추가 (파일 끝) |
|
|
| `src/UbisamBase.Core/Themes/Colors.Light.xaml` | 토큰 2개 추가 |
|
|
| `src/UbisamBase.Core/Themes/Colors.Dark.xaml` | 토큰 2개 추가 |
|
|
|
|
`code/UbisamBase.Core/Themes/` 아래 세 파일을 그대로 덮어쓰세요.
|
|
|
|
새 토큰:
|
|
|
|
| 키 | 라이트 | 다크 |
|
|
| --- | --- | --- |
|
|
| `Ubisam.Brush.Table.GridLine` | #DEDEE1 | #383D44 |
|
|
| `Ubisam.Brush.Table.AltRowBackground` | #F8F8F9 | #333840 |
|
|
|
|
## 2. 쓰는 법
|
|
|
|
암시적 스타일이라 `<DataGrid>`만 놓으면 적용됩니다. 열은 직접 정의하세요 (`AutoGenerateColumns`는 False가 기본):
|
|
|
|
```xml
|
|
<DataGrid ItemsSource="{Binding Measurements}"
|
|
SelectedItem="{Binding SelectedMeasurement}">
|
|
<DataGrid.Columns>
|
|
<DataGridTextColumn Header="시각" Width="96"
|
|
Binding="{Binding Timestamp, StringFormat=HH:mm:ss}"
|
|
IsReadOnly="True"/>
|
|
<DataGridTextColumn Header="레시피" Width="*"
|
|
Binding="{Binding RecipeName}"
|
|
IsReadOnly="True"/>
|
|
<DataGridTextColumn Header="측정값" Width="118"
|
|
Binding="{Binding Value, StringFormat=N1}"
|
|
CellStyle="{StaticResource Ubisam.Style.NumericCell}"/>
|
|
<DataGridTextColumn Header="편차" Width="96"
|
|
Binding="{Binding Deviation, StringFormat=P1}"
|
|
CellStyle="{StaticResource Ubisam.Style.NumericCell}"
|
|
IsReadOnly="True"/>
|
|
</DataGrid.Columns>
|
|
</DataGrid>
|
|
```
|
|
|
|
수치 열에는 `CellStyle="{StaticResource Ubisam.Style.NumericCell}"`을 주세요 — 우측 정렬됩니다.
|
|
|
|
편집을 아예 막을 화면은 `IsReadOnly="True"`를 `DataGrid`에 주면 됩니다.
|
|
|
|
## 3. 상태 열은 태그로
|
|
|
|
판정·레벨 같은 상태 열은 맨 텍스트로 두지 마세요 — 예외 행(재검, Warn)이 정상 행과 구분되지 않습니다. 태그 스타일을 쓰세요.
|
|
|
|
```xml
|
|
<DataGridTemplateColumn Header="판정" Width="96">
|
|
<DataGridTemplateColumn.CellTemplate>
|
|
<DataTemplate>
|
|
<Border Style="{StaticResource Ubisam.Style.Tag.Accent}">
|
|
<TextBlock Text="{Binding Verdict}" Style="{StaticResource Ubisam.Style.TagText.Accent}"/>
|
|
</Border>
|
|
</DataTemplate>
|
|
</DataGridTemplateColumn.CellTemplate>
|
|
</DataGridTemplateColumn>
|
|
```
|
|
|
|
세 종류입니다:
|
|
|
|
| 스타일 쌍 | 쓰는 곳 |
|
|
| --- | --- |
|
|
| `Ubisam.Style.Tag.Accent` + `TagText.Accent` | 정상·완료 (양품, Info) |
|
|
| `Ubisam.Style.Tag.Outline` + `TagText.Outline` | 주의·예외 (재검, Warn) — 외곽선만이라 눈에 걸립니다 |
|
|
| `Ubisam.Style.Tag` + `TagText` | 중립·대기 (—, Draft) |
|
|
|
|
상태값에 따라 스타일을 바꿔야 하면 `DataTrigger`로 `Border.Style`을 전환하거나, 값→스타일 컨버터를 하나 두세요.
|
|
|
|
새 토큰 4개(`Ubisam.Brush.Tag.*`)가 두 Colors 파일에 추가됐습니다.
|
|
|
|
## 4. 합계행
|
|
|
|
시안의 맨 아래 합계행은 `DataGrid`가 기본 제공하지 않습니다. 격자 아래에 `Grid` 한 줄을 따로 놓고 열 폭을 맞추거나, 필요하면 `DataGrid` 안에서 열 폭을 공유하는 방식으로 만들어야 합니다 — 어느 쪽으로 할지 알려주시면 그 부분만 따로 만들어 드립니다.
|
|
|
|
## 5. 확인
|
|
|
|
1. 헤더를 클릭해 정렬하면 그 열 글자가 accent로 바뀌고 화살표 방향이 뒤집히는지
|
|
2. 행을 선택하면 왼쪽 끝 행 머리가 accent 바로 채워지는지
|
|
3. 셀을 더블클릭해 편집에 들어가면 그 셀만 accent 테두리가 생기는지
|
|
4. 수치 열(측정값·편차)이 모두 우측 정렬인지 — 한쪽만 좌측이면 `CellStyle`이 빠진 것입니다
|
|
5. 판정 열의 재검 행이 양품 행과 한눈에 구분되는지
|
|
4. 짝수 행 줄무늬가 다크에서도 구분되는지(#333840)
|
|
5. 열 경계를 드래그해 폭 조절이 되는지 (그리퍼는 투명하지만 커서가 바뀝니다)
|
|
|
|
## 주의
|
|
|
|
- `DevExpress GridControl`이 아니라 **WPF 기본 `DataGrid`** 기준입니다. DevExpress를 쓰신다면 알려주세요 — 스타일 구조가 완전히 다릅니다.
|
|
- 줄무늬가 부담스러우면 `DataGrid`의 `AlternatingRowBackground`를 `Transparent`로 바꾸면 됩니다.
|
|
- 행을 더 밀집하려면 `RowHeight`를 34 → 28로, 셀 `Padding`을 `11,9` → `9,5`로 줄이세요.
|