68.SilverLight3 - Template

Template
- 컨트롤 디자인(유형)을 변경 할 수 있는 기능입니다. 이전 컨트롤 속성에서 디자인 할 수 있지만 Template를
   사용하면 좀더 다양하게 변경 할 수 있습니다. 리소스 선언하여 컨트롤 적용가능합니다.

---

ControlTemplate

FrmControlTemplate.xaml

[그림 68-1] <Grid x:Name="LayoutRoot">     <!--[1] 버튼 모양 직접 정의-->     <Button Width="200" Height="100">         <Button.Template>             <ControlTemplate TargetType="Button">                 <Border BorderBrush="DarkBlue" BorderThickness="5">                     <TextBlock Text="템플릿이 적용된 버튼" HorizontalAlignment="Center"                                VerticalAlignment="Center"></TextBlock>                     </Border>             </ControlTemplate>         </Button.Template>     </Button> </Grid>

---

TemplateByStyle

FrmTemplateByStyle.xaml

[그림 68-2] <Grid x:Name="LayoutRoot">     <Grid.Resources>         <!--스타일로 컨트롤 템플릿 구현-->         <Style x:Key="myButton" TargetType="Button">             <Setter Property="Template">                 <Setter.Value>                     <ControlTemplate>                         <Border BorderBrush="Silver" BorderThickness="3"                                 Background="DodgerBlue">                             <TextBlock Text="템플릿이 적용된 버튼"                                        HorizontalAlignment="Center"                                        VerticalAlignment="Center"></TextBlock>                         </Border>                     </ControlTemplate>                 </Setter.Value>             </Setter>         </Style>     </Grid.Resources>     <StackPanel>         <Button Width="200" Height="50" Content="버튼1"                 Style="{StaticResource myButton}"></Button>         <Button Width="200" Height="50" Content="버튼2"                 Style="{StaticResource myButton}"></Button>         <Button Width="200" Height="50" Content="버튼3"></Button>     </StackPanel> </Grid>

---

TemplateBinding
- Content가 Text일 경우에 사용합니다. Content가 Text가 아닌 다른 요소가 오는 경우 나타나지 않습니다.
   이럴땐 ContentPresenter 사용합니다.

FrmTemplateBinding.xaml

[그림 68-3] <Grid x:Name="LayoutRoot">         <Grid.Resources>         <!--스타일로 컨트롤 템플릿 구현-->         <Style x:Key="myButton" TargetType="Button">             <Setter Property="Template">                 <Setter.Value>                     <ControlTemplate TargetType="Button">                         <Border BorderBrush="Silver" BorderThickness="3"                                 Background="DodgerBlue">                             <TextBlock Text="{TemplateBinding Content}"                                        HorizontalAlignment="Center"                                        VerticalAlignment="Center"></TextBlock>                         </Border>                     </ControlTemplate>                 </Setter.Value>             </Setter>         </Style>     </Grid.Resources>     <StackPanel>         <Button Width="200" Height="50" Content="버튼1"                 Style="{StaticResource myButton}"></Button>         <Button Width="200" Height="50" Style="{StaticResource myButton}">             <Button.Content>                 <TextBlock Text="버튼2"></TextBlock>             </Button.Content>         </Button>         <Button Width="200" Height="50" Content="버튼3"                 Style="{StaticResource myButton}"></Button>     </StackPanel> </Grid>

---

ContentPresenter

FrmContentPresenter.xaml

[그림 68-4] <Grid x:Name="LayoutRoot" Background="White">     <Grid.Resources>     <!--스타일로 컨트롤 템플릿 구현-->     <Style x:Key="myButton" TargetType="Button">         <Setter Property="Template">             <Setter.Value>                 <ControlTemplate TargetType="Button">                     <Border BorderBrush="Silver" BorderThickness="3"                             Background="DodgerBlue">                             <!--ContentPresenter : 텍스트를 포함한 요소 자체를 표현-->                             <ContentPresenter></ContentPresenter>                     </Border>                 </ControlTemplate>             </Setter.Value>         </Setter>     </Style>     </Grid.Resources>     <StackPanel>         <Button Width="200" Height="50" Content="버튼1"                 Style="{StaticResource myButton}"></Button>         <Button Width="200" Height="50" Style="{StaticResource myButton}">             <Button.Content>                 <TextBlock Text="버튼2" VerticalAlignment="Center"                            HorizontalAlignment="Center"></TextBlock>             </Button.Content>         </Button>         <Button Width="200" Height="50" Content="버튼3"                 Style="{StaticResource myButton}"></Button>     </StackPanel> </Grid>

Template.zip