모아온 글(영어)2012.08.14 11:07

The WPF and Silverlight platforms use late bound data binding resolution for bindings in XAML files. This feature allows a DataContext to be set at run-time and the objects within that DataContext to resolve their property bindings then. This late binding enables cool features like DataTemplates, composable applications and run-time loading of loose XAML.

A side effect of late bound binding resolution that can cause developers some minor frustration is that their controls do not display the expected data at run-time.

This article will explain troubleshooting techniques that can help you locate and correct the problem.

Data Binding Overview

Data binding is fundamental to WPF and Silverlight. You will struggle with your application designs, coding and troubleshooting until you understand data binding in these platforms.

The best data binding resource available is the MSDN Data Binding Overview topic. If you have not read or don't fully understand the material in this topic, please take the required amount of time to learn this material.

Ounce of Prevention is Worth a Pound of Cure

Visual Studio 2010 has great tooling to wire up data bindings and checked them at design-time. Please read this article: How to Enable Using the Binding Builder in WPF and Silverlight Applications.

Visual Studio 2010 has excellent design-time sample data support. If you use design-time sample data, you'll immediately see controls that don't have expected data values at design-time.

For a detailed examination of sample data in the WPF and Silverlight Designer for Visual Studio 2010, please read this article: Sample Data in the WPF and Silverlight Designer.

Troubleshooting List

  • Verify that DataContext is set in either XAML or code
  • Run the application and view the output in the Debug Output Window
    • For WPF applications you can increase or decrease the amount of information displayed in the Debug Output Window by changing the WPF Trace Settings, Data Binding value
  • Name the control that has DataContext assigned, set a break point in the code, and view the named control's DataContext property in the debugger
  • If binding to a CLR object, put a breakpoint in the source property getter to see that its actually being queried
  • Add a converter to a binding, then put a breakpoint in the converter


 

Verify that DataContext is set in either XAML or Code

This tip is along the lines of, "if the TV won't turn on, check that it's plugged in."

This is important for many reasons, but one is easily overlooked; if a DataContext is null, the Debug Output Window will not display any error messages in Silverlight or in WPF.

In WPF you can use the below PresentationTraceSources on a binding and set the TraceLevel to High to view errors related to a null DataContext.

View the Debug Output Window

If you have the DataContext set, any data bindings within that DataContext that can't be resolved will be listed in the Debug Output Window at run-time.

Sample Debug Output Window Data Binding Error

Sample One

System.Windows.Data Error: 40 : BindingExpression path error: 'FirstName' property not found on 'object' ''Object' (HashCode=62178992)'. BindingExpression:Path=FirstName; DataItem='Object' (HashCode=62178992); target element is 'TextBox' (Name=''); target property is 'Text' (type 'String')

Sample Two

System.Windows.Data Error: 40 : BindingExpression path error: 'FirstName' property not found on 'object' ''Customer' (HashCode=13640894)'. BindingExpression:Path=FirstName; DataItem='Customer' (HashCode=13640894); target element is 'TextBox' (Name=''); target property is 'Tag' (type 'Object')

While the above messages look verbose and complex, you can glean several interesting points of information that will help you correct this data binding:

  • The Binding Path is FirstName. Search your XAML file for FirstName and see if you expect the DataContext to expose a FirstName property whose scope will allow this binding to resolve this property.
  • The Source object in Sample One is of Type Object. There is a good chance the Type Object does not have a FirstName property.
  • The Source object in Sample Two is of Type Customer. Check your Customer Type; does it have a FirstName property?
  • Notice in Sample Two, the target property is Tag. In all likelihood, the Text property was the desired target property and not Tag. Also the Type of Tag is Object; you would probably be expecting String when binding to the FirstName property.

Review

  • Verify the property name is spelled correctly
  • Verify the property name has the correct character casing. FirstName is not the same as firstName.
  • Verify the property is a member of the DataContext Type
  • Verify the target element is the correct Type
  • Verify the target property name and Type are correct



 

Important

Data binding property path names are Case Sensitive.



 

WPF Trace Settings, Data Binding


 

Important

The default value of the WPF Trace Settings, Data Binding is "Error." It is recommended that you change this setting to "Warning." Please read this short blog postfor more information.

This is required if you use the attached property PresentationTraceSources.TraceLevel. If the value is set to "Error" you won't see any of the PresentationTraceSources.TraceLevel warning messages.

To change the WPF Trace Settings, Data Binding value to "Warning," navigate to Tools, Options, Debugging, Output Window, WPF Trace Settings, Data Binding and set the value to Warning as I've done in the below image.

Note

This setting affects all bindings in WPF the application. For a more targeting approach, see the PresentationTraceSources.TraceLevel section below.



 

Important

If this setting is set to, "Off" you will not see any WPF Data Binding Errors in the Debug Output Window.


 

PresentationTraceSources.TraceLevel

Introduced to WPF in .NET 3.5 SP1, the PresentationTraceSources.TraceLevel attached property allows developers to dial up the amount of information outputted in the Debugger Output Window for a binding.

The below XAML snippet shows how to apply the PresentationTraceSources.TraceLevel attached property to a binding. 

<Window 
    xmlns:diag="clr-namespace:System.Diagnostics;assembly=WindowsBase"
    xmlns:local="clr-namespace:DebugDataBindings"
    x:Class="DebugDataBindings.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
    <Grid x:Name="layoutRoot">
        <Grid.Resources>
            <local:DebugConverter x:Key="debugConverter" /> 
        </Grid.Resources>
        <TextBox 
            Text="{Binding Path=Customer.FirstName, diag:PresentationTraceSources.TraceLevel=High}"   
            Height="23" HorizontalAlignment="Left" Margin="90,18,0,0" VerticalAlignment="Top" Width="120"/>
    </Grid>
</Window>

Use the Debugger Quick Watch to View the DataContext

If the above suggestions to do not solve your problem:

  • Locate the control's parent panel like a Grid in your XAML
  • Apply a x:Name to the control
  • Set a break point in your code, and view the named panel control's DataContext property in the debugger

Open the QuickWatch dialog, change the Expression to the named control in the XAML and look at the control's DataContext property.

  • In the below image, I have changed the Expression to, "this.layoutRoot.DataContext" in VB.NET you would change it to, , "Me.layoutRoot.DataContext"

This information will at least confirm the shape (Type) of the DataContext and the values inside the DataContext.

This tip provides value in two ways:

  • If the DataContext had been set then subsequently changed by some other code, you'll be expecting the initial value but will see another value
  • If the property was nested within another class, you can easily see the shape of your DataContext and then ensure that your bindings are properly dotted in.
    • Notice the path to the FirstName property is DataContext.Customer.FirstName.
    • This means that if you wanted to data bind to the Text property on a TextBox that was a child of the Grid named layoutRoot, the binding expression must read:

      <TextBox Text="{Binding Path=Customer.FirstName}" ... />

Place a Breakpoint inside the Source Property Getter

If you are binding to a CLR object, put a breakpoint in the source property getter to see that it's actually being queried.

If it's not be queried, you have a mismatch in the property name, property is not properly dotted in, DataContext is null or does not contain this property.

Add a Converter to a binding, then put a Breakpoint in the Converter

Important

The use of a converter to troubleshoot a data binding only works if the DataContext is not null, and the DataContext Type exposes a property with the same name in the binding expression.

A ValueConverter allows you to view the data as its being moved between the target and source. In the below image the converter in the middle is named "ColorBrushConverter."

The below converter is a no-op converter named, "DebugConverter." This reusable converter will allow you to place a breakpoint in the Convert and ConvertBack methods and then view the value of the "value" parameter at debug time. 

using System;
using System.Windows.Data;

namespace DebugDataBindings {
    public class DebugConverter : IValueConverter {

        public Object Convert(Object value, Type targetType, Object parameter, System.Globalization.CultureInfo culture) {

            //set a breakpoint here
            return value;
        }

        public Object ConvertBack(Object value, Type targetType, Object parameter, System.Globalization.CultureInfo culture) {

            //set a breakpoint here
            return value;
        }
    }
}

The below XAML show the above converter being applied to the TextBox.Text property binding.

<Grid x:Name="layoutRoot">
        <Grid.Resources>
            <local:DebugConverter x:Key="debugConverter" /> 
        </Grid.Resources>
        <TextBox Text="{Binding Path=Customer.FirstName, Converter={StaticResource debugConverter}}"   
            Height="23" HorizontalAlignment="Left" Margin="90,18,0,0" VerticalAlignment="Top" Width="120"/>
    </Grid>

Comments

Microsoft values your opinion about our products and documentation. In addition to your general feedback it is very helpful to understand:

  • How the above features enable your workflow
  • What is missing from the above features that would be helpful to you

Thank you for your feedback and have a great day,

Karl Shifflett 
Expression Team

Posted by UXPRO
분류없음2012.06.21 18:22

 
 
 
뜨거운 여름만큼 4주 동안의 뜻있고, 의미있는 시간을 만들어 보실 스터디 멤버를 구합니다.
 
날짜 7월 7일 [토요일] 매주 오전 10시(C#.NET / ASP.NET / UX 프로그래밍)
7월 10일 [화요일] 매주 저녁 7시 30분 (윈도우8 스터디)
* OT는 각 파트별로 첫주에 같이 진행됩니다.
모집기간 ~ 7월 1일(일) 까지 / 7월 2일 발표(월)
진행기간 7월 7일 부터 4주간 진행
모집인원 각 파트별 20명(총 80명 정원)
모집분야 1. C#.NET기초튼튼 /매주 토요일 오전10시
2. ASP.NET MVC로 갈아타기 /매주 토요일 오전10시
3. 윈도우8 앱 따라 만들기 /매주 화요일 오후7시30분
4. UX 프로그래밍(WPF/Silverlight) /매주 토요일 오전10시
시작일자 2012년 7월 7일(토) 오전 10시 (총 4주)
2012년 7월 10일(화) 오후 7시 30분(총 4주)
지원방법 신청서e-mail 첨부(sijin131@nate.com / akemier@nate.com)
장소 한국MS 포스코센터 5층(선릉역)
스터디 과정 소개
C#.NET 기초튼튼 - [신청서 다운로드]
1주차: 클래스, 인터페이스
2주차: 쓰레드, 소켓
3주차: 리플렉션
4주차: LINQ, 람다식
ASP.NET MVC로 갈아타기 - [신청서 다운로드]
1주차: MVC 개념잡기, 라우팅 개념
2주차: HTML(Razor),MVC AJAX, JQuery
3주차: 권한, 스캡홀딩 엔티티 프레임워크
4주차: MVC4 신개념 소개 및 영역
윈도우8 앱 따라 만들기 - [신청서 다운로드]
1주차: Built in Controls / ListViews and DataBinding / Task
2주차: Orientation, Snapping, and Semantic Zoom / Contract (Searching and Sharing)
3주차: I/O and Storage / Appbars and MediaCapture / PLM
4주차: Settings / Tiles, Notifications
UX 프로그래밍(WPF/Silverlight) - [신청서 다운로드]
1주차: MS UX프로그래밍의 소개 (WPF, Silverlight)
2주차: 레이아웃과 그래픽
3주차: 컨트롤 및 바인딩
4주차: 이벤트 및 트리거
멘토 소개
C#.NET 기초튼튼
천정민  계지연
ASP.NET MVC로 갈아타기
송창은  이지선
윈도우8 앱 따라 만들기
윤병걸  박경민
UX 프로그래밍(WPF/Silverlight)
최우진  최다은
스터디 문의
김시진 or 방웅배 :커뮤니티 시삽
메일 & 네이트온: sijin131@nate.com / akemier@nate.com
카톡 : sijin131
스터디 Addmission
박경훈  김시진  방웅배

Posted by UXPRO


라는 에러창이 떠나 깜짝 놀라 보신적이 있나요?

실버라이트가 디버깅이 안된다... (그냥 구글링을 하면 될것을...)
 
저는 '스스로 어른'이므로 혼자 프로젝트 속성에서 실버라이트, 디버그, 빌드 등에서 잘못된것은 아닌지 혼자

쪼물딱거리고 좌절하기를 장장 5분... (50분 절대 아닙니다.)


그냥 구글링했습니다. (정신 건강을 위해서 구글링 강추~)

다 필요없구요. 해결책(?)은 아래와 같습니다.

1. Microsoft® Silverlight™ 3 Tools for Visual Studio 2008 SP1 (이것일 확률 99.1 %)
2. 브라우저가 IE(되도록이면 8이상 버전 추천, 32bit)여야 한다고 합니다. (확률 0.9%)

또는 3. Microsoft® Silverlight™ 3 SDK 도 한번 다시 깔아보세요.

1번이나 3번을 구하는 방법은 다들 아시겠지만...

http://www.microsoft.com/downloads/en/results.aspx?freetext=silverlight+3&displaylang=en&stype=s_basic

뭐 이런걸 검색하셔서요.
 
Silverlight 3 Tools 나 Microsoft® Silverlight™ 3 Software Development Kit 를 다운 받으시면 됩니다.


===========================
"사장님! 사족 하나 추가요~!!"
===========================

http://silverlight.codeplex.com/releases/view/36060 

여기서 구할수 있는 Silverlight 3 Toolkit 과 위에서 말하는 Silverlight 3 Tools 은 다른거예요.

 Silverlight 3 Toolkit : 코드플렉스에 공개되어 있는 '님 좀 짱'인 컨트롤들.
 Silverlight 3 Tools : Visual Studio에서 Silverlight를 개발할 수 있게 하는 툴.

다들 이런건 아시잖아요. 이런것도 모르면 개발자가 아니잖아요. 피씨방 알바지. ^^;;;
Posted by UXPRO
개인 공간2010.02.06 10:17

Posted by UXPRO
Silverlight2009.11.24 02:31
실버라이트에서 미디어를 재생하는데 가장 많인 쓰이는 컨트롤로 MediaElement 가 있습니다.

MediaElement의 기본 속성으로 AutoPlay가 있어서 Source부분에 경로를 선언해주거나 바인딩해주면 1회 재생에는

문제가 없이 깔끔하게 동작을 합니다.


문제는 고객들의 요구사항이 1회만으로 만족을 못 하고 반복재생을 요구할 때도 있다는 것입니다.

그래서 "StoryBoard처럼 RepeatBehavior 를 new RepeatBehavior(횟수); 하면 되겠구나. 룰루랄라~!!!"

뜨억!!! 없습니다. 


아니! 왜? '미디어엘리먼트'는 반복재생이 안되는거냐구.

그냥 수고스러우시겠지만 Xaml단에서 미디어 엘린먼트를 선언해 주시고 아래의 코드를 작성하시면 무한도전(?)

아니 무한재생 모드에 들어갑니다. 

MediaE : MediaElement의 네임

위의 소스를 보시면 미디어엘리먼크가 끝날때 마다 이벤트를 잡아서 MediaE_MediaEnded()에 넘기기 떄문입니다.

여기까지는 뭔가 쉬운듯하면서 허접해 보이신다구요. (물론 좀 많이 허접하고 내용도 없네요.)


그래서 쪼금 업그레이드를 해 봤습니다.

MediaRepeat이 재생을 원하는 횟수겠구요. (지금 '3'으로 표시된곳에 함수를 선언하시면 동적으로 되겠죵?)


다들 아시겠지만 사족을 좀 달자면.....

MediaElement.MediaEnded 는 단순히 미디어가 재생완료된 시점 (10초짜리 미디어이면 10초인 부분)
MediaElement.Stop(); 은 미디어를 종료시킴과 동시에 미디어 처음으로 돌립니다. (0초인 부분)
MediaElement.Position 은 위에서 10초인 부분과 0초인 부분 같이 현재 미디어의 재생 포커스 위치입니다.
그걸 다시 TimeSpan을 써서 '0'으로 이동시킨 것이구요,

따라서. this.MediaElement.Stop() 또는 MediaElement.Position = TimeSpan.FromSeconds(0); 둘 중
하나만 쓰셔도 동작하는데 전혀 문제는 없습니다.

감사합니다.

Posted by UXPRO
WPF2009.11.21 11:21

Silverlight 프로젝트를 많이 해 본 개발자 분들은 WPF 프로젝트에서 왜 'Expression Blend에서 열기'가 오른쪽 마우스 메뉴에 없지?? 하고 의아해 하실것입니다. 


글쎄요? 왜 그럴까요? WPF의 XAML이 Silverlight의 XAML보다 VS에서 더 잘 보인다는 것 때문일까요?

아무튼 제 경우에는 그냥 VS로 프로젝트를 열고 Blend로 프로젝트를 열고 두 번의 작업을 번거롭게 해줬었는데요.

여기에 빠르게 블랜드로 열 수 있는 방법을 소개합니다.


제일 먼저 [도구(T)] - [외부도구(E)...] 을 선택합니다.



그러면 아래와 같은 [외부 도구] 창이 뜨게 되는데요.

오른쪽 상단의 [추가(A)] 버튼을 누르면 아래와 같이 [새 도구 1]이라는 내용이 새로 생성됩니다.
 



1. [제목(T):] 부분에서 [새 도구 1]을 [블랜드로 열기(&B) 같이 여러분이 직관적으로 이해하기 쉽게 설정을 해주시면 됩니다.
{(&B) 는  ALT + B 의 단축키입니다.}
2. [명령(C):] 부분에 Blend 프로그램 설치 경로의 [블랜드 실행파일(Blend.exe)]을 선택해 줍니다.
3. [인수(R):] 부분에 "$(SolutionDir)$(SolutionFileName)"를 설정해 주시면 됩니다.




적용을 하시고 다시 [메뉴]에서 [도구(T)]를 열어 보시면




[블랜드로 열기(B)]가 [추가]된 것을 확인하실 수 있습니다.

이제. [솔루션 탐색기]에 있는 [프로젝트 구조]에서 XAML파일을 선택하시고

[도구(T)] - [블랜드로 열기(B)]를 선택하시거나 간단하게 ALT키 + T, B를 누르시면 블랜드가

열립니다.

감사합니다.



Posted by UXPRO
개인 공간2009.10.31 05:42

 

세션이 시작되기 전 준비상황입니다.

 

 

저 멀리에 누군가 왠지 무엇인가 알고 있는 실루엣이 보이더군요.

 

 

막강 10배줌 크리 ('ivoryguard'님이1세션을 준비중이셨습니다.)

 

 

 

 

서명덕 기자님! 너무 열정적으로 설명해 주시느라... 잘 나온 사진이 없습니다. 죄송!

 

 

김영욱 차장님!

 

 

지금은 발표 중...

 

 

팔꿈치의 위치로 눈치 채신 분이 계신지 모르겠지만... (지금은 멀티터치 시연 중...)

화면에서 동그라미가 뿅뿅 나오는 곳이 터치 한 포인트 (3개의 숨은 터치 찾기)

 

 

Windows7의 '접근성'에 대해 설명해 주시는 김영욱 차장님!!

 

 

김영욱 차장님과 김용현 MVP 님!!

 

 

서학수 MVP님!!

 

 

'훈스닷넷' 운영자 박경훈MVP 님!!

 

 

오일석 MVP 님!!

 

 

완젼 집중 모드의 참석자 님들...!!

 

 

이스트소프트의 김용현 MVP 님!!

 

 

NVIDIA의 누구 님!!

(김승규 님 아니시면 류현곤 님)

 

 

세미나의 꽃... 경품 추첨 시간.... (아침부터 이것떄문에 기다렸다..)

기도하는.... 팝콘 케릭터 (더우셨을텐데 수고하셨습니다.)

 

 

이렇게 많은 당첨자 중에 내 번호는 없었다는...

 

 

감격(?)의 포옹!!!

(그런데 인형안에 계신분은 남자일까? 여자일까?)
 

====================================================================================================================

세미나 후기 : Windows7은 UI적인 입장에서나 성능면에서도 지금까지 나온 윈도우 운영체제 중에 최고가 아닐까 아니

최고라는 의견이 지배적이었다.

멀티터치가 지원 가능하다는 내용이 많았지만 사실 멀티터치 하드웨어가 비싸서 나와는 먼 이야기 인 줄 알았다.

그런데 프로그램으로 여러개의 마우스로 멀티터치인것 처럼 동작하게 만들수 있다는 내용을 들었다.

다른 부분은... 테스크바라던가 하는 부분이 기존과는 많이 다르게 하지만 성능은 훨씬 빠르게 발전했다고 들었다.

G센서로 컴퓨터의 움직임값을 받는다던지, 네비게이션과 비슷한 로컬정보 활용 같은 윈도우의 미래상을 쉽고 빠르게 배울 수

있었던 좋은 세미나였다.

대한민국 개발자는 한국 IT 발전의 일등공신들...

====================================================================================================================

Posted by UXPRO
개인 공간2009.10.31 02:53

월간 마이크로스프트에서 주최/주관하는 세미나인 [Windows7이 여는 미래 컴퓨팅 환경]에 다녀왔습니다. 

평일에 진행되는 세미나라 조금 부담이 되긴 했지만...

선착순 100명에게만 주는 선물이 있다고 하여 아침 8시부터 가서 대기하고 있었습니다. 선착순 5등("헤드셋" 득템 ^^V)

 

너무 일찍가서 부스가 아직 꾸며지기 전입니다. (부스 운영 회사 직원들보다 더 빠른 진입)

 

 

로비에서 허허벌판 아니 허허부스판을 열심히 찍다가 강당안에서도 소리가 들려서 들어가 보았습니다.

 

 

강당안에서도 뚝딱뚝딱... 현재 시간 AM 9시.... (등록은 9시 30분 예정이지만 이미 선착순 50분은 오신 듯...ㄷㄷ)

 

 

이제 본격적으로 세미나 등록이 시작되고 있습니다.

어여쁜 검은색 정장의 여성분(?)들이 접수를 받아주셔서... 소심한 저는 떨려서 등록을 못할뻔 했으나

저는 이미 저 분들 출근전에 MS직원(그분도 상냥하고 착하게 생기는 여성분(?))분에게 등록 완료. (선착순 5번)

 

 

저쪽 벽에 사람들의 시선이 잘 머물지 못하는 곳에 무언가 아트(?)적인 구조물을 발견.... ("어서 오세요." 손짓하는 듯한...)

솔직히 멀리서 보기에는 LED 치고는 뭔가 어설프지만 관심이 가는....

 

 

헉!!! 그렇습니다. Windows7 타이틀이었습니다.

(안에 시디가 들어 있을 것 같았는데 시선이 많아서 뜯어보는것은 실패... 아쉽!!!)

 

 

마이크로소프트 세미나에서 언제부턴가 나타나 이제는 당연히 있을껄? 하게 만드는 팝콘 부스(?)

그러고 보니 이번 세미나에서는 팝콘부스가 거의 남자분들이 상주하시더라는....(예전에 여성분도 계셨는데... 쩝)

(짭짜름한 맛있는 팝콘 만들어 주시는 분의 초상권은 지송(?))

 

 

녹색<-, 노란색^, 주황색->

(무엇에 쓰는 물건인고???)

 

 

그렇습니다. 저 뒤에 보이시는대로 Windows7을 사용해 볼 수 있는 자리였습니다.

(오후 1세션 발표자이신 "박경훈"님의 뒤통수 우정 출연 감사!) <-사진 제일 아래

(중간에 모여 계신 분들중에 세미나를 열어주신 마이크로소프트 김영욱 차장님도...)

 

이상 세미나 바깥 풍경이었습니다. (시간 순인지는 모르겠지만 하루 종일의 바깥 풍경) 

Posted by UXPRO
News & Info2009.10.28 05:44


Posted by UXPRO
Grid는 Silverlight에서 제공하는 가장 유연하고 강력한 컨테이너 개체입니다. Grid는 열과 행으로 구성된 유연한 표 영역을 정의합니다. 각각 ColumnDefinition 및 RowDefinition을 사용하여 Grid의 열과 행을 정의합니다. 기본적으로 표의 자식은 첫 번째 행과 첫 번째 열에 배치됩니다. Grid..::.Column 및 Grid..::.Row 연결 속성을 설정하여 Grid의 특정 셀에 개체를 배치할 수 있습니다. 다음 예제에서는 Grid를 사용하여 Grid 내에 TextBlock 개체 몇 개, Button 및 Rectangle 개체 각각 한 개를 배치하는 방법을 보여 줍니다. 

<Grid Background="#DCDCDC"

ShowGridLines="True">

    <Grid.ColumnDefinitions>

        <ColumnDefinition Width="*" />

        <ColumnDefinition Width="*" />

        <ColumnDefinition Width="*"/>

    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>

        <RowDefinition Height="Auto" />

        <RowDefinition Height="*" />

        <RowDefinition Height="*" />

        <RowDefinition Height="*" />

    </Grid.RowDefinitions>

    <TextBlock Margin="2" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3"

           TextWrapping="Wrap">

    This TextBlock is positioned in the first column and the

    first row (column 0, row 0) and spans across all three columns (ColumnSpan 3).

    </TextBlock>

    <TextBlock Grid.Column="0" Grid.Row="1" Margin="5" FontWeight="Bold">Rectangle:</TextBlock>

    <Rectangle Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2" HorizontalAlignment="Left" Fill="Red"

           Width="200" Height="50"/>

    <Button Grid.Column="0" Grid.Row="2" Content="Stretched Button" />

    <Border Background="White" BorderThickness="5" Grid.Row="2" Grid.Column="1" Grid.RowSpan="2" >

    <TextBlock TextWrapping="Wrap">

        This TextBlock spans across two rows.

    </TextBlock>

    </Border>

    <TextBlock Margin="5" Grid.Row="3" Grid.Column="0">1st Column, 4th Row</TextBlock>

    <TextBlock Margin="5" Grid.Row="3" Grid.Column="2">3rd Column, 4th Row</TextBlock>

</Grid>


다음 그림에서는 이 코드가 렌더링되는 방식을 보여 줍니다. 여기서는 Grid의 선이 표시되도록 Grid의 ShowGridLines 속성이 true로 설정되었습니다. ShowGridLines는 Grid 셀 위치를 시각화하는 데 유용하지만, 모눈선은 스타일을 지정하거나 사용자 지정할 수 없으므로 레이아웃 디자인을 마친 후에는 일반적으로 모눈선이 제거됩니다.


앞의 예제에서는 Star 크기 조정을 사용하여 공간을 비례적으로 배분합니다. 기본적으로 Star는 행이나 열의 높이 또는 너비이므로 사용 가능한 공간의 가중 비율이 해당 열이나 행에 할당됩니다. 이 예제에서는 각각 단일 별표 크기를 사용하는 세 개의 열이 있으므로 표에 사용할 수 있는 너비의 1/3이 각 열에 할당됩니다.

참고:
Star 크기 조정이 제대로 작동하려면 모눈의 크기를 제한해야 합니다. Height 및 Width 속성을 명시적으로 설정하거나 Grid에서 HorizontalAlignment 및 VerticalAlignment 값을 Stretch 로 설정하여 모눈 크기를 제한할 수 있습니다.
 

행과 열은 Auto 크기 조정을 사용할 수도 있습니다. 이 경우 열이나 행에 들어 있는 내용의 크기에 따라 공간이 균등하게 배분됩니다. 행과 열은 해당 행 또는 열의 모든 셀에 들어 있는 내용 중 가장 긴 내용을 수용할 수 있는 최소한의 공간만 차지합니다. Grid에 공간이 부족하여 모든 내용을 포함할 수 없는 경우 오른쪽 아래에서 시작하여 내용이 잘립니다. 이 예제에서 첫 번째 행과 마지막 행은 Auto 크기 조정을 사용하며 텍스트를 포함하도록 크기가 조정됩니다.

Star 크기 조정과 HorizontalAlignment 및 VerticalAlignment 값 Stretch와 함께 사용하면 화면 공간 비율을 기준으로 레이아웃 공간을 분할할 수 있습니다. Grid는 이러한 방식으로 공간을 배분할 수 있는 유일한 레이아웃 패널입니다. 이러한 속성에 대한 자세한 내용은 이 항목의 뒷부분에 있는 여백 및 맞춤 속성을 참조하십시오. 

Posted by UXPRO