chapter 1 Hello, WPF

XAML - .Net 객체를 생성하고 초기화하기 위한 XML기반의 언어이다. 비록 WPF에 구현된것보다는 CLR에서 지원하는 다양한 타입들을 위해 사용되기는 하지만 XAML은 WPF에서 사람이

UI를 기술하기 위한 방법으로 사용된다. XAML은 가능한 한 .NET과 직접 매팅할수 있도록 만들어졌다.  XAML의 요소는 .NET클래스의 이름이며, XAML의 특성은 클랫의 숙성이나 이벤트

의 이름이다.

Data Binding - 객체의 속성과 객체의 컬렉션이 하나 이상의 컨트롤의 데이터 뷰와 동기화되도록 유지하는 것이다. 데이터 바인딩의 목적은 객체 내의 데티터 변경이 일어났을때 컨트롤에 이를 반영하거나 반대로 컨트롤에 표시된 데이터를 사용자가 수정했을때 데이터를 업데이트하는 코드를 작서앟는데 필요한 시간을 감소시키는 것이다. 데티터와 컨트롤 사이의 동기화는

INotifyPropertyChanged 인터페이스와 INotifyCollectionChanged 인터페이스에 달려 있으며, 우리는 이들을 데이터와 데이터 컬렉션을 구현하는데 있어 매우 조심스럽게 사용해야 한다.

객체의 소비자에게 속성이 변경되었음을 알리기 위한 표준 인터페이스(standard interface)가 존재하는 것과 마찬가지로 소비가 클래스가 변경된 속성을 수집하기 위한 표준

인터페이스인 INotifyCollectionAhnged 인터페이스도 제공된다. WPF는 이 언터페이스를 구현하는 ObservableCollection이라는 클래스를 제공하며,

우리는 이 클래스를 이요하여 NickName객체가 추가되거나 제거될때 관련 이벤트가 발생하도록 할 것이다.

 

data binding 한 결과물을 ListBox에서 보여준다고 했을 경우에 뭔가 이상한 리스트가 만들어질 것이다.

이것은  ListBox 콘트롤이 해당하는 객체를 모두 보여주려고 하기때문이다. 우리가 원하는 항목을 원하는 것만 보여주기 위해서는

다음 처럼 개별적인 datatemplate을 지정해주어야 한다

ex

<ListBox ItemsSource="{Binding}" IsSynchronizedWithCurrentItem="True" Height="180">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock>
                    <TextBlock Text="{Binding Path=Name}"></TextBlock>
                    <TextBlock Text="{Binding Path=Nick}"></TextBlock>              
                    </TextBlock>                   
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

 

의존속성 - 참고 포스트

대상요소에 데이터 바인딩을 지원하기 위해서 더 필요한 것은 TextBlock요소는 표준속성 래퍼(property wrapper)를 통해 TextContent 속성을 노출하고 있지만 TextBlock 요소를 데이터 바인딩,스타일링, 그리고 애니메이션과 같은 WPF 서비스들과 통합하기 위해서는 의존속성(dependancyProperty)이 필요하다. 의존속성은 컨테이너 요소로부터 값을 상속하는 기능, 객체, 독립적 저장소(잠재먹으로 커다란 메모리 절약효과를 제공해준다), 값의 변경을 추적하는 기능등 .Net 속성이 제공하지 못하는 여러가지 기능을 제공한다.

 

리소스 - 명명된 일련의 데이터로, 코드와는 별도로 분리되어 응용프로그램이나 컴포넌트와 함꼐 제공된다. .Net은 리소스에 대한 풍부한 지원을 제공한다.

 

컨트롤템플릿 - 컨트롤의 속성을 조작하여 외관을 바꿀수 있고 컨트롤의 template속성을 이요하여 컨트롤의 외관을 완전히 다르게 대체할수 있다.

ex

<Button DockPanel.Dock="Bottom" x:Name="addButton" Content="추가">
            <Button.Template>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <Ellipse Width="128" Height="32" Fill="Yellow" Stroke="Black"></Ellipse>
                        <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center">
                        </ContentPresenter>                       
                    </Grid>
                </ControlTemplate>
            </Button.Template>
        </Button>

버튼의 모양과 색을 바꾼 예제

 

리소스

이 글은 스프링노트에서 작성되었습니다.