C#/WPF

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. 간단하게, 프로젝트 폴더 경로에 사용할 아이콘을 복사해서 옮겨둡니다.

calculator_icon.ico

0.01MB

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" />

<controls:FormulaControl Formula="x^2" />

<controls:FormulaControl Formula="\sqrt[2]x \;" />

6, 7, 8, 9. 버튼의 Content 속성을 키보드에서 입력 가능한 문자열로 변경합니다.

10, 11, 12. 버튼은 유니코드에서 찾은 기호를 사용합니다.

10. delete 버튼은, 속성에서 Transform 속성을 수정합니다.

                Content="&#8998;"
                Margin="5"
                Grid.Row="1"
                Grid.Column="3">
            <Button.LayoutTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform Angle="180"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Button.LayoutTransform>

11. devide 버튼의 유니코드 적용값입니다.