Button Example


Originally, I only supported "buttons" that were created leveraging Border. I called these "Flat Buttons". These only support custom colors for 2 phases:
(1) Normal
(2) OnMouseOver

However, I recently added support now for customizing the colors of regular Buttons as well, if you desire custom color support for 3 phases:
(1) Normal
(2) OnMouseOver
(3) OnPressed

This is done via the new ApplyButtonStrategy method. Here I show an example (the 1st from the pic above) which supports 4-Stop Linear Gradient Brushes (displayed and blended from top-to-bottom) and a Border Color (so 5 colors per Phase):

Button btn = new Button();
btn.Initialize(130D, 40D, ContainerType.HorizontalPanel);
btn.ApplyButtonStrategy("Purple", "GhostWhite", "White", "Brown", "Gray", "Red", "GhostWhite", "White", "Purple", "Black",  "Orange","GhostWhite", "White", "Gray", "Gold", new Thickness(0, 0, 0, 0), System.Windows.VerticalAlignment.Center, HorizontalAlignment.Center);

//Subscribe to the Click (PreviewMouseDown) Event later on, in the BeginComposite....EndComposite Chain
     .AddExisting<Button, ToolBar>(0, 0, btn)
     .SubscribeEventOnChild<Button, ToolBar>(0, 0, "PreviewMouseDown", new MouseButtonEventHandler((o, ev) => {
               //Do something on button click . . .
            . . . . . . . . .
    .EndComposite<ToolBar, ToolBarArgs>(null);

Next, here is an example (the 2nd from the pic above) which supports Solid Color Brushes (one brush for Background and one for Border, per each of the three Phases):

Button btn = new Button();
btn.Initialize(130D, 40D, ContainerType.ContentControlPanel, "White", "Gray", "Khaki", "Black", "Orange", "Gold", new Thickness(0), System.Windows.VerticalAlignment.Center, System.Windows.HorizontalAlignment.Center);
//Adding the button and Event Subscription are the same as above for the linear gradient brush example, thus I have omitted it here.

Lastly, you can still leverage Flat Button. It supports Background Color and MouseOverColor, as well as Foreground Color and MouseOver Foreground Color. Moreover, it provides built-in support for adding the OnClick action. Here is an example that still uses the original Flat Button:

            . . . . . . . . .
                .AddFlatButton<ToolBar>(0, 2, 150D, 30D, "Change Expander", Brushes.Black, new Thickness(1), Brushes.Snow, new CornerRadius(3D), new Thickness(1), new Thickness(1), Brushes.Red, (o, args) =>
                    //Do something on button click . . .

            . . . . . . . . .
                .EndComposite<Expander, ExpanderArgs>(null);

Also, check out the Hello World demo for a button example leveraging the Syncfusion Metro Studio 2 copyright free icons (Source: http://www.syncfusion.com/).

These icons may provide a Flat-Design-Style Image Button. These "images" are vector graphics defined by a geometry path. The buttons themselves are actually Grids which may be created via the CreateFlatGeometryButton method. You simply pass in a Geometry Path sourced from Syncfusion's Metro Studio tool (where you may reference the XAML for the icon to get the Geometry Path Data.)

If you aren't using vector graphics, you may also add just a regular image (.jpg or .png) to a plain 3-phase Button like so, if desired:
Button btn = new Button();
btn.Initialize(40D, 50D, ContainerType.HorizontalPanel);
btn.Padding = new Thickness(0);
btn.ApplyButtonStrategy("White", "Gray", "Khaki", "Black", "Orange", "Gold", new Thickness(0, 0, 0, 0), System.Windows.VerticalAlignment.Center, HorizontalAlignment.Center);
        .AddImage<Button>(0, 0, @"pack://siteoforigin:,,,/Images/3.png", UriKind.Absolute, 30D)
        .EndComposite<Button, ButtonArgs>(null);
Such images may even be "clipped" to a geometry shape using SetImageClip. For instance, if your image was a square, you could clip it into the shape of a circle like cutting a circle out of the square.

Last edited May 25, 2014 at 9:10 PM by stagathome0069, version 28


No comments yet.