Styling WPF Annotations
At this point you’re probably thinking to yourself, “Annotations are super awesome and useful, but the green StickyNote theme doesn’t really fit my application”. We’ll maybe you’re not thinking that, but I’m still going to go through how you can use Styling to change the look and feel of a StickyNotes in your application. First I’ll go through some simple examples of how you can easily tweak the style, and then I’ll talk briefly about how to completely swap out and change the Style.
If you don’t like reading (or just want to get to the codeJ) you can download the StickyNote styling sample application at the end of the post.
Basics: Modifying StickyNote’s Style
Take a look at the public Properties that are exposed on the StickyNoteControl class. Using these properties you can control various aspects of the Note’s appearance and behavior using simple Setters and Triggers.
Changing Color
If you just want to change the color of the content area (e.g. the RichTextBox or InkCanvas inside the note). Then you can set the StickyNote’s Background property:
<Style x:Key="OverrideBackground" TargetType="{x:Type StickyNoteControl}">
<Setter Property="Background" Value="Yellow"/>
</Style>
Note that this will NOT change the title bar or resize handle’s appearance. For v1, if you want to change the appearance of TitleBar and other portions of the style that contains gradients then you will have to override the who style (see Advanced section below).
Changing the StickyNote’s behavior
Using public properties on the StickyNoteControl class and Triggers we can manipulate the behavior of the note. Here is an example of how we can change the note behavior so that by default notes are half their normal size, and when they are focused they are full size:
<Style
x:Key="OverrideSimpleBehavior"
TargetType="{x:Type StickyNoteControl}">
<!-- Set a default transform on the note. -->
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX=".5" ScaleY=".5"/>
</Setter.Value>
</Setter>
<!-- Add a trigger that changes the default transform when clicked in.-->
<Style.Triggers>
<Trigger Property="StickyNoteControl.IsActive" Value="True">
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="1" ScaleY="1"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
Advanced: Overriding StickyNote’s Style
While it is possible to modify a Note’s behavior by just adding some setters and triggers, if you want to do any substantial changes to the appearance you are going to have to override the full Style.
Minimum style
When overriding the StickyNote style there are some constraints on what you can do. Namely, a text StickyNote must contain a RichTextBox and an Ink note must contain an InkCanvas. Further, the RichTextBox and InkCanvas must be named PART_ContentControl. The following is an example of the minimum style for a StickyNoteControl that supports both Ink and Text modes:
<Style x:Key="MinimumStyle" TargetType="{x:Type StickyNoteControl}">
<!-- Override default style completely -->
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Width" Value="100" />
<Setter Property="Height" Value ="100" />
<Style.Triggers>
<Trigger
Property="StickyNoteControl.StickyNoteType"
Value="{x:Static StickyNoteType.Ink}">
<!-- Custom template that only contains required controls -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<InkCanvas
Name="PART_ContentControl"
Background="LightYellow" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
<Trigger
Property="StickyNoteControl.StickyNoteType"
Value="{x:Static StickyNoteType.Text}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<RichTextBox
Name="PART_ContentControl"
Background="LightYellow"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
The sky is the limit (almost)
Above I’ve given you the minimum StickyNote style, the attached project contains the FULL default StickyNote style. Using these two pieces of information and some WPF know-how you should be able to style a StickyNote to look like anything you want. Being a V1 product, there are of course some limitations to what you can do:
· Can’t change the appearance of the StickyNote anchor – sorry, you’re stuck with the green anchor highlight and brackets.
· Can’t add or modify programmatic behavior of note – there isn’t support for subclassing the StickyNote control, so you won’t be add code or modify event handler behavior.
· Can’t change the fundamental definition of a StickyNote – our styling only supports changing the appearance and behavior of the control, but at the end of the day it will still be a control that accepts either Text or Ink input.
Hope this helps to de-mystify how you could go about changing to appearance of StickyNote’s in your application. I’d be interested in any feedback people have on their experiences styling their StickyNotes and possibly seeing what cool designs people come up with.
Enjoy!