Write an image button (XAML) by yourself ),

Write an image button (XAML) by yourself ),

Sometimes three images (normal, move the mouse up, and press the mouse) are used as the style of a button. Although this method is not good, you should create a style in vector mode, but sometimes we still need to do this.

Every time you modify the button style to implement this practice, it is both troublesome and generates a large segment of XAML code, which is not conducive to maintenance. You can extract a custom image button control, you only need to input three image paths for use. This is obviously a better practice. The following shows how to write this control, which is used in combination with VS2015 and Blend2015.

1. first, create a new WPF custom control library in VS named WpfCustomControlLibrary. The system automatically generates a CustomControl1 class and generates a Themes folder, which contains a resource dictionary file Generic. xaml. If you open the AssemblyInfo. cs file, the following code is displayed,

[Assembly: ThemeInfo (ResourceDictionaryLocation. none, // the location of the topic-specific resource dictionary // (used when a resource is found on the page, application, or any topic-specific resource dictionary //) ResourceDictionaryLocation. sourceAssembly // location of the regular resource dictionary // (used on a page, application, or any topic-specific resource dictionary // If a resource is not found)]

This Code specifies that the Generic. xaml resource dictionary in the Themes folder contains the default style of the control, which is the difference between the WPF custom control library and the General Assembly.

2. Change CustomControl1 class to ImageButton

The initial code is as follows,

    public class ImageButton : Control    {        static ImageButton()        {            DefaultStyleKeyProperty.OverrideMetadata(typeof(ImageButton), new FrameworkPropertyMetadata(typeof(ImageButton)));        }    }

<ResourceDictionary    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="clr-namespace:WpfCustomControlLibrary">    <Style TargetType="{x:Type local:ImageButton}">        <Setter Property="Template">            <Setter.Value>                <ControlTemplate TargetType="{x:Type local:ImageButton}">                    <Border Background="{TemplateBinding Background}"                            BorderBrush="{TemplateBinding BorderBrush}"                            BorderThickness="{TemplateBinding BorderThickness}">                    </Border>                </ControlTemplate>            </Setter.Value>        </Setter>    </Style></ResourceDictionary>

3. Change the base class of ImageButton to "Button.

4. Add three dependency attributes to ImageButton:

        public static readonly DependencyProperty NormalImageProperty =            DependencyProperty.RegisterAttached("NormalImage", typeof(ImageSource), typeof(ImageButton), new PropertyMetadata(null));        public ImageSource NormalImage        {            get { return (ImageSource)GetValue(NormalImageProperty); }            set { SetValue(NormalImageProperty, value); }        }        public static readonly DependencyProperty MouseOverImageProperty =            DependencyProperty.RegisterAttached("MouseOverImage", typeof(ImageSource), typeof(ImageButton), new PropertyMetadata(null));        public ImageSource MouseOverImage        {            get { return (ImageSource)GetValue(MouseOverImageProperty); }            set { SetValue(MouseOverImageProperty, value); }        }        public static readonly DependencyProperty PressedImageProperty =            DependencyProperty.RegisterAttached("PressedImage", typeof(ImageSource), typeof(ImageButton), new PropertyMetadata(null));        public ImageSource PressedImage        {            get { return (ImageSource)GetValue(PressedImageProperty); }            set { SetValue(PressedImageProperty, value); }        }

5. Create a WPF Application project to reference the custom control library and add the ImageButton control to the page. Select the ImageButton control and click [ImageButton] in the navigation bar of the art Board. In the displayed menu, select Edit template-edit copy. In the displayed dialog box, enter ImageButtonStyle, select the document, and click OK.

6. In the template editing status, right-click [Border] In the document outline panel, select change layout type-Grid, and then clear the background of the Grid. Add three Image controls to the Grid and reset the layout. You can add an asset to the asset panel. You can enter an Image in the asset panel's search bar to find the asset. Clear the Width and Height of the three images and change the Stretch attribute to None.

7. change the Source attributes of the three images from top to bottom to the template binding NormalImage, PressedImage, and MouseOverImage. Modify the method to click the small square on the right of the Source attribute in the attribute panel and select template binding-NormalImage. Change the Visibility attribute of PressedImage and MouseOverImage to Collapsed.

8. In the status panel, click MouseOver. In the document outline panel, select the first Image control. In the properties panel, change the Visibility attribute to Collapsed. Select the third Image control, that is, MouseOverImage. On the Properties panel, change the Visibility attribute to Visible.

On the Status panel, click Pressed. On the document outline panel, select the first Image control. On the Properties panel, change the Visibility attribute to Collapsed. Select the second Image control, that is, PressedImage. On the Properties panel, change the Visibility attribute to Visible.

The ImageButtonStyle code is as follows,

<Style TargetType="{x:Type local:ImageButton}">        <Setter Property="Template">            <Setter.Value>                <ControlTemplate TargetType="{x:Type local:ImageButton}">                    <Grid>                        <VisualStateManager.VisualStateGroups>                            <VisualStateGroup x:Name="CommonStates">                                <VisualState x:Name="Normal"/>                                <VisualState x:Name="MouseOver">                                    <Storyboard>                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image">                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}"/>                                        </ObjectAnimationUsingKeyFrames>                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image1">                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>                                        </ObjectAnimationUsingKeyFrames>                                    </Storyboard>                                </VisualState>                                <VisualState x:Name="Pressed">                                    <Storyboard>                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image">                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}"/>                                        </ObjectAnimationUsingKeyFrames>                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="image2">                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>                                        </ObjectAnimationUsingKeyFrames>                                    </Storyboard>                                </VisualState>                                <VisualState x:Name="Disabled"/>                            </VisualStateGroup>                        </VisualStateManager.VisualStateGroups>                        <Image x:Name="image" Source="{TemplateBinding NormalImage}" Stretch="None"/>                        <Image x:Name="image2" Source="{TemplateBinding PressedImage}" Stretch="None" Visibility="Collapsed"/>                        <Image x:Name="image1" Source="{TemplateBinding MouseOverImage}" Stretch="None" Visibility="Collapsed"/>                    </Grid>                </ControlTemplate>            </Setter.Value>        </Setter>    </Style>

9. Replace the ControlTemple part of the ImageButton Style in the Generic. xaml file in the Themes folder of the custom control library with the ControlTemple part in this Style. Note: Modify TargetType to {x: Type local: ImageButton }".

10. Now that the image button control is complete, add the ImageButton control (select project category) to the asset panel on a page of the WPF application project ). Select the ImageButton control. On the Properties panel, you can see that there are three attributes in the miscellaneous group: NormalImage, MouseOverImage, and PressedImage. You can set images separately.

11. Set these three attributes to three suitable images, which can be used by the image button.