[WPF] Data Template 간단 예제

●  WPF Data Template이란? 

     - 개발자와 디자이너가 멋진 시각 효과를 만들고 제품의 모양을 만드는 데 사용할 수 있는 기능 집합(스타일, 템플릿, 트리거 및 스토리보드)

- 상속계층구조

System.Object 

  System.Windows.Threading.DispatcherObject

    System.Windows.FrameworkTemplate

      System.Windows.DataTemplate

       System.Windows.Controls.ItemContainerTemplate

         System.Windows.HierarchicalDataTemplate

- Data Template 간단한 예제

[예제1]

<Window x:Class="WPF탬플릿 SAMPLE.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">

    <Canvas  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

        <Canvas.Resources>

            <Style TargetType="{x:Type Ellipse}">

                <Setter Property="Stroke" Value="Black"/>

                <Setter Property="StrokeThickness" Value="3"/>

                <Setter Property="Width" Value="96"/>

                <Setter Property="Height" Value="96"/>

            </Style>

        </Canvas.Resources>

        <Ellipse Canvas.Left="100" Canvas.Top="50" Fill="Blue"/>

        <Ellipse Canvas.Left="150" Canvas.Top="100" Fill="Red"/>

        <Ellipse Canvas.Left="200" Canvas.Top="150" Fill="Yellow"/>

        <Ellipse Canvas.Left="250" Canvas.Top="100" Fill="Green"/>

        <Ellipse Canvas.Left="300" Canvas.Top="50" Fill="Aqua"/>

    </Canvas>

</Window>

[ 예제1 실행결과 ]

[예제2]

<Window x:Class="WPF탬플릿 SAMPLE.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>

        <Grid.Resources>

            <ControlTemplate x:Key="buttonTemplate" TargetType="{x:Type Button}">

                <Grid>

                    <Ellipse x:Name="outerCircle" Width="200" Height="200" >

                        <Ellipse.Fill>

                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

                                <GradientStop Offset="0" Color="Green" />

                                <GradientStop Offset="1" Color="Yellow" />

                            </LinearGradientBrush>

                        </Ellipse.Fill>

                    </Ellipse>

                    <Ellipse Width="150" Height="150">

                        <Ellipse.Fill>

                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

                                <GradientStop Offset="0" Color="White" />

                                <GradientStop Offset="1" Color="Transparent" />

                            </LinearGradientBrush>

                        </Ellipse.Fill>

                    </Ellipse>

                    <Viewbox>

                        <ContentControl Margin="20" Content="{TemplateBinding Content}" />

                    </Viewbox>

                </Grid>

                <ControlTemplate.Triggers>

                    <Trigger Property="IsMouseOver" Value="True">

                        <Setter TargetName="outerCircle" Property="Fill" Value="Orange" />

                    </Trigger>

                    <Trigger Property="IsPressed" Value="True">

                        <Setter Property="RenderTransform">

                            <Setter.Value>

                                <ScaleTransform ScaleX=".9" ScaleY=".9" />

                            </Setter.Value>

                        </Setter>

                        <Setter Property="RenderTransformOrigin" Value=".5,.5" />

                    </Trigger>

                </ControlTemplate.Triggers>

            </ControlTemplate>

        </Grid.Resources>

        <Button Template="{StaticResource buttonTemplate}">SUTS</Button>

    </Grid>

</Window>

 

[ 예제2 실해결과 ]