Wpf 개발자를 위한 프로그램 개발

🧵 Slog
1

안녕하세요. :smile:

DevFlow 라는 이름의 WPF 프로젝트를 Slog를 통해 오픈소스로 시작합니다.

사실 개인적으로 만들어 사용하고 있는 프로그램인데 오픈소스로 쓰기에는 부족함이 많아 이번 기회에 새롭게 시작하게 되었습니다.

image

기존 프로그램에는 Git과 관련된 간단한 기능, Markdown 뷰어/편집, 이미지 뷰어, 컬러 색상표, 이미지 크롭, 작업관리자, 간단한 .NET Reflector 탐색 기능, 윈도우 탐색 기능 등 평소 개발을 하면서 필요하다고 느꼈던 아이디어들이 적용되어 있습니다.

새롭게 시작하는 이번 프로젝트는 GitHub를 통해 소스를 실시간으로 반영하고 공유하려고 하는데요.

바로 DevFlow 레포지토리입니다!

:fire:로드맵:fire:

  1. WPF 프로젝트 구조 설계 및 개발 (진행중)
  2. 디자인 리소스 설계 및 개발
  3. 메인 메뉴, 화면 연결 구조 설계 및 개발

이외 추가적인 내용은 매일 업데이트 될 예정입니다.


작은 규칙 실천

  1. 매일 소스코드 커밋
  2. 매일 Slog 수정
  3. 매일 프로그램 히스토리 캡쳐

p.s.) Slog 글 수정 되도록 해주셔서 감사합니다. :smile:

11개의 좋아요
2

우와 xaml을 배울 수 있게 되어 영광입니다

1개의 좋아요
3

Overview

DevFlow WPF 애플리케이션의 기반적인 Framework 부분을 간단하게 소개합니다.

  1. QuickSlot : Widget
  2. SwitchSkin : Widget

애플리케이션 실행 모습

상단 퀵슬롯(QuickSlot) 영역을 통해 메뉴를 구성합니다.

image

테마 지원 기능

테마 변경(SwitchSkin) 항목에서 애플리케이션 테마를 관리합니다.
Dynamic Resource(Brush)를 통해 다양한 테마를 확장할 수 있고, 실시간으로 변경이 가능합니다.

image


테마를 실시간으로 변경한 모습입니다.

image

다국어 관리

Dynamic Resource를 통해 언어를 런타임에서 실시간으로 변경할 수 있습니다.
또 새로운 언어를 계속해서 늘릴 수도 있습니다.

영어

image

한국어

image

중국어

image

일본어

image

배경화면 관리

TBD…

5개의 좋아요
4

ColorPicker

원하는 색상을 Hex 코드 형태로 추출하기 위한 프로그램(기능)입니다.

포토샵을 포함한 다양한 컬러 추출 프로그램이 존재하는데요. 이 기능은 WPF를 이용해서 만들기에 정말 안성맞춤입니다.

1. 디자인 컨셉 (벤치마킹)

  • 구글 검색을 통해 다양한 ColorPicker 앱 정보를 수집했습니다. 그리고 포토샵 기능 또한 개발 과정에서 많은 도움이 되었습니다.

    image

    image

2. 기능 점검 및 구현 초기 준비

  • 앱을 구현하기에 앞서 핵심적으로 필요한 기술을 WPF/C# 환경에서 구현할 수 있는지 먼저 점검합니다. 우선 앱 외부(윈도우) 영역에서 마우스 커서를 통해 컬러를 추출하는 것만 가능하다면 큰 무리가 없어 보입니다.

  • 구글 검색을 통해 오픈소스 기능 찾기.

    마우스 드래그를 통한 화면 부분캡쳐 컬러 추출 기술. 소스코드 보기

    • 원하는 모든 기능들이 무리 없이 가능합니다.

    • 기능 점검, 구현 단계에서의 초기 디자인 :sweat_smile:

      image

    • 다양한 디자인 컨셉 시도 중… :disappointed_relieved:

      image

      image

      image

      image

      image

      진짜 최종!! :heart:

      image

    • 클립보드 기능

      추출된 컬러를 클립보드에 복사하는 기능입니다. 추출된 컬러의 클립보드 아이콘을 클릭하면 클립보드에 복사됩니다.
      그리고 간혹 컬러가 클립보드에 자동으로 복사되는 앱도 있었는데, 기존 클립보드가 사라질 수 있으니 사용자의 요청을 통해 처리하도록 구현했습니다.

      image

    • 추출된 컬러 색상표 그리드

      색상을 추출하기 위해서는 마우스 커서를 정밀하게 움직여야 합니다. 하지만 1픽셀(px) 기준으로 색상이 추출되기 때문에 함께 추출되고 있는 색상을 임시로 담을 목록이 필요했습니다. 그래서 우측에 가로/세로 8x8 크기의 64개 색상표 그리드를 제공하여 원하는 색상을 좀 더 정밀하게 추출할 수 있도록 구현했습니다.

      ExtractColorGrid : ListBox

    • 컬러슬라이더 (RGB)

      WPF에서 기본으로 제공하는 Slider를 상속받아 RGB 색상(0~255)을 조절할 수 있는 컨트롤을 구현했습니다.

      ColorSlider : Slider

    • UI 계층 구조

      ColorSpoid : Explorer

      ColorSpoid는 Explorer를 상속받는 Window입니다.

    • 완료 모습

      곧… 1달이 되어가네요. (1달이 지나면 슬로그의 수정이 잠긴다는 의미…)

      image


마치며

저는개인적으로 Color 추출을 사용할 일이 많기 때문에 꾸준히 사용하고 있는데요.
사용하면서 새로운 기능도 추가하고, 소스코드도 조금씩 정리하고 있습니다.

읽어주셔서 감사합니다. :smile:

6개의 좋아요
6

Finder

구현 로드맵

  • 디렉토리 탐색
  • 텍스트, Image, Markdown 뷰어
  • 히스토리 기억
  • 확장 편의기능(Git, 숨김파일, 용량집계, MD5 정보 등)

참고 앱

  • 윈도우 탐색기
  • 토탈 커맨더 (추억의 그 토탈커맨더)
  • oh my zsh

프로젝트 파트

미리보기

  • 앱 초기 단계 동작 모습입니다.

    Finder

구조

Finder

TBD…

Finder : Explorer

어셈블리 DevFlow.Finders.dll
네임스페이스 DevFlow.Finders.Views.Finder

Finder : Explorer : FlowWindow : Window

TBD…

세부기능

  • 디렉토리 탐색

    • 하위 탐색 (더블클릭)
    • 상위 탐색 (UP)
    • 뒤로 가기 (Undo)
    • 앞으로 가기 (Redo)

      image

  • 디렉토리 기록 기억

    • MementoBox : ComboBox

      드롭다운 클릭 시 디렉토리 탐색 기록을 제공합니다.

      image

      TBD…

  • 위치 경로 계층 막대 Bar

    • PolygonSelector : ListBox

      선택된 경로를 시각적으로 제공합니다. 이를 통해 손쉽게 상위 계층 구조를 파악할 수 있고 빠르게 이동이 가능합니다.

      image

4개의 좋아요
7

Windows 11 Design in DevFlow

이번에 공개된 윈도우 11의 디자인이 너무 마음에 들어서 순차적으로 변경 중입니다.

QuickSlot

변경 전

image

변경 후

다크 테마

image

화이트 테마

image

TBD…

5개의 좋아요
8

좋은 자료 감사합니다! 잘 배우고 가겠습니다~

1개의 좋아요
9

와. 스킨디자인 너무 이쁘네요 ^^

이런 고품질을 ^^

1개의 좋아요