Page List

2015년 9월 3일 목요일

[WPF] Template

​Template은 모양을 재정의 하는 것입니다.

Template은 몇 가지가 있지만 크게
ControlTemplate과 DataTemplate, ItemsPanelTemplate으로 나뉩니다.
ControlTemplate은 컨트롤의 모양을 정의합니다.
DataTemplate은 Binding된 데이터를 담는 모양을 정의하고,
ItemsPanelTemplate은 아이템들의 정렬을 정의합니다.

그럼 순서대로 하나씩 알아보겠습니다.



​ControlTemplate
왼쪽버튼은 기본 컨트롤, 오른쪽버튼은 Template 적용.
소스를 보시면, ​ControlTemplate에 그리드와 ContentPresenter로 간단히 만들고, 오른쪽 버튼에만 적용시켰습니다.



DataTemplate,ItemsPanelTemplate
DataTemplate을 보여드리려면 Data가 필요하니, SampleDataSource를 사용하겠습니다.
왼쪽이 SampleDataSource를 사용했을 때, 기본 상태이구요
오른쪽이 편집한 상태입니다. 역시 수정한게 보기 낫네요.



소스를 보시면
DataTemplate에는 아이템 구분을 위한 보더와 마진,정렬등을 사용하였고
ItemsPanelTemplate에는 WrapPanel을 사용하여, 줄바꿈이 되도록 하였습니다.​
    <Window.Resources>
        <DataTemplate x:Key="ItemTemplate">
            <Border BorderBrush="White" BorderThickness="1" Margin="3" Padding="3">
                <StackPanel Height="70" Width="100">
                    <Image Source="{Binding Property2}" HorizontalAlignment="Center" Height="50" Width="50"/>
                    <TextBlock Text="{Binding Property1}" Foreground="White" HorizontalAlignment="Center"/>
                </StackPanel>
            </Border>
        </DataTemplate>

        <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
            <WrapPanel/>
        </ItemsPanelTemplate>
    </Window.Resources>

    <Grid DataContext="{Binding Source={StaticResource SampleDataSource}}">
        <ListBox Margin="10" Background="{x:Null}" BorderBrush="{x:Null}"
            ItemTemplate="{DynamicResource ItemTemplate}" ItemsSource="{Binding Collection}" 
            ​ItemsPanel="{DynamicResource ItemsPanelTemplate1}"
            ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Disabled" />
    </Grid>




템플릿은 템플릿편집과, 추가템플릿 편집 두가지가 있습니다.
템플릿 편집은 큰틀을, 추가템플릿 편집은 세부틀을 구성하는 것이라고 보시면 되는데요.

컨트롤을 까보시면 단순컨트롤들은(Button,CheckBox 등) ContentPresenter,
리스트 컨트롤들은 (ListBox, Datagrid 등) ItemsPresenter가 있습니다
추가템플릿 편집은 바로 이 부분을 의미합니다.



버튼과 같은 단순컨트롤들은 추가편집 항목이 한개 뿐이지만,




리스트박스와 같은 복합적인 컨트롤 들은 항목개수가 많습니다.
데이터그리드는 리스트박스보다 더더더 많습니다.
각 항목별 편집 방법은 추후에 각 컨트롤 편에서 다루도록 하겠습니다.



템플릿 편집방법은
뷰화면에서 편집할 컨트롤 우클릭으로 하는 방법
레이어에서 편집할 컨트롤 우클릭으로 하는 방법(왼쪽)
상단개체 메뉴를 이용하는 방법(오른쪽) 세가지가 있습니다.


현재 항목 편집은 스타일이 적용된 상태에서만 활성화되며​,
​복사본 편집은 Blend에서 기본 적용돼 있는 스타일을 복사편집하는 것이구요,
빈 항목 만들기는 새로 만들겠다는 뜻입니다.




Button Template에 대한 동영상



ListBox Template에 대한 동영상



0 개의 댓글:

댓글 쓰기