Obtener el template o la plantilla de un Control XAML – WPF


En algunos casos cuando estamos trabajando con XAML, queremos modificar la presentación de un control, como por ejemplo, modificar un Scrollbar, para personalizarlos.

El problema esta en que no podemos iniciar desde cero para crear el template o la plantilla del control, hay una solución muy sencilla, y es extraer el XAML por defecto que tienen los controles, luego ya podemos modificarlos a nuestro gusto.

La forma de hacerlo es:

– Arrastrar el control a la ventana

– Luego guardar el Template del control en un archivo xml

Para hacerlo, creamos un proyecto, agregamos un botón y un ScrollBar, nombramos el ScrollBar como scroll, en el Click del botón agregamos lo siguiente:

private void Button1_Click(object sender, RoutedEventArgs e)
{
 using (System.IO.FileStream aStream = new System.IO.FileStream("C:\\template.xml", System.IO.FileMode.Append))
 {
 System.Windows.Markup.XamlWriter.Save(scroll.Template, aStream);
 }
}

Al ejecutar la aplicación y dar clic sobre el botón, se nos va a crear un archivo xml en la raíz del disco C:, si nos dirigimos desde el explorador de Windows y abrimos el archivo xml en un explorador o una aplicación donde se pueda ver bien el xml, podemos apreciar lo siguiente:

Template ScrollBar XAML

<ControlTemplate TargetType="ScrollBar" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:s="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mwt="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">
 <Grid Background="{TemplateBinding Panel.Background}" Name="Bg" SnapsToDevicePixels="True">
 <Grid.RowDefinitions>
  <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}" />
  <RowDefinition Height="1E-05*" />
  <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}" />
 </Grid.RowDefinitions>
 <RepeatButton Command="ScrollBar.LineUpCommand" IsEnabled="{TemplateBinding UIElement.IsMouseOver}" mwt:ScrollChrome.ScrollGlyph="UpArrow">
  <RepeatButton.Style>
  <Style TargetType="RepeatButton">
   <Style.Resources>
    <ResourceDictionary />
   </Style.Resources>
   <Setter Property="FrameworkElement.OverridesDefaultStyle">
    <Setter.Value>
     <s:Boolean>True</s:Boolean>
    </Setter.Value>
   </Setter>
   <Setter Property="UIElement.Focusable">
    <Setter.Value>
     <s:Boolean>False</s:Boolean>
    </Setter.Value>
   </Setter>
   <Setter Property="KeyboardNavigation.IsTabStop">
    <Setter.Value>
     <s:Boolean>False</s:Boolean>
    </Setter.Value>
   </Setter>
   <Setter Property="Control.Template">
    <Setter.Value>
     <ControlTemplate TargetType="RepeatButton">
      <mwt:ScrollChrome RenderMouseOver="{TemplateBinding UIElement.IsMouseOver}" RenderPressed="{TemplateBinding ButtonBase.IsPressed}" Name="Chrome" SnapsToDevicePixels="True" mwt:ScrollChrome.ScrollGlyph="{TemplateBinding mwt:ScrollChrome.ScrollGlyph}" />
     </ControlTemplate>
    </Setter.Value>
   </Setter>
  </Style>
 </RepeatButton.Style>
 </RepeatButton>
 <Track IsDirectionReversed="True" Name="PART_Track" IsEnabled="{TemplateBinding UIElement.IsMouseOver}" Grid.Row="1">
  <Track.DecreaseRepeatButton>
   <RepeatButton Command="ScrollBar.PageUpCommand">
    <RepeatButton.Style>
     <Style TargetType="RepeatButton">
     <Style.Resources>
     <ResourceDictionary />
    </Style.Resources>
    <Setter Property="FrameworkElement.OverridesDefaultStyle">
     <Setter.Value>
      <s:Boolean>True</s:Boolean>
     </Setter.Value>
    </Setter>
    <Setter Property="Panel.Background">
     <Setter.Value>
      <SolidColorBrush>#00FFFFFF</SolidColorBrush>
     </Setter.Value>
    </Setter>
    <Setter Property="UIElement.Focusable">
     <Setter.Value>
      <s:Boolean>False</s:Boolean>
     </Setter.Value>
    </Setter>
    <Setter Property="KeyboardNavigation.IsTabStop">
     <Setter.Value>
      <s:Boolean>False</s:Boolean>
     </Setter.Value>
    </Setter>
    <Setter Property="Control.Template">
     <Setter.Value>
      <ControlTemplate TargetType="RepeatButton">
       <Rectangle Fill="{TemplateBinding Panel.Background}" Width="{TemplateBinding FrameworkElement.Width}" Height="{TemplateBinding FrameworkElement.Height}" />
      </ControlTemplate>
     </Setter.Value>
    </Setter>
   </Style>
  </RepeatButton.Style>
 </RepeatButton>
 </Track.DecreaseRepeatButton>
 <Track.Thumb>
  <Thumb mwt:ScrollChrome.ScrollGlyph="VerticalGripper">
   <Thumb.Style>
    <Style TargetType="Thumb">
     <Style.Resources>
     <ResourceDictionary />
    </Style.Resources>
    <Setter Property="FrameworkElement.OverridesDefaultStyle">
     <Setter.Value>
      <s:Boolean>True</s:Boolean>
     </Setter.Value>
    </Setter>
    <Setter Property="KeyboardNavigation.IsTabStop">
     <Setter.Value>
      <s:Boolean>False</s:Boolean>
     </Setter.Value>
    </Setter>
    <Setter Property="Control.Template">
     <Setter.Value>
      <ControlTemplate TargetType="Thumb">
       <mwt:ScrollChrome RenderMouseOver="{TemplateBinding UIElement.IsMouseOver}" RenderPressed="{TemplateBinding Thumb.IsDragging}" Name="Chrome" SnapsToDevicePixels="True" mwt:ScrollChrome.ScrollGlyph="{TemplateBinding mwt:ScrollChrome.ScrollGlyph}" />
      </ControlTemplate>
     </Setter.Value>
    </Setter>
   </Style>
  </Thumb.Style>
 </Thumb>
 </Track.Thumb>
 <Track.IncreaseRepeatButton>
 <RepeatButton Command="ScrollBar.PageDownCommand">
  <RepeatButton.Style>
   <Style TargetType="RepeatButton">
    <Style.Resources>
     <ResourceDictionary />
    </Style.Resources>
    <Setter Property="FrameworkElement.OverridesDefaultStyle">
     <Setter.Value>
      <s:Boolean>True</s:Boolean>
     </Setter.Value>
    </Setter>
   <Setter Property="Panel.Background">
   <Setter.Value>
    <SolidColorBrush>#00FFFFFF</SolidColorBrush>
   </Setter.Value>
  </Setter>
  <Setter Property="UIElement.Focusable">
   <Setter.Value>
    <s:Boolean>False</s:Boolean>
   </Setter.Value>
  </Setter>
  <Setter Property="KeyboardNavigation.IsTabStop">
   <Setter.Value>
    <s:Boolean>False</s:Boolean>
   </Setter.Value>
  </Setter>
  <Setter Property="Control.Template">
   <Setter.Value>
    <ControlTemplate TargetType="RepeatButton">
     <Rectangle Fill="{TemplateBinding Panel.Background}" Width="{TemplateBinding FrameworkElement.Width}" Height="{TemplateBinding FrameworkElement.Height}" />
    </ControlTemplate>
   </Setter.Value>
  </Setter>
 </Style>
 </RepeatButton.Style>
 </RepeatButton>
 </Track.IncreaseRepeatButton>
 </Track>
 <RepeatButton Command="ScrollBar.LineDownCommand" IsEnabled="{TemplateBinding UIElement.IsMouseOver}" Grid.Row="2" mwt:ScrollChrome.ScrollGlyph="DownArrow">
  <RepeatButton.Style>
   <Style TargetType="RepeatButton">
    <Style.Resources>
     <ResourceDictionary />
    </Style.Resources>
    <Setter Property="FrameworkElement.OverridesDefaultStyle">
     <Setter.Value>
      <s:Boolean>True</s:Boolean>
     </Setter.Value>
    </Setter>
    <Setter Property="UIElement.Focusable">
     <Setter.Value>
      <s:Boolean>False</s:Boolean>
     </Setter.Value>
    </Setter>
    <Setter Property="KeyboardNavigation.IsTabStop">
     <Setter.Value>
      <s:Boolean>False</s:Boolean>
     </Setter.Value>
    </Setter>
    <Setter Property="Control.Template">
     <Setter.Value>
      <ControlTemplate TargetType="RepeatButton">
       <mwt:ScrollChrome RenderMouseOver="{TemplateBinding UIElement.IsMouseOver}" RenderPressed="{TemplateBinding ButtonBase.IsPressed}" Name="Chrome" SnapsToDevicePixels="True" mwt:ScrollChrome.ScrollGlyph="{TemplateBinding mwt:ScrollChrome.ScrollGlyph}" />
     </ControlTemplate>
    </Setter.Value>
   </Setter>
  </Style>
 </RepeatButton.Style>
 </RepeatButton>
</Grid>
<ControlTemplate.Triggers>
 <Trigger Property="UIElement.IsEnabled">
  <Setter Property="Panel.Background" TargetName="Bg">
   <Setter.Value>
    <SolidColorBrush>#FFF4F4F4</SolidColorBrush>
   </Setter.Value>
  </Setter>
  <Trigger.Value>
   <s:Boolean>False</s:Boolean>
  </Trigger.Value>
 </Trigger>
 </ControlTemplate.Triggers>
</ControlTemplate>

El Template se puede obtener de cualquier control, es como hacer ingeniería inversa de la presentación de un Control existente.

Anuncios

Un pensamiento en “Obtener el template o la plantilla de un Control XAML – WPF

Deseas comentar o sugerir algo?

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s