안녕하세요. 김대욱입니다. 최근들어 터치스크린을 이용한 프로젝트를 자주 진행하다보니 이번 포스팅은 터치스크린을 이용하는 시스템에서 유용하게 사용될 수 있는 내용이 되겠습니다. 이번시간에 소개해 드릴 내용은 터치스크린을 사용하는 어플리케이션에서 TextBox등의 Control에 Focus 되었을때 자동으로 Screen Keyboard Application을 실행하는 예제입니다. 동영상을 보시면 쉽게 이해하실수 있습니다.

위 동영상에서는 WIndows에서 기본적으로 제공하는 OnScreenKeyboard를 사용했지만, 이번시간에 소개해 드릴 내용을 응용하면 직접 개발한 Keyboard Application을 사용하실 수도 있습니다. 간단하게 원리를 말씀드리자면 입력가능한 컨트롤 즉, TextBox나 PasswordBox에 Focus 되었을때 미리 지정해놓은 Keyboard Application을 실행하고 Focus를 잃었을때 Keyboard Application을 닫는 원리가 되겠습니다.

컨트롤 하나하나 일일이 Focus이벤트 코드를 추가하는 방법을 사용할수도 있겠지만, 이번시간에 소개해 드릴방법은 Attached DependencyProperty를 사용하여 간단하게 Screen Keyboard를 지원하도록 구현했습니다. 사용할때에는 아래와 같이 사용할 수 있습니다.

아래는 Attached DependencyProperty를 구현한 소스코드입니다.

동작원리는 위에서 설명드린것과 동일하며 Attached Dependency Property를 이해하고 있다면, 어렵지 않게 이해하실수 있을것 같습니다 ^^ 이상으로 이번 포스팅을 마치며 질문의나 문의 사항은 언제든지 연락주시기 바랍니다 ^^ 감사합니다.

소스코드입니다.

OnScreenKeyboardSample.zip

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

안녕하세요. 김대욱입니다. 자기전에 포스팅 하나 하고자야겠다 싶어 새벽 포스팅 시작합니다. ㅎㅎ

이번시간에 소개해 드릴 내용은 WPF를 이용해 아래와 같이 문자열로 이루어진 이미지를 만드는 방법입니다. 제목은 조금 거창하게 ASCII Art라고 소개했지만 일정 공백을 두고 픽셀 정보를 가져와 이를 문자열로 바꾸기만하면되는.. 매우 간단한 예제가 되겠습니다...(낚시 제목.. ㅈㅅ)  아래 사진속 고양이는 저희집에서 저와 함께 살고 있는 쿠루 입니다 +_+

사실 이번시간에서의 중요한 대부분의 코드는 XAML보다는 C#코드로 되어있습니다. 설명은 주석에 적어놨으니 참고하시길 바라며 아래는 이미지의 경로를 입력하면 임의의 문자열과 적합한 색상값을 갖는 객체를 추출 하는 작업에 대한 코드입니다.

코드자체가 어렵진 않기때문에 이해하시는 데에는 큰 무리가 없을것으로 생각되며, 제가 이번시간에 ASCII ART예제를 준비하면서 말씀드리고 싶은 중요한 내용은 BmpBitmapEncoder를 이용해서 간단하게 PixelData를 가져올수 있다~!~! 라는것입니다. 예전에 System.Drawing.Bitmap객체를 활용해서 Pixel Data를 접근 방법에 대해 소개해 드린적이있지만, Bitmap Class는 WPF에서 기본적으로 사용하는 Class가 아니기때문에 Reference를 추가하는 등에 작업이 필요합니다, 하지만BmpBitmapEncoder와 MemoryStream을 사용하면 위 작업을 하지 않아도 PixelData에 접근이 가능하기 때문에 이번 예제와 같은 내용을 개발하실 때 상당히 유용할것 같습니다. (단, 위 방법을 사용하실 경우 수정시 원본이미지에 반영 되지는 않습니다..)

나머지 위 코드를 호출하는 부분등은 아래 첨부한 소스코드를 보시면 확인하실수 있습니다. 기타 질문이나 문의 요청사항은 이메일이나 리플 오른쪽 포스팅 소제 제공을 통해 문의 하시면 되겠습니다 ^^

PS. 제작할때 폰트를 굴림체, 돋움체, 궁서체 등 모든 문자의 크기가 동일한 폰트를 활용하면 굳~~~~ 입니다.

WPFASCIIART.zip

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

안녕하세요. 김대욱입니다. 거의 한달만에 포스팅이네요 >_< 포스팅 할 내용을 적어놓은 메모장에는 자꾸 늘어나는데..
현재 진행하고있는 프로젝트 마감때문에 정신이 하나도 없어서 포스팅을 재때 못하고 있습니다 ㅠ_ㅠ 이해해주세요 (굽신굽신)

이번시간에는 얼마전 포스팅에서 소개해드린바있는 Fixed Image Control(http://whatisthat.co.kr/150)를 WPF의 Attatched Dependency Property를 사용하여 어떤 컨트롤에나 적용될 수 있는 PixelSnapper를 구현해 보도록 하겠습니다. 아래는 시연동영상 입니다.

먼저 간단하게 Attatched DependencyProperty에 대해 설명을 드리자면, 우리가 일반적으로 사용하는 Button라는 객체가 있을때 Button에는 Animation이라는 Property가 존재 하지않습니다. 만약 Animation이라는 Property를 추가하고자 한다면 기존에는 Button객체를 상속받아 Animation Property를 포함한 새로운 객체를 생성해주어야했죠. 하지만 WPF에서는 Attatched Property를 사용하여 새로운 객체를 생성할 필요없이 Button객체에 Property를 부여 할 수 있습니다. ( 간단하게 활용면에서만 설명을 한 내용이라 다소 실제 내용과 차이가 있을 수 있습니다.)

원래의 목적은 부모와 자식간의 Dependency Property를 연결짓기 위해 사용되는 방법으로, 대표적인 Grid의 Grid.Row, DockPanel의 DockPanel.Dock가 있으며 이번시간에는 이런 Attatched Dependency Property를 사용하여 어느 컨트롤에서나 적용할 수 있는 Pixel Snapper를 구현 해보고자 합니다. Attatched Dependency Property와 관련된 보다 자세한 내용은 MSDN을 참고해주시기 바랍니다.(http://msdn.microsoft.com/ko-kr/library/ms749011.aspx)

아래는 PixelSnapper의 AttatchedDependency Property를 정의하는 부분입니다.

public static readonly DependencyProperty IsSnap = DependencyProperty.RegisterAttached("IsSnap", typeof(bool), typeof(PixelSnapper), new FrameworkPropertyMetadata(false, FrameworkPropertyMetadataOptions.AffectsRender | FrameworkPropertyMetadataOptions.AffectsMeasure, new PropertyChangedCallback(IsPixelSnapPropertyChanged))); public static void SetIsSnap(FrameworkElement Target, bool Value) { Target.SetValue(IsSnap, Value); } public static bool GetIsSnap(FrameworkElement Target) { return (bool)Target.GetValue(IsSnap); }

Attatched DependencyProperty를 사용하기 위해 DependencyProperty를 RegisterAttached 메서드를 사용하여 등록하고, Property에 접근하기 위한 Get,Set메서드를 위와 같이 정의했습니다. 이때 이름은 반드시 Get[PropertyName] , Set[PropertyName]과 같이 구현이 되어야 하며 모든 FrameworkElement에 IsSnap Property를 노출시킬 것이기 때문에 Parameter 로  FrameworkElement를 사용했습니다.

그리고 본격적으로 FrameworkElement의 IsSanp에 따라 객체의 Pixel 고정여부를 지정하기 위해 IsSnap Property가 갱신되었을때 아래와 같은 처리를 해줍니다.

// 100분의 1픽셀이하의 오차는 무시합니다. public const double SnappingThreshold = 0.001; public static readonly DependencyProperty OffsetProperty = DependencyProperty.Register("Offset", typeof(Point), typeof(PixelSnapper), new UIPropertyMetadata(new Point())); private static Dictionary<FrameworkElement, EventHandler> TargetHandlerDictionary = new Dictionary<FrameworkElement, EventHandler>(); public static void IsPixelSnapPropertyChanged(DependencyObject Sender, DependencyPropertyChangedEventArgs e) { FrameworkElement Target = Sender as FrameworkElement; if ((bool)e.NewValue && TargetHandlerDictionary.ContainsKey(Target) == false) { EventHandler TargetLayoutUpdateHander = (s, ea) => Target_LayoutUpdated(Target, null); TargetHandlerDictionary[Target] = TargetLayoutUpdateHander; Target.LayoutUpdated += TargetLayoutUpdateHander; } else if (TargetHandlerDictionary.ContainsKey(Target)) { Target.LayoutUpdated -= TargetHandlerDictionary[Target]; TargetHandlerDictionary.Remove(Target); } }

LayoutUpdate의 경우 sender에 null이 들어오기때문에 어떤 객체로부터 호출되었는지를 판단하기 위해 람다식을 이용하여 파라미터로 Target객체를 넘기는 대리자를 생성하여 LayoutUpdate를 호출하게 됩니다. 이외 나머지 소스코드 부분은 대부분 이전에 소개해드릴 Fixed Pixel Control과 동일하므로 설명은 여기까지로 하고, 실제 사용할때에는 아래와 같이 사용하시면됩니다.

[XAML에서의 사용]
<Image Source="Gee.png" Width="240" Height="160" m:PixelSnapper.IsSnap="True"/> <Image Source="Gee.png" Width="240" Height="160" m:PixelSnapper.IsSnap="False"/>

[C#에서의 사용]
Image.SetValue(PixelSnapper.IsSnap, true); Image.SetValue(PixelSnapper.IsSnap, false);

더 궁금하신점이나 기타 문의는 이메일이나 댓글로 남겨주시면 되겠습니다. 아래는 테스트를 할 수 있는 소스코드입니다.

PixelSnapperSample.zip

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

안녕하세요 김대욱입니다. 오늘은 이전 시간에 이어 WPF를 사용하여 구현한 IPhone UI입니다. 이전시간과 크게 달라진 점은 없구요.. (그래서 2가 아닌 1.5입니다..) 조만간 다시 바빠질것같아서 그전에 지금까지 구현한 소스코드와 간략한 설명을 적어놓는게 좋겟다 싶어 포스팅을 하게됬습니다.

이전시간과 달라진 점은 MainScreen에서 Icon이 등록된 Page를 마우스를 이용하여 이동할 수 있다는 점과 하단 페이지를 표시해주는 원을 추가했습니다. 마우스를 사용하여 페이지를 약간의 관성(?)을 적용해 이동하는 부분은 추후 다른 페이지에서도 적용기 가능하기 때문에 MovingPanel이라 이름의 Control을 구현했습니다.

아래는 시연 동영상입니다.

아마 이번주 주말까지는 프로젝트가 있어서 더 작업은 힘들것 같습니다. (중간중간 시간이 되면 작업하도록 하겠습니다.)
그리고 아래는 소스코드입니다. 아직 소스코드가 완성된게 아니라 최적화도 안되있을 뿌더러 주석도 달려있지 않습니다.. ^^ 이해해 주시길 바라며, 질문이나 기타 궁금하신점은 이메일 또는 리플 남겨주시면 답변드리도록 하겠습니다.

IPhoneUI.zip

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

오랜만의 포스팅입니다. 인터뷰동영상이 떡하니 메인에 떠있는지라 들어올때마다 민망해 죽을거같아 얼른 가리려고 새로운 글을 올립니다!! (Wii Controller를 사용한 프로그램은 바쁜일이 좀 진정되면 작업하여 포스팅하겠습니다. 죄송합니다 ㅠ_ㅠ)

일단 이번시간에 구현한 내용은 아래 동영상과 같이 원 모양을 한 Listbox가 되겠습니다.  순서에 상관없는 List를 표현하고자 할때 사용하시면 유용할것 같습니다.

동영상에서 등장하는 이미지는 제가 작업한게 아니기 때문에 첨부파일에는 포함하지 않았습니다.
적당한 이미지로 대체 하신후 테스트해주세요 !

기본적인 Listbox의 Control Template으로 사용하거나 독립적인 Control로 사용할수 있습니다. 아이템 마우스 휠을 사용하여 목록을 회전 시킬 수 있으며, 클릭하게되면 해당 아이템이 맨 위쪽에 위치하게 됩니다. 그리고 아이템 개수에 따라 크기가 유동적으로 변하는 기능을 포함하고 있습니다.

특별히 코드에 어려운 부분이 없기때문에 추가 설명은 생략하겠습니다... (필요하시다면 말씀해주세요...)
 ListBox객체를 생성하고 ControlTemlate에 CircleListBoxContainer를 적용한뒤 ItemHost로 지정해줍니다. 그리고 평소 사용하던대로 Listbox를 사용하시면 되겠습니다.

아래는 소스코드입니다.

WPFCircleListBox.zip

 아래는 이번시간에 만들어본 내용을 바탕으로 구현된 응용버전입니다. (여자친구와 함께 만들고있는 Mashup Tool UI입니다.)

기타 궁금하신 점은 이메일이나 리플로 남겨주시면 답변해드리도록 하겠습니다!!

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

안녕하세요. 이번시간에는 페이지가 이동할때마다 FadeIn/Out 효과를 나타내는 TabControl을 구현해 보도록 하겠습니다. 아래는 구현 결과 동영상 입니다.

(그림은 디시인사이드 김여아 겔러리에서 가져왔습니다. 동영상이 뚝뚝 끊기네요 -_-)

왼쪽에는 Tab이 들어가고 오른쪽에는 Content가 들어갑니다.  간단하게 버튼 몇개와 애니메이션을 사용하면 위와 같이 쉽게 구현 할 수 도 있지만, 이번 시간에는 TabControl의 Template을 사용하여 추가되는 컨텐츠에 상관없이 동작함을 유의 깊게 살펴보시기 바랍니다.  소스코드가 꾀 길기 때문에 전체코드를 이곳에 모두 올리지는 않고 필요한 부분만 설명하겠습니다. 전체 소스코드는 첨부파일로 올리겠습니다.

이번 예제에서 XAML 코드에서 하는 일은 단지 레이아웃과 관련된 기능만을 수행하기 때문에 중요한 부분만 설명하도록 하겠습니다.

위 코드를 보시면 ControlTemplate에 하나의 ContentPresenter를 사용하는게 일반적인데 두개의 ContentPresenter를 사용했습니다. 이유는 기존의 하나의 ContentPresenter만 가지고는 두 페이지의 내용이 오버랩 되도록 할 수 없기 때문에 두개의 ContentPresenter를 사용합니다.  계속해서 C#코드입니다.

public partial class SimpleTabControl : TabControl
{

    ContentPresenter CurrentItem { get; set; }
    ContentPresenter BeforeItem { get; set; }

    DoubleAnimation FadeIn = new DoubleAnimation(0, 1, Duration.Automatic, FillBehavior.HoldEnd) { SpeedRatio = 2, AccelerationRatio = 0.7 };
    DoubleAnimation FadeOut = new DoubleAnimation(1, 0, Duration.Automatic, FillBehavior.HoldEnd) { SpeedRatio = 2, AccelerationRatio = 0.7 };
       

    public SimpleTabControl()
    {
        InitializeComponent();

        Loaded += new RoutedEventHandler(SimpleTabControl_Loaded);
        SelectionChanged += new SelectionChangedEventHandler(SimpleTabControl_SelectionChanged);

        FadeOut.Completed += new EventHandler(FadeOut_Completed);
        
    }

    void FadeOut_Completed(object sender, EventArgs e)
    {
        BeforeItem.Visibility = Visibility.Collapsed;
    }

    void SimpleTabControl_Loaded(object sender, RoutedEventArgs e)
    {
        CurrentItem = GetTemplateChild("CurrentItem") as ContentPresenter;
        BeforeItem = GetTemplateChild("BeforeItem") as ContentPresenter;
        CurrentItem.Content = SelectedContent;
    }

    void SimpleTabControl_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (CurrentItem == null) return;

        CurrentItem.Content = (e.AddedItems[0] as ContentControl).Content;
        BeforeItem.Content = (e.RemovedItems[0] as ContentControl).Content;

        BeforeItem.Visibility = Visibility.Visible;
        CurrentItem.BeginAnimation(ContentPresenter.OpacityProperty, FadeIn);
        BeforeItem.BeginAnimation(ContentPresenter.OpacityProperty, FadeOut);
    }
}

사용자가 선택한 Tab이 바뀔 때마다 Fade In/Out 효과를 주어야 하므로 SelectionChange이벤트를 사용합니다. CurrentItem과 BeforeItem은 TabControlTemplate에서 만들었던 ContentPresenter로 GetTempalteChild함수를 사용하여 가져옵니다. 

사용자가 페이지를 선택하게되면 SelectionChange이벤트를 통해 기존에 선택되어 있던 페이지는 RemovedItems로, 새로 선택된 페이지는 AddItems에 추가되어 넘어옵니다. 이때 CurrentItem에는 새로 추가된 페이지의 내용을 넣고 BeforeItem에는 삭제된 페이지의 내용을 넣은뒤 OpacityAnimation을 적용하여 Fade In/Out TabControl을 완성 할 수 있습니다.

간단하면서도 처음 접하기에는 다소 어려운 부분일 수도있습니다만 천천히 따라해보시면 금방 이해하실 수 있을 것입니다.
질문은 리플이나 이메일로 해주시면 답변드리도록 하겠습니다.

SimpleTabControl.xaml

SimpleTabControl.xaml.cs

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

<WINDOW title="WPF Korea - whatisthat.co.kr" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" SizeToContent="WidthAndHeight" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="Wit.MainWindow">
    <GRID Margin="10" Height="300" Width="300">
        <BUTTON Height="100" Width="200" Content="WPF KOREA" />
    </GRID>
</WINDOW

<WINDOW title="WPF Korea - whatisthat.co.kr" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" SizeToContent="WidthAndHeight" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="Wit.MainWindow">
    <GRID Margin="10" Height="300" Width="300">
        <BUTTON Height="100" Width="200" Content="WPF KOREA" FocusVisualStyle="{x:Null}">
    </GRID>
</WINDOW

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.