09. XAML - Designer, Nuget
@ 이전 포스트에서 사용했던 Calculator 예제의 계산기를, 윈도우 계산기와 비교해봅시다.
UI 모양과 구조가 다른 부분이 있습니다.
윈도우 계산기와 동일한 UI 를 WPF XAML 를 사용하여 구현해 봅시다.
이 과정에서
XAML 디자이너를 좀 더 편리하게 사용하는 방법과
Nuget 관리자를 사용하여 XAML 외부 라이브러리를 적용하는 방법을 익혀봅시다.
01. 윈도우 계산기, 예제 Calculator 비교
01.1 윈도우에서 계산기를 찾아 실행합니다.
01.2 윈도우 계산기와 예제 Calculator 와 비교합니다.
편의를 위해, 윈도우의 계산기를 "계산기" 예제를 "Calculator(칼큘레이터)"라고 합니다.
01.3 수정해야 할 부분을 파악합니다.
02. Grid 패널에 새로운 행 추가
1. Grid 태그 > Grid.RowDefinitions > RowDefinition 태그 추가, 높이는 동일 비율로 설정
2. 디자이너에 행 추가 확인
3. 디자이너에서, 이동해야 할 컨트롤을 드레그하여 모두 선택
4. 마우스로 드레그하여 아래로 이동시키거나, 키보드 방향키를 이용해 아래로 이동
디자이너에서 이동시키면, XAML 태그에 수치값이 자동으로 수정됩니다.
5. 빈 행에 버튼을 복사하여 한번에 추가하기 위해, 복사할 버튼들을 디자이너에서 마우스로 드래그하여 선택합니다.
6. 디자이너에서 선택한 컨트롤을 복붙( ctrl+c, ctrl+v )하고, 키보드 방향키 또는 마우스로 원하는 위치로 이동시킵니다.
7. XAML 태그를 보면, 각 버튼 이름에 "(기존이름)_Copy" 으로 추가되어 있음을 확인 할 수 있습니다.
8. 수정 할 버튼을 XAML 디자이너에서 선택합니다.
9. 버튼 컨트롤의 가장자리에 마우스 커서를 올리면, 컨트롤을 크기를 조절할 수 있습니다.
10. 디자이너에서 버튼 크기를 조정하면, XAML 코드에 자동 반영됩니다.
11. 계산기의 우측 하단에 +/- 버튼을 복붙으로 추가해줍니다.
그리고 윈도우 계산기를 기준으로 버튼 위에 출력되는 문자들을 동일하게 만들어줍니다.
03. 프로젝트 타이틀, 아이콘 변경
1. 간단하게, 프로젝트 폴더 경로에 사용할 아이콘을 복사해서 옮겨둡니다.
2. 폴더 경로에 추가된 파일을, 내 작업 프로젝트에 추가하기 위해,
솔루션 탐색기에서 "모든 파일 보기" 버튼을 눌러 활성화 합니다.
3. 추가된 아이콘을 확인합니다.
4. 사용할 아이콘이 확인되면, 마우스 오른쪽 버튼을 누르고 "프로젝트에 포함" 을 실행합니다.
5. XAML 디자이너에서 Windows 태그에서 Title, Icon 속성을 추가합니다.
6. 수정한 프로젝트를 실행합니다.
프로그램 상단의 타이틀과 아이콘이 적용되었는지 확인합니다.
04. XAML에 Nuget 외부 패키지 설치
1. XAML 에 수학 기호를 추가하기 위해 외부 라이브러리를 찾습니다.
구글에서 검색하니 XamlMath.Shared 패키지를 찾을 수 있었습니다.
내 WPF 프로젝트에 추가해보겠습니다.
xaml-math/src at master · ForNeVeR/xaml-math · GitHub
GitHub - ForNeVeR/xaml-math: A collection of .NET libraries for rendering mathematical formulae using the LaTeX typesetting styl
A collection of .NET libraries for rendering mathematical formulae using the LaTeX typesetting style, for the WPF and Avalonia XAML-based frameworks - ForNeVeR/xaml-math
github.com
2. Visual Studio 상단의 메뉴에서 "도구" > NuGet 패키지 관리자 > 솔루션용 NuGet 패키지 관리를 실행합니다.
3. Nuget 솔루션 창에서, "찾아보기" 탭을 선택합니다. ("설치됨"이 기본 탭이기 때문에 "찾아보기" 탭을 선택합니다.)
4. XAML-Math 를 검색합니다.
5. XamlMath.Shared 이름으로 된 패키지를 선택합니다.
6. XamlMath.Shared 외부 패키지를 설치할 프로젝트를 선택하고, "설치" 버튼을 눌러 진행합니다.
7. 변경 내용 미리보기 알림에서, 설치 할 패키지와 버전을 확인 후 "적용"을 눌러 설치를 진행합니다.
8. WPF-Math GitHub 의 README 에서 사용 방법을 확인합니다.
9. XAML 디자이너의 Window 탭에 추가 설치한 패키지를 참조시켜 줍니다.
xmlns:controls="clr-namespace:WpfMath.Controls;assembly=WpfMath"
현재 Calculator 예제 파일에서 아무런 변경 없이 위 패키지를 추가를 동일하게 진행했다면,
위의 오류 목록에 보이는 바와 같이 참조 문제가 발생합니다.
10. WPF-Math GitHub 의 README 또는, Nuget 관리자에서 설치시 종속성에서 사용 환경을 확인해 봅니다.
XamlMath.Shared 매키지는 .NET Framework 4.6.2 이상 버전이거나, .NET 6 이상만 호환됨이 확인됩니다.
11. 내 프로젝트의 사용 환경을 비교합니다.
12. 내 프로젝트에서 오른쪽 버튼을 클릭하고, 최하단의 "속성" 으로 이동합니다.
13. 내 프로젝트의 .NET Framework 버전이 4.6.1 입니다. Xaml-MATH 의 지원 버전과 호환되지 않는 .NET Framework을 사용하고 있습니다.
14. 간단하게 대상 프레임워크를 .NET Framework 4.8로 변경합니다.
15. 알림창을 확인하고, .NET Framework 마이그레이션을 진행합니다.
16. Visual Studio 를 재실행하고, 빌드합니다.
@외부 라이브러리 설치시 환경 설정 중요함을 명심합니다.
@만약 계속 종속성 문제가 발생하면 Nuget 패키지 관리자에서, 패키지를 삭제 후 재설치 합니다.
@계속 문제가 발생하면 Nuget 패키지 재설치 공식 문서를 확인하고, 진행합니다.
간단한 해결책으로 Nuget 패키지 콘솔에서 아래 코드를 실행하고, Visual Studio를 재실행 합니다.
<package_name>은 WpfMath 입니다.
Update-Package -Id <package_name> –reinstall
05. XAML-Math 사용하기
1. XAML-Math GitHub 에서 프로젝트를 실행하면, 수학기호 사용 예제를 확인할 수 있습니다.
2. WPF-Math GitHub 의 README 에서 XAML-Math 컨트롤 태그 사용 방법를 확인합니다.
3. 등분하는 버튼으로 수정하는 경우, 버튼 태그를 다음과 같이 수정합니다.
<controls:FormulaControl Formula="1/x" />
4.
<controls:FormulaControl Formula="x^2" />
5.
<controls:FormulaControl Formula="\sqrt[2]x \;" />
6, 7, 8, 9. 버튼의 Content 속성을 키보드에서 입력 가능한 문자열로 변경합니다.
10, 11, 12. 버튼은 유니코드에서 찾은 기호를 사용합니다.
10. delete 버튼은, 속성에서 Transform 속성을 수정합니다.
Content="⌦"
Margin="5"
Grid.Row="1"
Grid.Column="3">
<Button.LayoutTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="180"/>
<TranslateTransform/>
</TransformGroup>
</Button.LayoutTransform>
11. devide 버튼의 유니코드 적용값입니다.
Content="÷"
12. multiple 버튼의 유니코드 적용값입니다.
Content="✕"
아래는 적용된 결과입니다.
13. 변경할 컨트롤을 shift 클릭으로 한번에 선택합니다.
속성 창에서 Text 속성의 폰트 크기를 14px 로 변경합니다
+ 나머지 버튼의 Text 폰트 크기도 적절히 변경합니다.
06. 배경색 변경
댓글
이 글 공유하기
다른 글
-
10. XAML - C# EventHandler
10. XAML - C# EventHandler
2024.03.08 -
08. XAML - EventHandler
08. XAML - EventHandler
2024.03.06 -
07. XAML - Code Behind
07. XAML - Code Behind
2024.03.06 -
06. XAML - Panels
06. XAML - Panels
2024.03.05