몸도 마음도 건강하기

안녕하세요! 반짝반짝 빛나는 성남미입니다 :-) 각각의 이미지 Strech의 설정을 비교해 보겠습니다. 검은색 그리드 안에 같은 이미지를 넣고 오른쪽 Common Properties의 설정 창에서 stretch의 설정에 따라 이미지가 달라 보임을 확인할 수 있습니다. _ None : 이미지가 가진 사이즈 그대로를 표현합니다. _Fill : 이미지 비율과 상관없이 그리드를 꽉 채웁니다. _Uniform : 이미지의 비율을 유지한 채, 가로 세로 중 하나가 최대값이 됩니다. _UniformToFill : 이미지 비율을 유지한 채, 이미지를 꽉 채웁니다. 패턴효과를 쓸 때, 역시 같은 방법으로 Stretch 할 수 있습니다. Stretch를 잘 이용한다면 이미지를 원하는 비율로 원하는 사이즈로 쉽게 조절할 수..

안녕하세요! 반짝반짝 빛나는 성남미입니다 :-) WPF에서 기본으로 설정되어 있는 MainWindow와 오른쪽 버튼을 보이지 않게 설정하는 방법을 소개합니다. WPF에서 기본으로 설정되어 있는 화면입니다. 사방에 검은색 테두리가 되어 있고 MainWindow 텍스트와 오른쪽 버튼들이 기본으로 설정되어 있습니다. 빌드(F5)해서 보니 흔히 볼 수 있는 윈도우 팝업창 입니다. 그러면 MainWindow 텍스트와 오른쪽 버튼들이 안노오게 설정해 보도록 하겠습니다. WPF5의 레이어에서 window를 선택하면 오른쪽에 Appearance에 AllowsTransparancy가 활성화 됩니다. 이 부분을 체크해 주면 끝! 체크해 주고 난 뒤 빌드(F5)를 하고 나니 사방에 있던 테두리와 MainWindow 텍스트와..

안녕하세요! 반짝반짝 빛나는 성남미입니다 :-) MainPage.xaml외에 다른 xaml파일을 빌드 해서 보고자 할 때 설정팁을 알려드릴께요. 제가 보기 쉽게 MainPage.xaml 의 화면에 MainPage라고 텍스트를 썼습니다. 다른 Xaml 파일을 추가하겠습니다. 왼쪽 Projects 텝 > C# 파일 처음에 지정한 이름 > 오른쪽 마우스 > Add New Item 추가하기 원하는 아이템을 클릭 > Name 지정 > Ok 내가 지정한 Test_1.xaml 파일이 생겼습니다. 보기 쉽게 Test_1.xaml의 화면에 Test_1 이라고 텍스트를 썼습니다. 빌드를 해보면 예상대로 MainPage.xaml 의 내용이 나옵니다. Test_1.xaml의 내용을 확인해 보고 싶은데 말이죠. App.xaml..

안녕하세요! 반짝반짝 빛나는 성남미입니다 :-) 샘플 데이터로 트리뷰를 만드는 방법을 소개합니다. - TreeView라는 레이어가 생겼고 화면에는 트리뷰가 나올 박스가 생겼습니다. - TreeView레이어를 선택하고 오른쪽 마우스 > Add TreeViewItem을 누르면, 상단에 트리뷰의 헤더가 될 부분이 생겼네요. 이- 헤더 아래에 종속되는 트리뷰 아이템을 추가하기 위해, 헤더 레이어를 선택한 후 오른쪽 마우스 > Add TreeViewItem을 누르면 헤더 밑에 트리뷰아이템이 생겼습니다. 이런 식으로 트리뷰의 메뉴를 레이어에 추가했었습니다. 하지만 샘플 데이터를 이용해 쉽게 트리뷰를 설정할 수 있습니다. TreeView라는 레이어가 생겼고 화면에는 트리뷰가 나올 박스가 생깁니다. 오른쪽 data탭을..

안녕하세요! 반짝반짝 빛나는 성남미입니다 :-) 블렌드에서는 플래시처럼 애니메이션을 간단하게 설정하는 타임라인이 있습니다. 그러나 애니메이션을 실행시키는데 약간의 수고가 필요합니다. 간단한 애니메이션을 설정하고 로드되었을 때 실행되도록 설정하는 방법을 소개합니다. 지금은 많은 사람들이 잘 쓰지 않지만 CD플레이어를 만듭니다. (무지플레이어 갖고 싶어서 T_T) + 버튼을 클릭하면 애니메이션을 만들 수 있는 스토리보드를 생성합니다. +버튼 > 원하는 애니메이션 이름 > ok ok버튼을 누르면 애니메이션을 조정할 수 있는 타임라인이 활성화 됩니다. 그리고 화면 상단에는 애니메이션을 기억하는 녹화 버튼이 활성화 됩니다. Cd가 돌아가는 애니메이션을 위해 0.4초 뒤에 버튼을 눌러 키프레임을 추가합니다. 0.4..

안녕하세요! 반짝반짝 빛나는 성남미입니다 :-) 곡선을 따라 움직이는 애니메이션을 만들 때 사용하는 pathListBox를 소개합니다. 컨트롤에서 pathListBox를 가져옵니다. 화면으로 가져왔습니다. pathListBox가 레이어에 활성화 되고 오른쪽 LayoutPanel에 패스를 설정할 수 있는 창이 생깁니다. 애니메이션을 위한 객체가 따라갈 패스를 그려줍니다. pathListBox의 자식객체에 넣지 않아야 합니다! 다음과 같이 직선이 아닌 둥근모양의 선을 그렸습니다. 과녁모양의 버튼을 눌러 내가 패스 레이어를 선택합니다. 내가 선택한 패스가 애니메이션의 모션패스가 됩니다. 그리고 pathListBox의 자식레이어로 내가 그려 넣기 원하는 원모양을 넣습니다. 그러면 화면에서 알아서 패스의 시작점에..

안녕하세요! 반짝반짝 빛나는 성남미입니다 :-) 서비스를 불러올 때 로딩되는 시간을 나타내주는 로딩바! BusyIndicator 컨트롤을 소개합니다. 블렌드에서 제공하는 BusyIndicator의 기본모습입니다. 이렇게 꺼내놓고 보니 어떻게 쓰이는 컨트롤인지 감이 확 오실꺼에요. 컨트롤 메뉴에서 BusyIndicator를 화면에 꺼냅니다. 꺼냈을 때의 모습입니다. 이렇게 화면에 꺼내놓고 보니 어떤 컨트롤인지 잘 모르겠네요. 어떤 컨트롤인지 파헤치기 위해 디자인 스타일을 만듭니다. BusyIndicator > 오른쪽 마우스 > Edit Templete > edit a copy > 이름지정 > ok 디자인 수정 화면으로 들어가보니 로딩이 되었을 때의 모습이 나타납니다. 레이어를 열심히 키고 꺼 봤더니 로딩에..

안녕하세요! 반짝반짝 빛나는 성남미입니다 :-) 트리뷰 컨트롤의 헤더를 씌었었는데요, 나머지 뎁스의 디자인도 씌어보겠습니다. 여기서 잠깐! 헤더 아래 2뎁스(1-1, 1-2)의 정렬을 왼쪽으로 수정하고 싶습니다. 스테이트의 Expanded를 활성화 시키면 아래 뎁스의 영역을 수정할 수 있습니다. ColumSpan의 숫자를 조절해 아래뎁스의 영역을 수정합니다. 이제 헤더 아래의 뎁스 디자인을 수정해 보도록 하겠습니다. 2뎁스 레이어 > 오른쪽 마우스 > Edit Templete > edit a copy > 이름지정 > ok 앞에서 계속 했듯이 ExpanderButton의 버튼을 전체 영역으로 잡아준 줍니다. 이렇게 하면 클릭했을 때 영역을 지정해 줄 수 있습니다. ExpanderButton > 오른쪽 마우..

안녕하세요! 반짝반짝 빛나는 성남미입니다 :-) 트리뷰 컨트롤에 디자인을 씌어보도록 하겠습니다. 먼저 헤더1의 디자인을 바꿔보겠습니다. 헤더 1 > 오른쪽 마우스 > Edit Templete > edit a copy > 이름지정 > ok 디자인 편집모드로 들어가면 레이어 ExpanderButton의 영역이 전체 다 잡힐 수 있도록 ColumSpan을 3으로 잡아주고, 전체 마진을 모두 0으로 놓습니다. 이렇게 하면 나중에 헤더의 영역을 글자가 아닌 내가 설정한 전체 영역으로 설정되게 됩니다. ExpanderButton의 화살표 이미지를 수정하기 위해 ExpanderButton > Edit Templete > Edit a copy > 이름지정 > ok 버튼디자인 편집모드로 들어갑니다. 앞에서 ColumSp..

까페에서 진행한 세미나를 무사히 잘 마쳤습니다. 스스로 정리도 되고 준비하면서 많이 느꼈습니다. 힘들지만 재밌었습니다 :)