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: