Can somebody please extract a default template of a SurfaceCheckBox for me? I have tried using Blend 2 but failed miserably. The extracted template has some unresolved TargetName references.
I am trying to change the template so that the check mark is top aligned. It is centered vertically by default and there doesn't seem to be a direct way to change it.
[Edit] I have also tried Blend 3 which was a bit better but I am still missing "Glow" target and many references to it. This renders the template unusable unless all "Glow" references are removed. If I do that I get a working template but with no glow.
From Blend 4. Working this time, apperently you had to add a reference to Microsoft.Surface.Presentation.Generic.dll and then add
xmlns:Microsoft_Surface_Presentation_Generic="clr-namespace:Microsoft.Surface.Presentation.Generic;assembly=Microsoft.Surface.Presentation.Generic"
before you would get the Glow part when editing a style.
<!-- SimpleButtonFocusVisual is used to show keyboard focus around a SimpleButton control -->
<Style x:Key="SurfaceButtonFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<!-- nothing, we don't want to make difference whether the element has focus or not-->
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--Common Brushes -->
<SolidColorBrush x:Key="NormalForegroundBrush"
Color="#FF000000" />
<SolidColorBrush x:Key="Default_FillBrush"
Color="#33A4B4BD"/>
<LinearGradientBrush x:Key="EdgeBrush"
EndPoint="0,1"
StartPoint="0,0">
<GradientStop Color="#7FFFFFFF"
Offset="0"/>
<GradientStop Color="#0CFFFFFF"
Offset="1"/>
</LinearGradientBrush>
<!-- Disabled Brushes are used for the Disabled look of each control -->
<SolidColorBrush x:Key="DisabledRenderBrush"
Color="#0CFFFFFF"/>
<SolidColorBrush x:Key="DisabledEdgeBrush"
Color="#33FFFFFF"/>
<SolidColorBrush x:Key="DisabledBevelBorder"
Color="#33000000"/>
<SolidColorBrush x:Key="DisabledForegroundBrush"
Color="#A5333333"/>
<SolidColorBrush x:Key="ShadowBorderBrush"
Color="#33000000"/>
<LinearGradientBrush x:Key="BevelBorderBrush"
EndPoint="0,0"
StartPoint="0,1">
<GradientStop Color="#66000000"
Offset="0"/>
<GradientStop Color="#33000000"
Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="RenderBrush"
EndPoint="0,0"
StartPoint="0,1">
<GradientStop Color="#26000000"
Offset="0"/>
<GradientStop Color="#4CFFFFFF"
Offset="1"/>
</LinearGradientBrush>
<!--Color for Glow-->
<Color x:Key="GlowColor">#FFFFFFFF</Color>
<!-- ButtonBase -->
<Style x:Key="SurfaceButtonStyle"
TargetType="{x:Type ButtonBase}">
<Setter Property="SnapsToDevicePixels"
Value="True" />
<Setter Property="FocusVisualStyle"
Value="{StaticResource SurfaceButtonFocusVisual}" />
<Setter Property="FontFamily"
Value="Segoe UI" />
<Setter Property="FontSize"
Value="10" />
<Setter Property="Foreground"
Value="{StaticResource NormalForegroundBrush}" />
<Setter Property="Background"
Value="{StaticResource Default_FillBrush}" />
<Setter Property="BorderBrush"
Value="{StaticResource EdgeBrush}" />
<Setter Property="BorderThickness"
Value="1,1,1,1" />
<Setter Property="HorizontalContentAlignment"
Value="Center" />
<Setter Property="VerticalContentAlignment"
Value="Center" />
<Setter Property="Padding"
Value="15,6,15,6" />
<Setter Property="IsTabStop"
Value="False" />
<Setter Property="Focusable"
Value="False" />
<Setter Property="MinWidth"
Value="30" />
<Setter Property="MinHeight"
Value="30" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ButtonBase}">
<ControlTemplate.Resources>
<Storyboard x:Key="Press">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="Glow"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000"
Value="1" />
</DoubleAnimationUsingKeyFrames>
<ThicknessAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="Glow"
Storyboard.TargetProperty="(FrameworkElement.Margin)">
<SplineThicknessKeyFrame KeyTime="00:00:00.1000000"
Value="-3,-3,-3,-3" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Release">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="Glow"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.0000000"
Value="1" />
<SplineDoubleKeyFrame KeySpline="0.5,0.5,0.5,1"
KeyTime="00:00:00.5000000"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<ThicknessAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="Glow"
Storyboard.TargetProperty="(FrameworkElement.Margin)">
<SplineThicknessKeyFrame KeyTime="00:00:00.0000000"
Value="-3,-3,-3,-3" />
<SplineThicknessKeyFrame KeySpline="0.5,0.5,0.5,1"
KeyTime="00:00:00.5000000"
Value="1,1,1,1" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Grid x:Name="Grid"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
<Border Margin="1,1,1,0"
x:Name="Shadow"
BorderThickness="0,0,0,1"
CornerRadius="6,6,6,6"
Padding="1,1,1,1"
BorderBrush="{StaticResource ShadowBorderBrush}" />
<Rectangle x:Name="Base"
Fill="{TemplateBinding Background}"
Stroke="{StaticResource BevelBorderBrush}"
StrokeThickness="1"
RadiusX="5"
RadiusY="5"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
Margin="1,1,1,1" />
<Rectangle x:Name="RenderOverlay"
Opacity="1"
Fill="{StaticResource RenderBrush}"
Stroke="{TemplateBinding BorderBrush}"
StrokeThickness="1"
RadiusX="4"
RadiusY="4"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
Margin="2,2,2,2" />
<Microsoft_Surface_Presentation_Generic:SurfaceShadowChrome Margin="1,1,1,1"
x:Name="Glow"
Color="{StaticResource GlowColor}"
CornerRadius="4,4,4,4"
Opacity="0" />
<ContentPresenter x:Name="Content"
RenderTransformOrigin="0.5,0.5"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
<ContentPresenter.RenderTransform>
<TranslateTransform X="0"
Y="-1" />
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed"
Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Press}" />
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource Release}" />
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsEnabled"
Value="True" />
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="Fill"
Value="{StaticResource DisabledRenderBrush}"
TargetName="RenderOverlay" />
<Setter Property="Stroke"
Value="{StaticResource DisabledEdgeBrush}"
TargetName="RenderOverlay" />
<Setter Property="Stroke"
Value="{StaticResource DisabledBevelBorder}"
TargetName="Base" />
<Setter Property="BorderBrush"
Value="#00000000"
TargetName="Shadow" />
<Setter Property="Foreground"
Value="{StaticResource DisabledForegroundBrush}" />
<Setter Property="Background"
Value="#00FFFFFF" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<SolidColorBrush x:Key="DisabledBackgroundBrush"
Color="#00000000"/>
<SolidColorBrush x:Key="DisabledBorderBrush"
Color="#33000000"/>
<RadialGradientBrush x:Key="CheckBox_RenderOverlayBrush"
GradientOrigin="0.627,0.5">
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5"
CenterY="0.5"
ScaleX="-2.056"
ScaleY="-4.033"/>
<SkewTransform AngleX="0"
AngleY="0"
CenterX="0.5"
CenterY="0.5"/>
<RotateTransform Angle="90.17"
CenterX="0.5"
CenterY="0.5"/>
<TranslateTransform X="-0.016"
Y="-0.429"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#19000000"
Offset="0.205"/>
<GradientStop Color="#0CFFFFFF"
Offset="0.652"/>
</RadialGradientBrush>
<!--CheckBox Brushes-->
<LinearGradientBrush x:Key="CheckmarkIconGradientBrush"
EndPoint="0.5,0"
StartPoint="0.5,1">
<GradientStop Color="#FF292929"
Offset="0.5"/>
<GradientStop Color="#FF1B1B1B"
Offset="0.196"/>
</LinearGradientBrush>
<!-- CheckBox -->
<Style x:Key="SurfaceCheckBoxStyle1" TargetType="{x:Type my:SurfaceCheckBox}"
BasedOn="{StaticResource SurfaceButtonStyle}">
<Setter Property="HorizontalContentAlignment"
Value="Left" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="BorderBrush"
Value="Transparent" />
<Setter Property="Foreground"
Value="{StaticResource NormalForegroundBrush}" />
<Setter Property="Padding"
Value="5,0,0,0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type my:SurfaceCheckBox}">
<ControlTemplate.Resources>
<Storyboard x:Key="Press">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="Glow"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000"
Value="1" />
</DoubleAnimationUsingKeyFrames>
<ThicknessAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="Glow"
Storyboard.TargetProperty="(FrameworkElement.Margin)">
<SplineThicknessKeyFrame KeyTime="00:00:00.1000000"
Value="-3,-3,-3,-3" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Release">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="Glow"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.0000000"
Value="1" />
<SplineDoubleKeyFrame KeySpline="0.5,0.5,0.5,1"
KeyTime="00:00:00.5000000"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<ThicknessAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="Glow"
Storyboard.TargetProperty="(FrameworkElement.Margin)">
<SplineThicknessKeyFrame KeyTime="00:00:00.0000000"
Value="-3,-3,-3,-3" />
<SplineThicknessKeyFrame KeySpline="0.5,0.5,0.5,1"
KeyTime="00:00:00.5000000"
Value="1,1,1,1" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Unchecked">
<DoubleAnimation Duration="00:00:00.2000000"
Storyboard.TargetName="Checkmark"
Storyboard.TargetProperty="Opacity"
To="0" />
</Storyboard>
<Storyboard x:Key="Checked">
<DoubleAnimation Duration="00:00:00.2000000"
Storyboard.TargetName="Checkmark"
Storyboard.TargetProperty="Opacity"
To="1" />
</Storyboard>
<Storyboard x:Key="ThreeStateEnter">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="ThreeStateMark"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000"
Value="0.9" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="ThreeStateExit">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="ThreeStateMark"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.2000000"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<BulletDecorator MinHeight="30"
MinWidth="30"
Height="Auto"
Background="Transparent"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
x:Name="bulletDecorator">
<BulletDecorator.Bullet>
<Grid MinHeight="30"
MinWidth="30"
Width="30"
Height="30"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
<Rectangle x:Name="Base"
Fill="{TemplateBinding Background}"
Stroke="Transparent"
StrokeThickness="1"
RadiusX="7"
RadiusY="7"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
Margin="2,2,2,2" />
<Rectangle x:Name="Button"
Fill="{StaticResource Default_FillBrush}"
Stroke="{StaticResource BevelBorderBrush}"
StrokeThickness="1"
RadiusX="7"
RadiusY="7"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
Margin="2,2,2,2" />
<Rectangle x:Name="RenderOverlay"
Fill="{StaticResource CheckBox_RenderOverlayBrush}"
Stroke="{StaticResource EdgeBrush}"
StrokeThickness="1"
RadiusX="6"
RadiusY="6"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
Margin="3,3,3,3" />
<Microsoft_Surface_Presentation_Generic:SurfaceShadowChrome CornerRadius="6,6,6,6"
x:Name="Glow"
Color="{StaticResource GlowColor}"
Opacity="0"
Margin="-1,-1,-1,-1" />
<Path x:Name="Checkmark"
StrokeEndLineCap="Flat"
Fill="{x:Null}"
Stroke="{StaticResource CheckmarkIconGradientBrush}"
StrokeStartLineCap="Flat"
StrokeThickness="4"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Width="Auto"
Height="Auto"
Data="M4.2195036,10.149215 L9.4262573,13.556164 17.449568,5.9264725 17.449648,6.780637 9.3715682,13.987686 4.2190426,11.048134 z"
Opacity="0"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
Margin="7.96,11.023,7.999,8.187"
Stretch="Fill" />
<Rectangle x:Name="ThreeStateMark"
Opacity="0"
Fill="{StaticResource CheckmarkIconGradientBrush}"
Stroke="{StaticResource BevelBorderBrush}"
StrokeThickness="1"
RadiusX="4"
RadiusY="4"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
Margin="6,6,6,6" />
</Grid>
</BulletDecorator.Bullet>
<Grid Margin="5,0,0,0"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
<Grid Background="Transparent"
x:Name="ContentBox"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
x:Name="Content"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Grid>
</Grid>
</BulletDecorator>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource ThreeStateEnter}" />
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource ThreeStateExit}" />
</MultiTrigger.ExitActions>
<MultiTrigger.Conditions>
<Condition Property="IsThreeState"
Value="True" />
<Condition Property="IsChecked"
Value="{x:Null}" />
</MultiTrigger.Conditions>
</MultiTrigger>
<Trigger Property="IsChecked"
Value="False">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Unchecked}" />
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource Checked}" />
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsChecked"
Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Checked}" />
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource Unchecked}" />
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsPressed"
Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Press}" />
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource Release}" />
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="Fill"
TargetName="Button"
Value="{StaticResource DisabledBackgroundBrush}" />
<Setter Property="Stroke"
TargetName="Button"
Value="{StaticResource DisabledBorderBrush}" />
<Setter Property="Foreground"
Value="{StaticResource DisabledForegroundBrush}" />
<Setter Property="Fill"
TargetName="RenderOverlay"
Value="{StaticResource DisabledBackgroundBrush}" />
<Setter Property="Stroke"
TargetName="Checkmark"
Value="{StaticResource DisabledBorderBrush}" />
<Setter Property="Opacity"
TargetName="RenderOverlay"
Value="0.5" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>