A control that is completely customized with a class can be called without a direct reference to the front desk of the style file.
This is a custom button task arranged for me by the leader. After I have done it, I will take it out and share it.
code directly
using System; using System.Windows; using System.Windows.Controls; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Media.Effects; using System.Windows.Media.Imaging; using System.Windows.Shapes; namespace ButtonStyle.Control { public class ImageButtonControl : ContentControl { #region public properties // main button image public Image bg_Img = new Image(); // reflection public Image re_Img = new Image(); // content public Grid content = new Grid(); // Mouse hover style----lens public Rectangle rct = new Rectangle(); // Mouse hover style----glass frame public Border bgBorder = new Border(); // Add blur effect property public BlurEffect bEffect = new BlurEffect() { Radius = 5 }; // set constants---most styles have transparent backgrounds by default public Color normalColor = Colors.Transparent; // Height and Width public static double inverteHeight; public static double inverteWeight; #endregion #region Custom Properties // image path property public string JP_Source { get { return (string)GetValue(JP_SourceProperty); } set { SetValue(JP_SourceProperty, value); } } // Using a DependencyProperty as the backing store for JP_Source. This enables animation, styling, binding, etc... // The default image address is empty public static readonly DependencyProperty JP_SourceProperty = DependencyProperty.Register("JP_Source", typeof(string), typeof(ImageButtonControl), new PropertyMetadata("", new PropertyChangedCallback(GetNewValue))); private static void GetNewValue(DependencyObject d, DependencyPropertyChangedEventArgs e) { ((ImageButtonControl)d).JP_Source = (string)e.NewValue; } #endregion #region Executed when the page loads public ImageButtonControl() { // When the control is fully loaded, assign the path to Image, so it's OK this.Loaded += ImageButtonControl_Loaded; // floating state bg_Img.MouseMove += ImageButtonControl_MouseMove; bg_Img.MouseLeave += ImageButtonControl_MouseLeave; // mouse down and up bg_Img.MouseLeftButtonDown += ImageButtonControl_MouseLeftButtonDown; bg_Img.MouseLeftButtonUp += ImageButtonControl_MouseLeftButtonUp; } void ImageButtonControl_Loaded(object sender, RoutedEventArgs e) { this.SizeChanged += ImageButtonControl_SizeChanged; } void ImageButtonControl_SizeChanged(object sender, SizeChangedEventArgs e) { // Get the length and width of the control inverteHeight = this.ActualHeight; inverteWeight = this.ActualWidth; // initialize the background initRectangle(invertHeight-3, invertWeight-3); // Receive the passed image address bg_Img.Source = new BitmapImage(new Uri(JP_Source, UriKind.RelativeOrAbsolute)); bg_Img.Height = inverteHeight - 5; bg_Img.Width = inverteWeight - 5; // Add shadow effect--- It looks like blur and shadow can only choose 1 from 2 //DropShadowEffect dsEffect = new DropShadowEffect() { //}; //bg_Img.Effect = dsEffect; //re_Img.Effect = dsEffect; // add the image to the control content.Children.Add(bg_Img); // Settings for the reflection button re_Img.Source = new BitmapImage(new Uri(JP_Source, UriKind.RelativeOrAbsolute)); re_Img.Height = inverteHeight - 5; re_Img.Width = inverteWeight - 5; content.Children.Add(re_Img); InvertedImg(re_Img, inverteHeight); bg_Img.Effect = bEffect; re_Img.Effect = bEffect; // add content to the control this.Content = content; } #endregion #region mouseover style void ImageButtonControl_MouseMove(object sender, MouseEventArgs e) { BtnOverStyle(bg_Img).Begin(); BtnOverToChange(bg_Img,true); BtnOverBg(); bEffect.Radius = 0; } public Storyboard BtnOverStyle(UIElement ui) { Storyboard sb = new Storyboard(); DoubleAnimation da = new DoubleAnimation() { // start of animation From = 0.9, // animation ends To = 0.3, Duration = TimeSpan.FromSeconds(1), // Set the animation to execute at this time RepeatBehavior = RepeatBehavior.Forever, // Set whether to return to the original path of the previous animation after the animation ends AutoReverse = true }; Storyboard.SetTarget(da, ui); Storyboard.SetTargetProperty(da, new PropertyPath("UIElement.Opacity")); sb.Children.Add(da); return sb; } // mouse enters style | leaves style private void BtnOverToChange(UIElement button,bool b) { button.Projection = new PlaneProjection() { LocalOffsetZ = b ? 50 : 0 }; } // Mouse hover Rectangle and Border styles private void BtnOverBg() { // Rectangle's lens effect GradientStop gs1 = new GradientStop(); gs1.Offset = 0.0; gs1.Color = ConvertToColor("#33FFFFFF"); GradientStop gs2 = new GradientStop(); gs2.Offset = 0.287; gs2.Color = ConvertToColor("#C0FFFFFF"); GradientStop gs3 = new GradientStop(); gs3.Offset = 0.687; gs3.Color = ConvertToColor("#4011322D"); GradientStop gs4 = new GradientStop(); gs4.Offset = 1; gs4.Color = ConvertToColor("#33FFFFFF"); LinearGradientBrush lgb = new LinearGradientBrush(); lgb.StartPoint = new Point(0.75, 1); lgb.EndPoint = new Point(0.25, 0); lgb.GradientStops.Add(gs1); lgb.GradientStops.Add(gs2); lgb.GradientStops.Add(gs3); lgb.GradientStops.Add(gs4); rct.Fill = lgb; // Frame effect of Border GradientStop bgs1 = new GradientStop(); bgs1.Offset = 0.0; bgs1.Color = ConvertToColor("#5811322D"); GradientStop bgs2 = new GradientStop(); bgs2.Offset = 0.25; bgs2.Color = ConvertToColor("#3EFFFFFF"); GradientStop bgs3 = new GradientStop(); bgs3.Offset = 0.5; bgs3.Color = ConvertToColor("#FFFFFFFF"); GradientStop bgs4 = new GradientStop(); bgs4.Offset = 0.75; bgs4.Color = ConvertToColor("#3EFFFFFF"); GradientStop bgs5 = new GradientStop(); bgs5.Offset = 1; bgs5.Color = ConvertToColor("#BFFFFFFF"); LinearGradientBrush blgb = new LinearGradientBrush(); blgb.StartPoint = new Point(0.5, 1); blgb.EndPoint = new Point(0.5, 0); blgb.GradientStops.Add(bgs1); blgb.GradientStops.Add(bgs2); blgb.GradientStops.Add(bgs3); blgb.GradientStops.Add(bgs4); blgb.GradientStops.Add(bgs5); bgBorder.BorderBrush = blgb; } // Load background Rectangle and Border private void initRectangle(double height, double width) { rct.Height = height; rct.Width = width; rct.Fill = new SolidColorBrush(Colors.Transparent); // set border width bgBorder.BorderThickness = new Thickness(3); // Initialize the border color to transparent bgBorder.BorderBrush = new SolidColorBrush(normalColor); // set the border arc bgBorder.CornerRadius = new CornerRadius(3); // Will hold the mosaic inside the Border bgBorder.Child = rct; // join the motherboard content.Children.Add(bgBorder); } #endregion #region mouseover style void ImageButtonControl_MouseLeave(object sender, MouseEventArgs e) { BtnLeaveStyle(bg_Img).Begin(); BtnOverToChange(bg_Img,false); normalBtnStyle(); } private void normalBtnStyle() { // Set the fill color of the Rectangle to transparent rct.Fill = new SolidColorBrush(normalColor); // Set the fill color of the Border to transparent bgBorder.BorderBrush = new SolidColorBrush(normalColor); // still far with a blur level of 5 bEffect.Radius = 5; } public Storyboard BtnLeaveStyle(UIElement ui) { Storyboard sb = new Storyboard(); DoubleAnimation da = new DoubleAnimation() { From = 0.9, To = 1, Duration = TimeSpan.FromSeconds(0.1), }; Storyboard.SetTarget(da, ui); Storyboard.SetTargetProperty(da, new PropertyPath("UIElement.Opacity")); sb.Children.Add(da); return sb; } #endregion #region mouse down style void ImageButtonControl_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { BtnDownStyle (bg_Img); } public void BtnDownStyle(UIElement button) { button.Projection = new PlaneProjection() { LocalOffsetZ = -100 }; } #endregion #region mouse up style void ImageButtonControl_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) { BtnNormalStyle(bg_Img); } public void BtnNormalStyle(UIElement button) { button.Projection = new PlaneProjection() { LocalOffsetZ = 50 }; } #endregion #region Reflection effect public void InvertedImg(Image img,double height) { img.Projection = new PlaneProjection() { RotationY = 0, LocalOffsetY = -(2.3 * height) }; img.RenderTransform = new ScaleTransform() { ScaleY = -0.7 }; GradientStop gs1 = new GradientStop(); gs1.Offset = 0.0; gs1.Color = Colors.Black; GradientStop gs2 = new GradientStop(); gs2.Offset = 1; gs2.Color = Colors.Transparent; LinearGradientBrush lgb = new LinearGradientBrush(); lgb.StartPoint = new Point(0.5, 1); lgb.EndPoint = new Point(0.5, 0); lgb.GradientStops.Add(gs1); lgb.GradientStops.Add(gs2); img.OpacityMask = lgb; } #endregion #region Convert hexadecimal color to Color object public static Color ConvertToColor(string colorName) { if (colorName.StartsWith("#")) colorName = colorName.Replace("#", string.Empty); int v = int.Parse(colorName, System.Globalization.NumberStyles.HexNumber); return new Color() { A = Convert.ToByte((v >> 24) & 255), R = Convert.ToByte((v >> 16) & 255), G = Convert.ToByte((v >> 8) & 255), B = Convert.ToByte((v >> 0) & 255) }; } #endregion } }
Foreground reference named controls
xmlns:IBC="clr-namespace:ButtonStyle.Control"
code snippet
<Grid x:Name="LayoutRoot" Background="Silver" HorizontalAlignment="Center" Width="1600"> <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"> <IBC:ImageButtonControl Width="45" Height="45" JP_Source="../Toop/i_previous.png"></IBC:ImageButtonControl> <IBC:ImageButtonControl Width="45" Height="45" JP_Source="../Toop/i_next.png"></IBC:ImageButtonControl> <IBC:ImageButtonControl Width="45" Height="45" JP_Source="../Toop/i_pan.png"></IBC:ImageButtonControl> <IBC:ImageButtonControl Width="45" Height="45" JP_Source="../Toop/alert.png"></IBC:ImageButtonControl> <IBC:ImageButtonControl Width="45" Height="45" JP_Source="../Toop/i_clear.png"></IBC:ImageButtonControl> <IBC:ImageButtonControl Width="45" Height="45" JP_Source="../Toop/i_feature.png"></IBC:ImageButtonControl> <IBC:ImageButtonControl Width="45" Height="45" JP_Source="../Toop/i_fullextent.png"></IBC:ImageButtonControl> <IBC:ImageButtonControl Width="45" Height="45" JP_Source="../Toop/i_layers.png"></IBC:ImageButtonControl> <IBC:ImageButtonControl Width="45" Height="45" JP_Source="../Toop/people.png"></IBC:ImageButtonControl> <IBC:ImageButtonControl Width="45" Height="45" JP_Source="../Toop/sysinfo.png"></IBC:ImageButtonControl> </StackPanel> </Grid>Effect picture: