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