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.

markmnl markmnl · Accepted Answer · 2014-01-07T01:14:37

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.

Any examples of a rich visual behaviour WPF button?

1 Answers