SurfaceCheckBox default template - wpf

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>

Related

wpf xceed toolkit watermark text box make watermark display until first entry

The default behavior is the watermark disappears when the text box gets focus. I'd like to make the watermark content disappear only when the user types the first character and then reappear if the text is cleared. Anyone have a good way to accomplish this?
I've tweaked the default style for you. Now the watermark shows with the (slightly darker) default system "inactive text" color by default, and the watermark's opacity transitions to 0.4 when it receives focus but has no content. Once it has text, the watermark disappears completely. Looks pretty good, I think:
<LinearGradientBrush x:Key="TextBoxBorder" EndPoint="0,20" MappingMode="Absolute" StartPoint="0,0">
<GradientStop Color="#ABADB3" Offset="0.05" />
<GradientStop Color="#E2E3EA" Offset="0.07" />
<GradientStop Color="#E3E9EF" Offset="1" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="TextBox_MouseOver" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#5794BF" Offset="0.05" />
<GradientStop Color="#B7D5EA" Offset="0.07" />
<GradientStop Color="#C7E2F1" Offset="1" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="TextBox_Focused" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#3D7BAD" Offset="0.05" />
<GradientStop Color="#A4C9E3" Offset="0.07" />
<GradientStop Color="#B7D9ED" Offset="1" />
</LinearGradientBrush>
<SolidColorBrush x:Key="TextBox_DisabledBorder" Color="#ADB2B5" />
<SolidColorBrush x:Key="TextBox_DisabledBackground" Color="#F4F4F4" />
<DataTemplate x:Key="DefaultWatermarkTemplate">
<ContentControl Content="{Binding}" Foreground="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" Focusable="False" />
</DataTemplate>
<Style TargetType="{x:Type extToolkit:WatermarkTextBox}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" />
<Setter Property="BorderBrush" Value="{StaticResource TextBoxBorder}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Padding" Value="3" />
<Setter Property="AllowDrop" Value="true" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst" />
<Setter Property="Stylus.IsFlicksEnabled" Value="False" />
<Setter Property="WatermarkTemplate" Value="{StaticResource DefaultWatermarkTemplate}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type extToolkit:WatermarkTextBox}">
<Grid>
<Border x:Name="Border" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="1" Background="{TemplateBinding Background}" />
<Border x:Name="MouseOverVisual" Opacity="0" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{StaticResource TextBox_MouseOver}" CornerRadius="1" />
<Border x:Name="FocusVisual" Opacity="0" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{StaticResource TextBox_Focused}" CornerRadius="1" />
<ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
<ContentPresenter x:Name="PART_WatermarkHost"
Content="{TemplateBinding Watermark}"
ContentTemplate="{TemplateBinding WatermarkTemplate}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
IsHitTestVisible="False"
Margin="{TemplateBinding Padding}"
Visibility="Collapsed" />
</Grid>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Text" Value="" />
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter Property="Visibility" TargetName="PART_WatermarkHost" Value="Visible" />
</MultiTrigger.Setters>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsKeyboardFocusWithin" Value="True" />
<Condition Property="Text" Value="" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="PART_WatermarkHost" Storyboard.TargetProperty="Opacity" To=".33" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="PART_WatermarkHost" Storyboard.TargetProperty="Opacity" Duration="0:0:0.4" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
<Trigger Property="Text" Value="">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="PART_WatermarkHost" Storyboard.TargetProperty="Opacity" Duration="0:0:0.4" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="PART_WatermarkHost" Storyboard.TargetProperty="Opacity" To="0" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="MouseOverVisual" Property="Opacity" Value="1" />
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="FocusVisual" Property="Opacity" Value="1" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource TextBox_DisabledBorder}" />
<Setter TargetName="Border" Property="Background" Value="{StaticResource TextBox_DisabledBackground}" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Easiest way to apply this throughout your application is to drop that XAML into Application.Resources in your App.xaml. Feel free to tweak the colors and opacity values.

WPF: How to scroll Grid with a ScrollBar?

I know you can wrap a Grid in a ScrollViewer, and the scrolling works automatically. However, I want to make my own scrollbars around the grid. So far, I managed to sync the scrollbar with the grid when I move around the grid. However, I couldn't find properties or methods of the Grid to make it scroll when I click the scrollbar. I'm sure it's doable because SchollViewer is already doing it. Your tip is much appreciated.
UPDATE:
In fact, what I want is to create a Excel-spreadsheet like control. I created the spreadsheet using Grid layout and it seems working fine. However, I run into a problem in scrolling. Adding a ScrollViewer around the Grid will make the whole Grid scroll. However, I want to be able to freeze some rows and/or columns from scrolling. Also, using ScrollViewer, the horizontal scrollbar covers the whole bottom. But, like in Excel, I'd like to leave some space for adding some tabs. Is this possible just through restyling of the ScrollViewer?
I find a post at http://social.msdn.microsoft.com/Forums/en/wpf/thread/e495a0cb-0104-4475-8627-3b40cd617fc1 which suggests to split grid in several sub-grids to achieve freezing headers. However, it doesn't work well if you have many columns. Furthermore, this approach is not flexible enough to allow user to choose freezing area.
Styling scrollbars can be a bit tricky, but I have a style to get you started (based of Expression style), you can just remove the bits you dont need/want and change colors etc.
Scollbar style example:
<Color x:Key="MainColor">#FF595959</Color>
<Color x:Key="BlackColor">#FF000000</Color>
<Color x:Key="WhiteColor">#FFFFFFFF</Color>
<SolidColorBrush x:Key="NormalBrush" Color="{StaticResource MainColor}" />
<SolidColorBrush x:Key="NormalBorderBrush" Color="#FF393939" />
<SolidColorBrush x:Key="GlyphBrush" Color="#FFD1D1D1" />
<LinearGradientBrush x:Key="PressedBrush" EndPoint="0.5,0.971" StartPoint="0.5,0.042">
<GradientStop Color="#4C000000" Offset="0" />
<GradientStop Color="#26FFFFFF" Offset="1" />
<GradientStop Color="#4C000000" Offset="0.467" />
<GradientStop Color="#26FFFFFF" Offset="0.479" />
</LinearGradientBrush>
<Style TargetType="{x:Type RepeatButton}" BasedOn="{x:Null}">
<Setter Property="Background" Value="{DynamicResource NormalBrush}" />
<Setter Property="BorderBrush" Value="{DynamicResource NormalBorderBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<ControlTemplate.Resources>
<Storyboard x:Key="HoverOn">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.8"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="HoverOff">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0.3"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="PressedOn">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="PressedOff">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0.3"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Grid>
<Border x:Name="Border" BorderThickness="{TemplateBinding BorderThickness}" Opacity="1" />
<ContentPresenter HorizontalAlignment="Center" x:Name="ContentPresenter" VerticalAlignment="Center" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" Opacity="0.3" Height="Auto" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="true" />
<Trigger Property="IsMouseOver" Value="true">
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource HoverOff}" x:Name="HoverOff_BeginStoryboard"/>
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource HoverOn}"/>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource PressedOff}" x:Name="PressedOff_BeginStoryboard"/>
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource PressedOn}" x:Name="PressedOn_BeginStoryboard"/>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" TargetName="ContentPresenter" Value="0.1"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="NuclearThumbStyle" TargetType="{x:Type Thumb}" BasedOn="{x:Null}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<ControlTemplate.Resources>
<Storyboard x:Key="HoverOn">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="HoverRectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.8"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="HoverOff">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="HoverRectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0.3"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="PressedOn">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PressedRectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="PressedOff">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PressedRectangle" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0.3"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Grid Margin="0,0,0,0" x:Name="Grid">
<Rectangle HorizontalAlignment="Stretch" x:Name="HoverRectangle" VerticalAlignment="Stretch" Width="Auto" Height="Auto" RadiusX="3" RadiusY="4" Stroke="{x:Null}" Margin="4.5,-2,4.5,-2" Opacity="0.3" MinHeight="10">
<Rectangle.Fill>
<SolidColorBrush Color="{DynamicResource WhiteColor}" />
</Rectangle.Fill>
</Rectangle>
<Rectangle HorizontalAlignment="Stretch" x:Name="PressedRectangle" VerticalAlignment="Stretch" Width="Auto" Height="Auto" RadiusX="3" RadiusY="4" Stroke="{x:Null}" Margin="4.5,-2,4.5,-2" Opacity="0.3" MinHeight="10">
<Rectangle.Fill>
<SolidColorBrush Color="{DynamicResource WhiteColor}" />
</Rectangle.Fill>
</Rectangle>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True" />
<Trigger Property="IsMouseOver" Value="True">
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource HoverOff}" x:Name="HoverOff_BeginStoryboard"/>
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource HoverOn}"/>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsEnabled" Value="False" >
<Setter Property="Opacity" TargetName="Grid" Value="0.1"/>
</Trigger>
<Trigger Property="IsDragging" Value="True">
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource PressedOff}" x:Name="PressedOff_BeginStoryboard"/>
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource PressedOn}" x:Name="PressedOn_BeginStoryboard"/>
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="NuclearScrollRepeatButtonStyle" TargetType="{x:Type RepeatButton}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="IsTabStop" Value="false" />
<Setter Property="Focusable" Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Grid>
<Rectangle Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type ScrollBar}">
<Setter Property="Stylus.IsFlicksEnabled" Value="false" />
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid x:Name="GridRoot" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Background="{DynamicResource NormalBrush}">
<Grid.RowDefinitions>
<RowDefinition MaxHeight="18" />
<RowDefinition Height="0.00001*" />
<RowDefinition MaxHeight="18" />
</Grid.RowDefinitions>
<RepeatButton x:Name="DecreaseRepeat" Command="ScrollBar.LineUpCommand" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}">
<Grid Margin="0,0,0,0">
<Path Margin="4.742,3.997,4.946,5.327" VerticalAlignment="Stretch" Height="Auto" Fill="{DynamicResource GlyphBrush}" Stretch="Fill" Stroke="{DynamicResource GlyphBrush}" StrokeThickness="1" Data="M5.2422477,11.132184 L11.5544,11.132184 8.6412958,4.4969033 z" x:Name="DecreaseArrow" />
</Grid>
</RepeatButton>
<Track Grid.Row="1" x:Name="PART_Track" Orientation="Vertical" IsDirectionReversed="true">
<Track.Thumb>
<Thumb Style="{DynamicResource NuclearThumbStyle}" Background="{x:Null}" Foreground="{x:Null}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton x:Name="PageUp" Style="{DynamicResource NuclearScrollRepeatButtonStyle}" Command="ScrollBar.PageDownCommand" />
</Track.IncreaseRepeatButton>
<Track.DecreaseRepeatButton>
<RepeatButton x:Name="PageDown" Style="{DynamicResource NuclearScrollRepeatButtonStyle}" Command="ScrollBar.PageUpCommand" />
</Track.DecreaseRepeatButton>
</Track>
<RepeatButton Grid.Row="2" x:Name="IncreaseRepeat" Command="ScrollBar.LineDownCommand">
<Grid>
<Path Margin="4.742,3.997,4.946,5.327" x:Name="IncreaseArrow" VerticalAlignment="Stretch" Height="Auto" Fill="{DynamicResource GlyphBrush}" Stretch="Fill" Stroke="{DynamicResource GlyphBrush}" StrokeThickness="1" Data="M5.2422477,11.132184 L11.5544,11.132184 8.6412958,4.4969033 z" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1" />
<SkewTransform AngleX="0" AngleY="0" />
<RotateTransform Angle="180" />
<TranslateTransform X="0" Y="0" />
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
</RepeatButton>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="LayoutTransform" TargetName="GridRoot">
<Setter.Value>
<RotateTransform Angle="-90" />
</Setter.Value>
</Setter>
<Setter TargetName="PART_Track" Property="Orientation" Value="Vertical" />
<Setter Property="Command" Value="ScrollBar.LineLeftCommand" TargetName="DecreaseRepeat" />
<Setter Property="Command" Value="ScrollBar.LineRightCommand" TargetName="IncreaseRepeat" />
<Setter Property="Command" Value="ScrollBar.PageLeftCommand" TargetName="PageDown" />
<Setter Property="Command" Value="ScrollBar.PageRightCommand" TargetName="PageUp" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Style:

Controlling animation from code behind in WPF button?

I have the following XAML style for my button :
<Style TargetType="{x:Type Button}">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="FontFamily" Value="Calibri" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="BtnBorder" Width="{TemplateBinding ActualWidth}" Height="{TemplateBinding ActualHeight}" CornerRadius="5" VerticalAlignment="Center" BorderBrush="White" BorderThickness="0" ClipToBounds="True" HorizontalAlignment="Center">
<Grid Width="{Binding ElementName=BtnBorder, Path=ActualWidth}">
<Rectangle Name="BtnRect" RadiusX="6" RadiusY="5" Opacity="0.2" Fill="White" />
<Rectangle x:Name="progressIndicator" Width="0" HorizontalAlignment="Left" RadiusX="8" RadiusY="8" Margin="1">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="Transparent" Offset="0" />
<GradientStop Color="#88FFFFFF" Offset="0.945" />
<GradientStop Color="White" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="BtnCP" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="BtnRect" Storyboard.TargetProperty="Opacity" From="0.25" To="0.5" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="BtnRect" Storyboard.TargetProperty="Opacity" From="0.5" To="0.25" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="BtnBorder" Property="BorderThickness" Value="1.3" />
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="progressIndicator" Storyboard.TargetProperty="Width" From="0" To="300" Duration="0:0:5" AutoReverse="True" RepeatBehavior="5x" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="BtnBorder" Property="BorderThickness" Value="1.5,0,1.5,0" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsFocused" Value="True" />
<Condition Property="IsPressed" Value="True" />
</MultiTrigger.Conditions>
<Setter TargetName="BtnBorder" Property="BorderThickness" Value="1.3" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
How can i control the animation of the Rectangle property of my button through code behind upon clicking the button.
The Rectangle named "progressIndicator" is to grow in width through animation when the user clicks the button.
Currently animation starts in Xaml. Why do you want to it in code-behind?

change background color of a button template in wpf

i found the following template for a nice glass button in the internet.
as you can see it has a property setting for the button background,
<Setter TargetName="border" Property="Background" Value="#FF000000" />
but if i change this in Blend into any other value, the background of the button won`t change..
I have to change the value directly in the Setter tag which will affect all buttons in the form using this template...
How can i change the code to give different background to different buttons using this template??
<ControlTemplate x:Key="GlassButton" TargetType="{x:Type Button}">
<ControlTemplate.Resources>
<Storyboard x:Key="Timeline1">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="glow"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="Timeline2">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="glow"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Border BorderBrush="#FFFFFFFF"
BorderThickness="0"
CornerRadius="4,4,4,4">
<Border x:Name="border"
Background="#7F000000"
BorderBrush="#FF000000"
BorderThickness="1"
CornerRadius="4,4,4,4">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.507*" />
<RowDefinition Height="0.493*" />
</Grid.RowDefinitions>
<Border x:Name="glow"
Grid.RowSpan="2"
Width="Auto"
HorizontalAlignment="Stretch"
CornerRadius="4,4,4,4"
Opacity="0">
<Border.Background>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform ScaleX="1.702" ScaleY="2.243" />
<SkewTransform AngleX="0" AngleY="0" />
<RotateTransform Angle="0" />
<TranslateTransform X="-0.368" Y="-0.152" />
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Offset="0" Color="#B28DBDFF" />
<GradientStop Offset="1" Color="#008DBDFF" />
</RadialGradientBrush>
</Border.Background>
</Border>
<ContentPresenter Grid.RowSpan="2"
Width="Auto"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
<Border x:Name="shine"
Width="Auto"
Margin="0,0,0,0"
HorizontalAlignment="Stretch"
CornerRadius="4,4,0,0">
<Border.Background>
<LinearGradientBrush StartPoint="0.494,0.028" EndPoint="0.494,0.889">
<GradientStop Offset="0" Color="#99FFFFFF" />
<GradientStop Offset="1" Color="#33FFFFFF" />
</LinearGradientBrush>
</Border.Background>
</Border>
</Grid>
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="shine" Property="Opacity" Value="0.4" />
<Setter TargetName="border" Property="Background" Value="#FF000000" />
<Setter TargetName="border" Property="BorderBrush" Value="#FF000000" />
<Setter TargetName="glow" Property="Visibility" Value="Hidden" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Timeline1}" />
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard x:Name="Timeline2_BeginStoryboard" Storyboard="{StaticResource Timeline2}" />
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
You can use binding:
<Setter TargetName="border" Property="Background"
Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Background}" />
This way, you can set a background for each button individually, and the background used by the setter will be bound to the button's Background property.
<Button Background="Red" Content="First" />
<Button Background="Blue" Context="Second" />

WPF ComboBox with custom style, cannot expand DropDown after clicking inside of ComboBox

I have included the following style for ComboBox, which I happened to find as part of WPFToolkit some year ago.
It lacks one basic funcionality, that is, if I click inside the TextBox of the ComboBox, I want the dropdown menu to expand as usual. In this template the dropdown menu can only be opened by clicking the ComboBoxToggleButton directly.
I have no clue what to look for in the template style, can you please direct me somehow?
Template style:
<ControlTemplate x:Key="ComboBoxToggleButton"
TargetType="{x:Type ToggleButton}">
<ControlTemplate.Resources>
<Storyboard x:Key="HoverOn">
<DoubleAnimation Duration="00:00:00.1000000"
Storyboard.TargetName="rectangleOver"
Storyboard.TargetProperty="Opacity"
To="0.8" />
<ColorAnimation Duration="00:00:00.1000000"
Storyboard.TargetName="Background"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
To="#FFFFFFFF" />
</Storyboard>
<Storyboard x:Key="HoverOff">
<DoubleAnimation Duration="00:00:00.4000000"
Storyboard.TargetName="rectangleOver"
Storyboard.TargetProperty="Opacity"
To="0" />
<ColorAnimation Duration="00:00:00.4000000"
Storyboard.TargetName="Background"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
To="#FFffffff" />
</Storyboard>
<Storyboard x:Key="PressedOn">
<DoubleAnimation Duration="00:00:00.1000000"
Storyboard.TargetName="rectanglePress"
Storyboard.TargetProperty="Opacity"
To="0.8" />
<ColorAnimation Duration="00:00:00.1000000"
Storyboard.TargetName="Background"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
To="#FFFFFFFF" />
</Storyboard>
<Storyboard x:Key="PressedOff">
<DoubleAnimation Duration="00:00:00.4000000"
Storyboard.TargetName="rectanglePress"
Storyboard.TargetProperty="Opacity"
To="0" />
<ColorAnimation Duration="00:00:00.4000000"
Storyboard.TargetName="Background"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
To="#FFffffff" />
</Storyboard>
<Storyboard x:Key="CheckedOn">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="BackgroundChecked"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000"
Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="CheckedOff">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="BackgroundChecked"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Grid x:Name="grid">
<Rectangle x:Name="Background"
Fill="#ffffff"
Stroke="#ffc6c6c6"
RadiusX="3"
RadiusY="3"
IsHitTestVisible="false" />
<Rectangle x:Name="BackgroundChecked"
Margin="1"
IsHitTestVisible="false"
Opacity="0">
<Rectangle.Fill>
<SolidColorBrush Color="{DynamicResource WhiteColor}" />
</Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="rectangleOver"
Width="15"
Stroke="#FFE8E8E8"
HorizontalAlignment="Right"
Opacity="0"
Fill="{DynamicResource MouseOverBrush}" />
<Rectangle x:Name="rectanglePress"
Width="15"
Stroke="#FC9E9D9B"
HorizontalAlignment="Right"
Opacity="0"
Fill="{DynamicResource PressedBrush}" />
<Rectangle x:Name="DisabledVisualElement"
Margin="1"
Fill="{DynamicResource DisabledBackgroundBrush}"
IsHitTestVisible="false"
Visibility="Collapsed" />
<Path x:Name="BtnArrow"
Margin="0,0,4,0"
Width="6"
Fill="{DynamicResource GlyphBrush}"
Stretch="Uniform"
HorizontalAlignment="Right"
Data="F1 M 301.14,-189.041L 311.57,-189.041L 306.355,-182.942L 301.14,-189.041 Z " />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed"
Value="True">
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource PressedOff}"
x:Name="PressedOff_BeginStoryboard" />
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource PressedOn}"
x:Name="PressedOn_BeginStoryboard" />
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsMouseOver"
Value="true">
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource HoverOff}"
x:Name="HoverOff_BeginStoryboard" />
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource HoverOn}" />
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsChecked"
Value="true">
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource CheckedOff}"
x:Name="CheckedOff_BeginStoryboard" />
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource CheckedOn}"
x:Name="CheckedOn_BeginStoryboard" />
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="Foreground"
Value="{DynamicResource DisabledForegroundBrush}" />
<Setter Property="Visibility"
TargetName="DisabledVisualElement"
Value="Visible" />
<Setter Property="Fill"
TargetName="Background"
Value="{DynamicResource DisabledBackgroundBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="ComboBoxTextBox"
TargetType="{x:Type TextBox}">
<Border x:Name="PART_ContentHost"
Focusable="False"
Background="{TemplateBinding Background}" />
</ControlTemplate>
<Style TargetType="{x:Type ComboBox}">
<Setter Property="SnapsToDevicePixels"
Value="true" />
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
<Setter Property="VerticalContentAlignment"
Value="Center" />
<Setter Property="FontSize"
Value="13" />
<Setter Property="FontWeight"
Value="Bold" />
<Setter Property="Padding"
Value="6,2,25,2" />
<Setter Property="Margin"
Value="3" />
<Setter Property="ToolTipService.ShowOnDisabled"
Value="True" />
<Setter Property="Template"
Value="{DynamicResource ComboBoxTemplate}" />
<Setter Property="Validation.ErrorTemplate"
Value="{StaticResource SablonaChybovehoHlaseni}" />
</Style>
<ControlTemplate x:Key="ComboBoxTemplate"
TargetType="{x:Type ComboBox}">
<ControlTemplate.Resources>
<Storyboard x:Key="FocusedOn">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="FocusVisualElement"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.1000000"
Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="FocusedOff">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="FocusVisualElement"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00.3000000"
Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Grid>
<ToggleButton Grid.Column="2"
Template="{DynamicResource ComboBoxToggleButton}"
x:Name="ToggleButton"
Focusable="false"
IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press" />
<ContentPresenter HorizontalAlignment="Stretch"
Margin="3,3,23,3"
x:Name="ContentSite"
VerticalAlignment="Top"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
IsHitTestVisible="True">
<ContentPresenter.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"
TextWrapping="Wrap" />
</DataTemplate>
</ContentPresenter.ContentTemplate>
</ContentPresenter>
<!--Textbox for ComboBox-->
<!--Set transparent background of TextBox-->
<TextBox Visibility="Hidden"
Template="{DynamicResource ComboBoxTextBox}"
HorizontalAlignment="Stretch"
Margin="3,3,23,3"
x:Name="PART_EditableTextBox"
Style="{x:Null}"
VerticalAlignment="Top"
Focusable="True"
Background="Transparent"
TextWrapping="Wrap"
IsReadOnly="{TemplateBinding IsReadOnly}" />
<Rectangle x:Name="DisabledVisualElement"
Fill="{DynamicResource DisabledBackgroundBrush}"
Stroke="{DynamicResource DisabledBorderBrush}"
RadiusX="3"
RadiusY="3"
IsHitTestVisible="false"
Opacity="0" />
<Rectangle x:Name="FocusVisualElement"
Margin="-1"
RadiusX="3"
RadiusY="3"
Stroke="{DynamicResource FocusBrush}"
StrokeThickness="1"
IsHitTestVisible="false"
Opacity="0" />
<Popup IsOpen="{TemplateBinding IsDropDownOpen}"
Placement="Bottom"
x:Name="Popup"
Focusable="False"
AllowsTransparency="True"
PopupAnimation="Slide"
Margin="0,1,0,0">
<Grid MaxHeight="{TemplateBinding MaxDropDownHeight}"
MinWidth="{TemplateBinding ActualWidth}"
x:Name="DropDown"
SnapsToDevicePixels="True">
<Border x:Name="DropDownBorder"
Margin="0,-1,0,0"
BorderBrush="{DynamicResource ControlBorderBrush}"
BorderThickness="1"
CornerRadius="0,0,3,3"
Background="{DynamicResource WhiteColorBrush}">
<!--ControlBackgroundBrush-->
<ScrollViewer Margin="4,6,4,6"
SnapsToDevicePixels="True"
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto"
CanContentScroll="True">
<StackPanel IsItemsHost="True"
KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Border>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused"
Value="True">
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource FocusedOff}"
x:Name="FocusedOff_BeginStoryboard" />
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource FocusedOn}" />
</Trigger.EnterActions>
<Setter Property="CornerRadius"
TargetName="DropDownBorder"
Value="3" />
</Trigger>
<Trigger Property="HasItems"
Value="false">
<Setter Property="MinHeight"
Value="95"
TargetName="DropDownBorder" />
</Trigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter Property="Foreground"
Value="{DynamicResource DisabledForegroundBrush}" />
<Setter Property="Opacity"
TargetName="DisabledVisualElement"
Value="1" />
</Trigger>
<Trigger Property="IsGrouping"
Value="true">
<Setter Property="ScrollViewer.CanContentScroll"
Value="false" />
</Trigger>
<Trigger Property="AllowsTransparency"
SourceName="Popup"
Value="true">
<Setter Property="CornerRadius"
Value="4"
TargetName="DropDownBorder" />
<Setter Property="Margin"
Value="0,2,0,0"
TargetName="DropDownBorder" />
</Trigger>
<Trigger Property="IsEditable"
Value="true">
<Setter Property="IsTabStop"
Value="false" />
<Setter Property="Visibility"
Value="Visible"
TargetName="PART_EditableTextBox" />
<Setter Property="Visibility"
Value="Hidden"
TargetName="ContentSite" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
There are two use cases for the ComboBox. The first is when IsEditable is false. In this case, the user is restricted to selecting a predefined item. The second is when IsEditable is true, and this case allows the user to enter text as well as select a predefined item.
With the default Aero style, clicking in the "text" area (i.e. when IsEditable is true) does not bring up the drop-down. Clicking focuses/select the text instead. The other styles will open the drop-down though.
To accomplish this there is a transparent ToggleButton placed on top of the other control, which toggles the drop-down visibility. Something like:
<Grid Grid.IsSharedSizeScope="true">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"
SharedSizeGroup="ComboBoxButton"/>
</Grid.ColumnDefinitions>
<TextBox x:Name="PART_EditableTextBox"
Grid.Column="1"
Style="{StaticResource ComboBoxEditableTextBox}"
IsReadOnly="{Binding Path=IsReadOnly,RelativeSource={RelativeSource TemplatedParent}}"
Margin="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
<ToggleButton Background="{x:Null}"
Grid.ColumnSpan="3"
Style="{StaticResource ComboBoxTransparentButtonStyle}"
IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"/>
</Grid>
This was pull from the default Style for Luna, which you can get from here (or download directly from here).

Resources