Any examples of a rich visual behaviour WPF button?

Question

I am looking for an example of a customized WPF button. Ideally in a liked Blend/VS2013 configuration, i.e. a VS2013 test solution that includes a button project that can be edited in Blend for VS2013. The button should have a visual appearance that makes it clear what state it is in, i.e.

• Normal = default
• MouseOver = inner glow
• Pressed = smaller size / smaller shadow
• ToggledOn = outer glow
• Disabled = grayed out

Given such an example I could then just tweak the visual appearance of the states using Blend.

And on the application side I want to just instantiate the button, associate the style, and set properties for BackgroundColor, image/icon, text label, width, height.

I seems that using a ControlTemplate style is the recommended way of doing this, rather than sub-classing, see MSDN.

The three key issues seem to be:

• how to setup the VS2013/blend project structure to use both interchangeably on a single set of source files
• how to compute relative sizes in the ControlTemplate, i.e. what is the syntax for Width = Button.Width x 1.1 to set a glow extend relative to the actual button size that is not in the template, but to be defined on the client application UI design.
• how to compute relative colors from the base color of the button, i.e. what is the WPF XAML syntax for GradientStop Color = Button.BackgroundColor x 80% + White x 20%

This should be a very common need, but Google was not helpful in finding anything like the above.

Any help with any one of the three key issues would be greatly appreciated.

Answer 1

Your requirements do not require defining a new ControlTemplate and can be achieved with a Style with Triggers, e.g.:

<Grid>
    <Grid.Resources>
        <Style TargetType="Button">
            <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
            <Style.Triggers>
                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="RenderTransform">
                        <Setter.Value>
                            <ScaleTransform ScaleX="0.75" ScaleY="0.75"/>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Grid.Resources>
    <Button Content="Click Me!" />
</Grid>

• The Style can be accessible anywhere in the application if defined in your App.xaml Resources and given an x:Key
• Using ScaleTransform's ScaleX and ScaleY are relative values.
• You will need your own IValueConverter then bind the target color to a source color using your converter.