Window/WPF2018. 2. 21. 22:26

Visual Studio 2017에서 .net framework 4.0 버전의 프로그램을 

clickone로 배포하기 위해서는 필수구성요소에 포함시켜야 하는데요.

우선 포함시켜야 하는 요소들의 Package가 필요합니다.


검색해보니 정리가 잘된 곳이 있더군요.

https://git.chemsorly.com/Docker/Msbuilder/tree/master/Files/Bootstrapper/Packages


복사할 경로는 다음과 같습니다.

C:\Program Files (x86)\Microsoft SDKs\ClickOnce Bootstrapper\Packages


XP 일 경우 지난 포스팅 참고

http://shine10e.tistory.com/132?category=330666



'Window > WPF' 카테고리의 다른 글

Custom Button  (2) 2016.01.29
Virtual Keyboard ( Hangul )  (1) 2015.11.23
Pixel Shader Effect in WPF  (0) 2015.02.26
[ WPF ] Word Cloud  (0) 2014.02.23
[ WPF ] VisualTree FindChild  (0) 2012.08.17
Posted by 열ㅇl
Window/WPF2016. 1. 29. 00:19

개발을 진행하다 보면 다양한 스타일의 버튼을 만들게 되는데요.

Round 스타일이나 Mouse Over, Pressed 같은 경우에 색을 변경해야 경우가 많습니다.

이런 속성을 추가한 Custom Button을 만들어 사용하는 것도 한 방법이 되겠습니다.


그래서 CornerRadius 와 Mouse Over, Pressed 이벤트시 Background 와 BorderBrush 의 색상을 변경하는 프로퍼티를 가지는

간단한 버튼 컨트롤을 만들어 보았습니다.



xaml


cs

 

CustomButton.xaml

CustomButton.xaml.cs

 

'Window > WPF' 카테고리의 다른 글

VisualStudio 2017에 .NET 4.0 Bootstrapper 설정  (0) 2018.02.21
Virtual Keyboard ( Hangul )  (1) 2015.11.23
Pixel Shader Effect in WPF  (0) 2015.02.26
[ WPF ] Word Cloud  (0) 2014.02.23
[ WPF ] VisualTree FindChild  (0) 2012.08.17
Posted by 열ㅇl
Window/WPF2015. 11. 23. 22:29

WPF 프로젝트 진행 중 필요에 의해 만들게 된 한/영 가상 키보드입니다.

 

키 이벤트 발생은 Windows Input Simulator 를 사용하였고 XP에서는 한글 조합이 되지 않는 경우가 발생하여 키보드와 마우스를 훅킹하여 특정 이벤트에 대한 예외처리를 하였습니다.

 

 

프로젝트에 필요한 키 배열만 갖추고 있으니 필요한 키는 만들어 사용하시기 바랍니다.

 

source: https://github.com/daeyeol/wpf-virtual-keyboard

 

- 영문

 

- 한글

 

- 키패드

 

 

 

 

'Window > WPF' 카테고리의 다른 글

VisualStudio 2017에 .NET 4.0 Bootstrapper 설정  (0) 2018.02.21
Custom Button  (2) 2016.01.29
Pixel Shader Effect in WPF  (0) 2015.02.26
[ WPF ] Word Cloud  (0) 2014.02.23
[ WPF ] VisualTree FindChild  (0) 2012.08.17
Posted by 열ㅇl
Window/WPF2015. 2. 26. 12:26

WPF 는 엘리먼트들에게 다양한 효과를 주기 위해서 BitmapEffect 와  Effect 클래스에서 파생된 BlurEffect, DropShadowEffect, ShaderEffect 를 사용할 수 있습니다.

 

이번 포스트에서는 ShaderEffect 클래스를 상속받아 사용자 정의 픽셀 셰이더를 만드는 방법과 영상의 알파 채널을 제거하는 간단한 샘플을 만들어 보겠습니다.

 

- Shader Effects BuildTask and Templates 설치

 

1. http://wpf.codeplex.com/releases/view/14962 에서 Shader Effects BuildTask and Templates.zip 을 다운로드 받습니다.

2. 압축을 풀고 ShaderBuildTaskSetup.msi 를 설치합니다.

3.  readme.txt 파일 내용대로 Templates 폴더를 Visual Studio 가 설치된 폴더의 Templates에 덮어 씌웁니다. ( VS 2012 )

4. 다음 그림과 같이 WPF Shader Effect Library 프로젝트 템플릿이 추가된 것을 확인합니다.

 

 

5. WPF Shader Effect Library 프로젝트 템플릿으로 프로젝트를 생성하면 다음과 같은 기본 아이템들이 자동으로 추가 됩니다.

 

 

Effect1.fx 는 픽셀 셰이더의 내용을 구현하는 파일이고 Effect1.cs 파일에서 사용할 수 있는 클래스로 매핑 시켜주는 내용을 작성합니다.

EffectLibrary.cs 는 헬퍼 메소드를 포함하고 있습니다.

 

실제적으로는 .fx 파일을 컴파일한 .ps 파일을 사용하게 됩니다.

 

 

그럼으로 .fx 파일은 빌드 속성을 항상 Effect 로 지정해주어야 합니다.

 

.ps 파일을 생성하는 다른 방법으로는

DirectX SDK 를 설치하고 fxc.exe 를 통해서 직접 만들어서 사용할 수도 있습니다.

 

fxc /T ps_2_0 /E main /Fo<name or HLSL file>.ps <name of HLSL file>.fx

fxc /T ps_2_0 /E main /Foeffect1.ps Effect1.fx

 

 

- Sample ( Alpha Channel Video )

 

[ ColorKeyAlphaEffect.fx ]

 

[ ColorKeyAlphaEffect.cs ]

 

 

 

[ Image ]                                                                            [ Video ]

 

[ Result ]


Reference

http://www.codeproject.com/Articles/71617/Getting-Started-with-Shader-Effects-in-WPF

https://www.safaribooksonline.com/library/view/hlsl-and-pixel/9781449324995/ch04.html

http://blogs.msdn.com/b/greg_schechter/archive/2008/05/12/a-series-on-gpu-based-effects-for-wpf.aspx 

http://blogs.msdn.com/b/jaimer/archive/2008/10/03/announcement-wpf-shader-effects-library-on-codeplex.aspx

https://onedrive.live.com/view.aspx?cid=123EC1ED6C72A14A&resid=123ec1ed6c72a14a%21171&app=Word

 

TransparencyEffect.zip

 


'Window > WPF' 카테고리의 다른 글

Custom Button  (2) 2016.01.29
Virtual Keyboard ( Hangul )  (1) 2015.11.23
[ WPF ] Word Cloud  (0) 2014.02.23
[ WPF ] VisualTree FindChild  (0) 2012.08.17
데이터 바인딩 ( Data Binding )  (0) 2012.07.24
Posted by 열ㅇl
Window/WPF2014. 2. 23. 20:32

Word Cloud 는

어떤 데이터에 포함된 단어들의 빈도수를 시각적으로 표현해 주는 것을 말합니다.

 

data visualization ( 데이터 시각화 ) 의 한 방법으로

보통 키워드 ( 단어/텍스트 ) 들을 어떠한 공간이나 형태에 랜덤하게 배치해 줌으로써 시각화 되어집니다.

 

이런 Word Cloud 처럼

텍스트들을 어떠한 형태로 배치해야 하는 일이 있어, 

테스트 해보기 위해 프로토 타입으로 작성했던 프로그램과 

나름 여러가지 테스트와 고민을 통해 얻게 된 내용에 대해 포스팅합니다.

 

프로그램은 다음과 같은 작업을 합니다. 

반복횟수, 최대 폰트 사이즈, 최소 폰트 사이즈, 회전, 폰트 효과, 폰트를 설정할 수 있고,

이미지를 불러들여 입력된 텍스트들을 그 형태에 맞게 그립니다.

 

 

다음과 같은 결과물을 얻을 수 있습니다.

 

 

 

 

 

 

초기에 다음과 같은 알고리즘으로 시작하였습니다. 

 

1. 영역을 나눈다.

3. 영역마다 다음을 수행한다.

2. 영역 범위안의 랜덤한 위치에 최소, 최대 폰트 사이즈 사이의 텍스트를 생성한다.

4. 다른 텍스트와 겹치지 않는지 확인한다.

5. 겹치는 횟수가 정해진 카운트 값을 초과하지 않을 때까지 반복한다.

 

 

 

하지만 다음과 같은 단점들이 있었습니다.

 

1. 영역을 나누기 위해서는 이진화 이미지가 필요하다.

2. 영역을 나누기가 쉽지 않다. ( 영상처리가 필요하다. )

3. 정밀성을 높이기 위해서는 카운트 횟수가 많아야 한다.

4. 카운트 횟수가 높을 수록 소요시간이 너무 길어진다.

5. 폰트 사이즈가 크면 이질감 있게 보인다.

 

이런 단점들을 보완하기 위해 여러 테스트와 리서치를 진행했고, 

processing 으로 작성되어 있는  Scattered Letters 를 통해 방향을 잡게 되었습니다.

폰트 사이즈를 랜덤하게 생성하는 것이 아닌 최대 폰트 사이즈에서 최소 폰트 사이즈까지

점차 줄여가야 함을 알게 되었습니다.

 

현재는 다음과 같은 알고리즘을 사용하고 있습니다.

 

1. 텍스트가 그려질 영역 정보를 설정한다. ( default : 현재 이미지 영역  )

2. 원본 이미지와 동일한 사이즈의 빈 이미지를 2개 생성한다. ( result, temp )

3. 영역 마다 다음을 수행한다.

4. 현재 폰트 사이즈를 현재 영역의 최대 폰트 사이즈로 설정한다.

5. 현재 폰트 사이즈가 영역의 최소 폰트 사이즈 보다 클 동안 다음을 반복한다. ( 현재 폰트 사이즈를 줄여간다. )

6. 현재 폰트 사이즈의 텍스트를 생성한다. ( rotation 옵션 )

7. 성공할 때까지 정해진 반복횟수만큼 다음을 시도한다.

8. 현재 영역안에서 텍스트가 그려질 위치를 설정한다.

9. 텍스트가 그려질 영역에 해당하는 원본 이미지 픽셀에서 다음을 확인한다.

10. 흰색인지 확인한다. ( 흰색이면 fail )

11. 텍스트가 그려질 영역의 중심점 픽셀과 픽셀들을 비교한다. ( 차이가 10보다 크면 fail, 영역이 다른 것으로 간주 )

12. 9, 10 번이 성공하면 텍스트를 이미지화 시켜 픽셀 데이터를 생성한다. ( png )

13. 텍스트가 그려질 영역에 해당하는 temp 이미지 픽셀에서 텍스트 픽셀이 겹치지 않는지 확인한다. ( 겹치면 fail )

14. 겹치지 않으면 텍스트에 설정된 효과 ( Blur, Boundary, Stroke, None ) 를 적용하여 새로운 픽셀 데이터를 생성한다.

15. 새로운 픽셀 데이터는 temp 이미지에, 기존 텍스트 픽셀은 result 이미지에 그린다.

 

말이 길지만 간단하게 요약하자면,

 

텍스트가 그려질 영역 정보를 설정하는 건

좀 더 디테일 하게 그려져야 할 부분을 설정하기 위함입니다. ( 자동으로 찾으면 좋겠지만.. )

 

영역마다 설정된 최대 폰트 사이즈부터 폰트 최소 사이즈까지 줄여가며 텍스트를 채워갑니다. 

 

픽셀 값의 경계를 구분하기 위해 

텍스트가 그려질 위치의 중간 픽셀 과의 차이값을 이용했습니다. 

차이가 10정도 나면 다른 영역이라고 판단합니다.

 

텍스트의 여백을 설정하기 위해 Blur, Boundary, Stroke, None 이라는 타입을 설정했습니다.  

 

Blur 는 텍스트에 Blur 효과를 적용합니다.  

 

 

 

Stroke 는 텍스트에 Stroke를 설정합니다.  

 

 

 

Boundary 는 텍스트의 영역을 사용합니다. 

 

 

 

None 은 아무 효과도 사용하지 않습니다.

 

 

Blur 와 Stroke 는 텍스트 형태에 맞게 어느 정도 여백을 가집니다.

Boundary 는 텍스트의 외곽 안쪽 영역의 여백을 가집니다.

None 은 텍스트에 여백없이 빽빽하게 채워집니다.

 

각 결과물은 다음과 같습니다.

 

[ Blur ]

 

 

[ Stroke ]

 

 

[ Boundary ]

 

 
[ None ]

 

 

[ Rotation ]

 

 

[ 한글 ]

 

 

 

 

WordCloud.zip

WordCloud_exe.zip

 

 

'Window > WPF' 카테고리의 다른 글

Virtual Keyboard ( Hangul )  (1) 2015.11.23
Pixel Shader Effect in WPF  (0) 2015.02.26
[ WPF ] VisualTree FindChild  (0) 2012.08.17
데이터 바인딩 ( Data Binding )  (0) 2012.07.24
WPF Media Player ( Design. GomPlayer )  (0) 2012.03.12
Posted by 열ㅇl
Window/WPF2012. 8. 17. 15:07

VisualTree 를 순회하며 해당 타입과 이름이 일치하는 자식을 찾는 소스 코드입니다.

Template 에 유용하게 사용할 수 있습니다.

 

public static T FindChild<T>(this FrameworkElement obj, string name)

{

    DependencyObject dObj = obj as DependencyObject;

    T findChild = default(T);

   

    if (dObj != null)

    {

        int childCount = VisualTreeHelper.GetChildrenCount(dObj);

 

        for (int i = 0; i < childCount; i++)

        {

            DependencyObject childObj = VisualTreeHelper.GetChild(dObj, i);

            FrameworkElement child = childObj as FrameworkElement;

 

            if (child.GetType() == typeof(T) && child.Name == name)

            {

                findChild = (T)Convert.ChangeType(child, typeof(T));

                break;

            }

 

            findChild = child.FindChild<T>(name);

 

            if (findChild != null) break;

        }

    }

 

    return findChild;

}

 

'Window > WPF' 카테고리의 다른 글

Pixel Shader Effect in WPF  (0) 2015.02.26
[ WPF ] Word Cloud  (0) 2014.02.23
데이터 바인딩 ( Data Binding )  (0) 2012.07.24
WPF Media Player ( Design. GomPlayer )  (0) 2012.03.12
Brush ColorAnimation  (0) 2011.06.22
Posted by 열ㅇl
Window/WPF2012. 7. 24. 12:00

데이터 바인딩을 주제로 작성한 스터디 발표 자료입니다.

 

 

데이터 바인딩 ( Binding ).pptx

 

'Window > WPF' 카테고리의 다른 글

[ WPF ] Word Cloud  (0) 2014.02.23
[ WPF ] VisualTree FindChild  (0) 2012.08.17
WPF Media Player ( Design. GomPlayer )  (0) 2012.03.12
Brush ColorAnimation  (0) 2011.06.22
Storyboard.SetTargetProperty에 RenderTransformProperty 설정하기  (0) 2011.03.04
Posted by 열ㅇl
Window/WPF2012. 3. 12. 16:17
예전에 회사 내 스터디를 진행하면서 만들었던 미디어 플레이어입니다.
디자인은 보시는 바와 같이 곰플레이어를 따라 해봤습니다. ( Design by 찰스님 ) 
: 디자인이 문제가 된다면 삭제하도록 하겠습니다. 







많은 기능들을 구현해 보려고 했는데 시간상 다음 기능들만을 구현해보고 마무리되었네요.

구현된 기능은

- Play / Pause / Stop
- Full Screen / Maximum / Minimum / Close
- Volume / Mute
- FileOpen / FileOpen 시 자동 사이즈 조정 / PlayList
- Drag & Drop
- Slider 와 영상 싱크 동기화 / 재생시간 / 타이틀
: 마우스 클릭 지점으로 슬라이더바를 움직이는 것은 예전 포스팅에서 만들었던 Custom Slider를 사용했습니다.

WPF를 처음 접해보시거나 관심있는 분들에게 도움이 되었으면 합니다.


'Window > WPF' 카테고리의 다른 글

[ WPF ] VisualTree FindChild  (0) 2012.08.17
데이터 바인딩 ( Data Binding )  (0) 2012.07.24
Brush ColorAnimation  (0) 2011.06.22
Storyboard.SetTargetProperty에 RenderTransformProperty 설정하기  (0) 2011.03.04
ListBox ItemsPanel 변경하기  (0) 2011.03.04
Posted by 열ㅇl
Window/WPF2011. 6. 22. 21:38
Brush 속성의 색상을 변경시키는 애니메이션에 대한 내용입니다.

ColorAnimation 으로,
TabItem 컨트롤, Rectangle 컨트롤, Border 컨트롤 등의 Brush 속성 값을 변경시킵니다.

Storyboard.SetTargetPropertyPropertyPath 속성으로
Brush 관련 프로퍼티 후에 SolidColorBrush.ColorProperty를 연결 시킵니다.

예 ) Rectangle 컨트롤의 Fill 속성 변경 시

Storyboard.SetTargetProperty(colorAnimation, new PropertyPath("(0).(1)",

  new DependencyProperty[]

  {

      Shape.FillProperty,

      SolidColorBrush.ColorProperty

  }));

다음은 TabItem, Rectangle, Border 의 Brush 속성들을 변경시키는 예제입니다.

[ 실행화면 ]

 

 [ 소스 코드 ]

  void MainWindow_Loaded(object sender, RoutedEventArgs e)

  {

        tabItem.BeginStoryboard(CreateStoryboard(Colors.Blue, Border.BorderBrushProperty));

        rectangle.BeginStoryboard(CreateStoryboard(Colors.LightSeaGreen, Shape.FillProperty));

        rectangle.BeginStoryboard(CreateStoryboard(Colors.Green, Shape.StrokeProperty));

        border.BeginStoryboard(CreateStoryboard(Colors.Red, Border.BorderBrushProperty));

   }

 

  Storyboard CreateStoryboard(Color color, DependencyProperty property)

  {

       ColorAnimation colorAnimation =
                      new ColorAnimation(color, new Duration(TimeSpan.FromSeconds(2)));

 

       Storyboard.SetTargetProperty(colorAnimation, new PropertyPath("(0).(1)",

             new DependencyProperty[]

             {

                  property,

                  SolidColorBrush.ColorProperty

             }));

 

        Storyboard storyBoard = new Storyboard()

        {

             AutoReverse = true,

             RepeatBehavior = RepeatBehavior.Forever,              

        };

           

        storyBoard.Children.Add(colorAnimation);

 

        return storyBoard;

  }







Posted by 열ㅇl
Window/WPF2011. 3. 4. 22:51
코드로 스토리보드를 작성하다보면

Storyboard.SetTargetProperty 를 사용하게 되는데요.

[ 함수 원형 ]
public static void SetTargetProperty(DependencyObject element, PropertyPath path)


정적 메소드로써
첫 번째 인자로  Timeline을 지정하고
두 번째 인자로 애니메이션을 적용할 종속성 속성 경로를 지정합니다.

보통 일반적인 프로퍼티를 설정하기 위해서는 다음과 같이 사용합니다.
Storyboard.SetTargetProperty(Timeline, new PropertyPath(FrameworkElement.OpacityProperty));


하지만,
RenderTransform 프로퍼티들을 설정하는 법은 약간 다릅니다.

1. 단일 속성일 경우

 RenderTransform = new ScaleTransform();

 
 
PropertyPath path = new PropertyPath("(0).(1)",

     new DependencyProperty[]
     { 
        
UIElement.RenderTransformProperty,
         ScaleTransform.ScaleXProperty

     });

 
Storyboard.SetTargetProperty(Timeline, path);


2. 다중 속성일 경우
 TransformGroup tg = new TransformGroup();

 tg.Children.Add(new ScaleTransform());

 tg.Children.Add(new RotateTransform());

 tg.Children.Add(new SkewTransform());

 tg.Children.Add(new TranslateTransform());

 

 RenderTransform = tg;

 PropertyPath path = new PropertyPath("(0).(1)[0].(2)",

     new DependencyProperty[]

     {

         UIElement.RenderTransformProperty,

         TransformGroup.ChildrenProperty,

         ScaleTransform.ScaleXProperty

     });

 Storyboard.SetTargetProperty(Timeline, path);


위의 두 소스는 비슷하지만 틀린점이 있다면
PropertyPath 함수의 첫 번째 인자로 들어가는 토큰화된 문자열과
TransformGroup.ChildrenProperty 가 추가된 점입니다.

 단일 속성일 경우엔 다음과 같이 지정이 되지만,

(0) : UIElement.RenderTransformProperty
(1) : ScaleTransform.ScaleXProperty

다중 속성일 경우엔 그룹 중 몇 번째 인지를 지정해야 주어야 합니다.
ScaleTransform 은 TransformGroup의 첫번째 자식임으로 [0] 을 지정하였습니다.

토큰화된 문자열만 잘 이해하신다면 쉽게 사용할 수 있습니다.

'Window > WPF' 카테고리의 다른 글

WPF Media Player ( Design. GomPlayer )  (0) 2012.03.12
Brush ColorAnimation  (0) 2011.06.22
ListBox ItemsPanel 변경하기  (0) 2011.03.04
Image Rotate  (4) 2010.11.04
[ WPF ] Custom Slider  (4) 2010.08.13
Posted by 열ㅇl