Develop Reference

Custom User Control Button Backgroundcolor changes on ShowDialog

I am writing a custom user control library in .NET 4.5.2 with WPF.
My custom Button behaves very strange and I am really desperate by now. First of all, here's the project GitHub
The Problem
Here is the MainWindow of a test-project with the custom Button
Click-Event Code
Window1 win1 = new Window1();
win1.ShowDialog();
XAML-Code
<Grid>
<Cosmos:CButton x:Name="B1"
C_BackgroundTheme="HKS41"
HorizontalAlignment="Left"
Margin="62,80,0,0"
VerticalAlignment="Top"
Width="117"
Content="ShowDialog"
Click="CButton_Click"/>
</Grid>
Nothing too special. Now I click the Button and the second Window opens as usually.
XAML-Code
<Grid>
<Cosmos:CButton C_BackgroundTheme="Red" HorizontalAlignment="Left" Margin="83,100,0,0" VerticalAlignment="Top" Width="75" Content="Test 2"/>
<Cosmos:CButton C_BackgroundTheme="HKS44" HorizontalAlignment="Left" Margin="83,63,0,0" VerticalAlignment="Top" Width="75" Content="Test"/>
</Grid>
The Button from which the ShowDialog goes out, changes its Backgroundcolor to the one of the last button in the XAML code. In this case the lighter blue (HSK44), not the red.
Code
This is the CS-Code of the Custom Button:
public class CButton : Button
{
public static readonly DependencyProperty BackgroundThemeProperty = DependencyProperty.Register("C_BackgroundTheme", typeof(Theme), typeof(CButton), new PropertyMetadata(new PropertyChangedCallback(BackgroundValueChanged)));
public static readonly DependencyProperty ForegroundThemeProperty = DependencyProperty.Register("C_ForegroundTheme", typeof(Theme), typeof(CButton), new PropertyMetadata(new PropertyChangedCallback(ForegroundValueChanged)));
public static bool Backgroundchanged = false;
private static string backcolor;
private static string Backcolor
{
get { return backcolor; }
set
{
backcolor = value;
Backgroundchanged = true;
}
}
static CButton()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(CButton), new FrameworkPropertyMetadata(typeof(CButton)));
}
public Theme C_BackgroundTheme
{
get
{
return (Theme)GetValue(BackgroundThemeProperty);
}
set
{
SetValue(BackgroundThemeProperty, value);
}
}
public Theme C_ForegroundTheme
{
get
{
return (Theme)GetValue(ForegroundThemeProperty);
}
set
{
SetValue(ForegroundThemeProperty, value);
}
}
private static void BackgroundValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var control = (CButton)d;
Backcolor = GetColorString((Theme)e.NewValue);
control.Background = (SolidColorBrush)(new BrushConverter().ConvertFrom(Backcolor));
control.OpacityMask = (SolidColorBrush)(new BrushConverter().ConvertFrom(ChangeColorBrightness((Color)ColorConverter.ConvertFromString(Backcolor), (float)-0.3).ToString()));
}
private static void ForegroundValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var control = (CButton)d;
control.Foreground = GetColorBrush((Theme)e.NewValue);
}
public static Color ChangeColorBrightness(Color color, float correctionFactor)
{
float red = (float)color.R;
float green = (float)color.G;
float blue = (float)color.B;
if (correctionFactor < 0)
{
correctionFactor = 1 + correctionFactor;
red *= correctionFactor;
green *= correctionFactor;
blue *= correctionFactor;
}
else
{
red = (255 - red) * correctionFactor + red;
green = (255 - green) * correctionFactor + green;
blue = (255 - blue) * correctionFactor + blue;
}
return Color.FromArgb(color.A, (byte)red, (byte)green, (byte)blue);
}
protected override void OnMouseEnter(MouseEventArgs e)
{
Backcolor = this.Background.ToString();
ColorAnimation colorChangeAnimation = new ColorAnimation
{
To = ChangeColorBrightness((Color)ColorConverter.ConvertFromString(Backcolor), (float)0.15),
Duration = new Duration(new TimeSpan(0, 0, 0, 0, 100))
};
PropertyPath colorTargetPath = new PropertyPath("(Background).(SolidColorBrush.Color)");
Storyboard CellBackgroundChangeStory = new Storyboard();
Storyboard.SetTarget(colorChangeAnimation, this);
Storyboard.SetTargetProperty(colorChangeAnimation, colorTargetPath);
CellBackgroundChangeStory.Children.Add(colorChangeAnimation);
CellBackgroundChangeStory.Begin();
}
protected override void OnMouseLeave(MouseEventArgs e)
{
ColorAnimation colorChangeAnimation = new ColorAnimation
{
To = (Color)ColorConverter.ConvertFromString(Backcolor),
Duration = new Duration(new TimeSpan(0, 0, 0, 0, 100))
};
PropertyPath colorTargetPath = new PropertyPath("(Background).(SolidColorBrush.Color)");
Storyboard CellBackgroundChangeStory = new Storyboard();
Storyboard.SetTarget(colorChangeAnimation, this);
Storyboard.SetTargetProperty(colorChangeAnimation, colorTargetPath);
CellBackgroundChangeStory.Children.Add(colorChangeAnimation);
CellBackgroundChangeStory.Begin();
}
protected override void OnClick()
{
Thread.Sleep(10);
base.OnClick();
}
}
And here is the ResourceDictionary
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Cosmos">
<Style TargetType="{x:Type local:CButton}">
<Setter Property="FontFamily" Value="/Cosmos;component/Fonts/#Circular Std Medium"/>
<Setter Property="Content" Value="CButton"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Foreground" Value="#FFEEEEEE"/>
<Setter Property="Background" Value="#FF111111"/>
<Setter Property="Height" Value="32"/>
<Setter Property="Width" Value="120"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Border Name="outerborder"
BorderThickness="0,0,0,3"
BorderBrush="{TemplateBinding OpacityMask}"
CornerRadius="2"
Height="{TemplateBinding Height}">
<Border Name="outerbordertop"
BorderThickness="0,0,0,0"
BorderBrush="Transparent"
CornerRadius="2"
Height="{TemplateBinding Height}">
<Border Name="border"
BorderThickness="0,0,0,0"
CornerRadius="2"
Background="{TemplateBinding Background}"
VerticalAlignment="Stretch">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,1,0,0"/>
</Border>
</Border>
</Border>
<Rectangle Fill="{TemplateBinding OpacityMask}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,3,0,0"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="true">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Duration="0:0:0.07" FillBehavior="HoldEnd" Storyboard.TargetName="outerborder" Storyboard.TargetProperty="BorderThickness" To="0,0,0,0" />
<ThicknessAnimation Duration="0:0:0.07" FillBehavior="HoldEnd" Storyboard.TargetName="outerbordertop" Storyboard.TargetProperty="BorderThickness" To="0,3,0,0" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Duration="0:0:0.07" FillBehavior="HoldEnd" Storyboard.TargetName="outerborder" Storyboard.TargetProperty="BorderThickness" To="0,0,0,3" />
<ThicknessAnimation Duration="0:0:0.07" FillBehavior="HoldEnd" Storyboard.TargetName="outerbordertop" Storyboard.TargetProperty="BorderThickness" To="0,0,0,0" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Why does the Button behave like this? I am also happy about any tips related to the Code.

Constructing wpf in-code for Transform Group based on the xaml code

I am having problem in constructing the in-code program based on the given xaml code. Especially for the Transform Group part and the Trigger part.
<Window x:Class="newStackOverflow.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:newStackOverflow"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Storyboard x:Key="Storyboard1">
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"
Storyboard.TargetName="rectangle">
<EasingDoubleKeyFrame KeyTime="0:0:10" Value="300"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Canvas x:Name="canvas" VerticalAlignment="Stretch" Background="Green">
<Rectangle x:Name="rectangle"
Fill="#FFF4F4F5" Stroke="Black"
Height="100" Width="100"
Canvas.Left="10" Canvas.Top="10"
RenderTransformOrigin="0.5,0.5">
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1"/>
<TranslateTransform X="50" Y="20"/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
<Button Content="Button"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Padding="10 5" Margin="10" Grid.Row="1">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>
Can you give any ideas in developing the in-code part?Thanks in advance!:D

these are my codes. When i tried the codes, it say that the s.Begin(rectangle) exception user unhandled.
public partial class MainWindow : Window
{
private Storyboard s;
public MainWindow()
{
InitializeComponent();
Button button = new Button();
button.Height = 28;
button.Width = 58;
button.HorizontalAlignment = HorizontalAlignment.Center;
button.VerticalAlignment = VerticalAlignment.Center;
button.Content = "Button";
button.Name = "button";
this.RegisterName(button.Name, button);
Rectangle rectangle = new Rectangle();
rectangle.Width = 100;
rectangle.Height = 100;
rectangle.Fill = new SolidColorBrush(Colors.White);
rectangle.Stroke = new SolidColorBrush(Colors.Black);
Canvas.SetLeft(rectangle, 10);
Canvas.SetTop(rectangle,10);
canvas1.Children.Add(rectangle);
rectangle.Name = "rectangle";
TranslateTransform tt = new TranslateTransform();
ScaleTransform st = new ScaleTransform();
TransformGroup tg = new TransformGroup();
tg.Children.Add(tt);
tg.Children.Add(st);
button.RenderTransform = tg;
Duration duration = new Duration(TimeSpan.FromMilliseconds(10));
DoubleAnimationUsingKeyFrames myDoubleAnim = new DoubleAnimationUsingKeyFrames();
EasingDoubleKeyFrame myDoubleKey = new EasingDoubleKeyFrame();
Storyboard s = new Storyboard();
Storyboard.SetTargetName(myDoubleAnim, button.Name);
Storyboard.SetTargetProperty(myDoubleAnim, new PropertyPath("RenderTransform.Children[3].Y"));
myDoubleKey.KeyTime = KeyTime.FromPercent(1);
myDoubleKey.Value = 300;
myDoubleAnim.KeyFrames.Add(myDoubleKey);
s.Children.Add(myDoubleAnim);
s.Begin(rectangle);
//button.Loaded += new RoutedEventHandler(buttonLoaded);
}

WPF Custom LED Checkbox

I currently trying to "port" some control from WindowsForms to WPF.
I Have this stylish led checkbox and try to achieve the same visual appearance in wpf. but I'm unable to get it done.
I've searched a lot butt cannot find a solution to my questions/problems.
This is how the winforms Control looks like
The colored Circle size depends on the size of the control.
The color is user definable. The color is used for the circle and the Text.
It's bright if it ich checked and dimmed / gray when it's unchecked.
The diark and highlight colors are calculated from the control color (lighter/darker).
All my tries to do the same in wpf pretty much failed up to now. :-(
I fist tried to do it with an usercontrol, but decided it would be easier to have it derived from checkbox with just an extra option to set the color.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:test="clr-namespace:LedTest"
xmlns:uc="clr-namespace:WPFTest;assembly=LedControl"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Class="LedTest.MainWindow"
Title="MainWindow" Height="285" Width="566">
<Window.Resources>
<ResourceDictionary x:Key="ResDict2" Source="Dictionary2.xaml"/>
</Window.Resources>
<Grid Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="27" />
<RowDefinition Height="75"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="179*"/>
</Grid.ColumnDefinitions>
<uc:LedControl x:Name="led1"
Color="ForestGreen" Text="Some Option"
Grid.Column="1" Grid.Row="1" Height="39" VerticalAlignment="Bottom" Margin="0,0,0,36"/>
<CheckBox Content="Some Option" Style="{DynamicResource TestStyle}" Margin="0,0,31,0" Grid.Column="1"/>
</Grid>
</Window>
This is my LedControl code:
<UserControl x:Class="LedControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="100" d:DesignWidth="300">
<UserControl.Resources>
</UserControl.Resources>
<StackPanel x:Name="gridBigLed" Orientation="Horizontal" >
<Border x:Name="border1"
BorderThickness="1"
Width="{Binding ActualHeight, ElementName=gridBigLed, Mode=OneWay}"
CornerRadius="{Binding ActualWidth, ElementName=gridBigLed, Mode=OneWay}"
HorizontalAlignment="Left">
<Border.Background>
<RadialGradientBrush GradientOrigin="0.2,0.2">
<GradientStop Color="#FFFFAAAA"/>
<GradientStop x:Name="backgroundColor" Color="Red" Offset="1.2"/>
</RadialGradientBrush>
</Border.Background>
<Border.BorderBrush>
<RadialGradientBrush>
<GradientStop x:Name="GradientColorLow" Color="#FF660000" Offset="0.383"/>
<GradientStop x:Name="GradientColorHigh" Color="#330000" Offset="0.5"/>
</RadialGradientBrush>
</Border.BorderBrush>
</Border>
<Label Content="{Binding Text}" x:Name="LEDText" Foreground="Red" HorizontalContentAlignment="Left" VerticalContentAlignment="Center"/>
</StackPanel>
</UserControl>
and the code behind:
public partial class LedControl : UserControl
{
#region Dependency properties
/// <summary>Dependency property to Get/Set the current IsActive (True/False)</summary>
public static readonly DependencyProperty IsCheckedProperty =
DependencyProperty.Register("IsChecked", typeof(bool?), typeof(LedControl),
new PropertyMetadata(null, new PropertyChangedCallback(LedControl.IsCheckedPropertyChanced)));
/// <summary>Dependency property to Get/Set Color when IsActive is true</summary>
public static readonly DependencyProperty ColorProperty =
DependencyProperty.Register("Color", typeof(Color), typeof(LedControl),
new PropertyMetadata(Colors.Green, new PropertyChangedCallback(LedControl.OnColorPropertyChanged)));
public static readonly DependencyProperty TextProperty =
DependencyProperty.Register("Text", typeof(string), typeof(LedControl),
new PropertyMetadata("ButtonText", new PropertyChangedCallback(LedControl.OnTextPropertyChanged)));
#endregion
#region Properties
/// <summary>Gets/Sets Text Value</summary>
public string Text { get { return (string)GetValue(TextProperty); } set { SetValue(TextProperty, value); } }
/// <summary>Gets/Sets Value</summary>
public bool? IsChecked { get { return (bool?)GetValue(IsCheckedProperty); } set { SetValue(IsCheckedProperty, value); } }
/// <summary>Gets/Sets Color</summary>
public Color Color { get { return (Color)GetValue(ColorProperty); } set { SetValue(ColorProperty, value); } }
#endregion
#region Constructor
public LedControl()
{
InitializeComponent();
if (this.IsChecked == true)
{
this.LEDColor.Color = this.Color;
this.LEDText.Foreground = new SolidColorBrush(this.Color);
}
else if (this.IsChecked == false)
{
this.LEDColor.Color = Colors.Gray;
this.LEDText.Foreground = new SolidColorBrush(Colors.Gray);
}
}
#endregion
#region Callbacks
private static void IsCheckedPropertyChanced(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
LedControl led = (LedControl)d;
if (led.IsChecked == true)
{
led.LEDColor.Color = led.Color;
led.LEDText.Foreground = new SolidColorBrush(led.Color);
}
else
{
led.LEDColor.Color = Colors.Gray; // TODO calculate dark/gray color
led.LEDText.Foreground = new SolidColorBrush(Colors.Gray);
}
}
private static void OnColorPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
LedControl led = (LedControl)d;
led.Color = (Color)e.NewValue;
if (led.IsChecked == true)
{
led.LEDColor.Color = led.Color;
led.LEDText.Foreground = new SolidColorBrush( led.Color );
}
}
private static void OnTextPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
LedControl led = (LedControl)d;
led.Text = (String)e.NewValue;
}
#endregion
}
The thing is that the control does not work. I set the Color to forrestGreen, but shows up red in designer and if I execute the program:
The text "Some Option" is not shown as well..
I haven't figured out how to have the gradient colors to be darker and lighter versions of the color I want.
The look of the led is also not as cool as in winforms,
but I have no clue to translate the code to wpf.
here is the part of the code that draws the led in win-Forms:
private void drawControl(Graphics g, bool on) {
// Is the bulb on or off
Color lightColor = (on) ? this.Color : Color.FromArgb(100, this.Color);
Color darkColor = (on) ? this.DarkColor : Color.Gray/*this.DarkDarkColor*/;
// Calculate the dimensions of the bulb
int width = this.Width - (this.Padding.Left + this.Padding.Right);
int height = this.Height - (this.Padding.Top + this.Padding.Bottom);
// Diameter is the lesser of width and height
int diameter = Math.Min(width, height);
// Subtract 1 pixel so ellipse doesn't get cut off
diameter = Math.Max(diameter - 1, 1);
SolidBrush br = new SolidBrush(BackColor);
g.FillRectangle(br, ClientRectangle);
// Draw the background ellipse
var rectangle = new Rectangle(this.Padding.Left, this.Padding.Top, diameter, diameter);
g.FillEllipse(new SolidBrush(darkColor), rectangle);
// Draw the glow gradient
var path = new GraphicsPath();
path.AddEllipse(rectangle);
var pathBrush = new PathGradientBrush(path);
pathBrush.CenterColor = lightColor;
pathBrush.SurroundColors = new Color[] { Color.FromArgb(0, lightColor) };
g.FillEllipse(pathBrush, rectangle);
// Draw the white reflection gradient
var offset = Convert.ToInt32(diameter * .15F);
var diameter1 = Convert.ToInt32(rectangle.Width * .8F);
var whiteRect = new Rectangle(rectangle.X - offset, rectangle.Y - offset, diameter1, diameter1);
var path1 = new GraphicsPath();
path1.AddEllipse(whiteRect);
var pathBrush1 = new PathGradientBrush(path);
pathBrush1.CenterColor = _reflectionColor;
pathBrush1.SurroundColors = _surroundColor;
g.FillEllipse(pathBrush1, whiteRect);
// Draw the border
g.SetClip(this.ClientRectangle);
if (this.On)
g.DrawEllipse(new Pen(Color.FromArgb(85, Color.Black),1F), rectangle);
if (this.Text != string.Empty)
{
RectangleF textArea = this.ClientRectangle;
textArea.X += rectangle.Width + 6;
textArea.Width -= (diameter + 6);
Font fon = new Font(Font.FontFamily, Font.Size-1, FontStyle.Bold);
StringFormat sf = new StringFormat();
sf.Alignment = StringAlignment.Near;
sf.LineAlignment = StringAlignment.Center;
if (!this.On)
g.DrawString(this.Text, fon, new SolidBrush(Color.Gray), textArea, sf);
else
g.DrawString(this.Text, fon, new SolidBrush(darkColor), textArea, sf);
}
}
My second try with the checkbox as base is nore or less useless, but perhaps someone is keen and can substitute the checkbox with the led.
Any help is appreciated!

here is a LedControl derived from CheckBox. LedControl itself adds OnColor and OffColor properties.
public class LedControl : CheckBox
{
static LedControl()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(LedControl), new FrameworkPropertyMetadata(typeof(LedControl)));
}
public static readonly DependencyProperty OnColorProperty =
DependencyProperty.Register("OnColor", typeof(Brush), typeof(LedControl), new PropertyMetadata(Brushes.Green));
public Brush OnColor
{
get { return (Brush)GetValue(OnColorProperty); }
set { SetValue(OnColorProperty, value); }
}
public static readonly DependencyProperty OffColorProperty =
DependencyProperty.Register("OffColor", typeof(Brush), typeof(LedControl), new PropertyMetadata(Brushes.Red));
public Brush OffColor
{
get { return (Brush)GetValue(OffColorProperty); }
set { SetValue(OffColorProperty, value); }
}
}
and visual appearance is customized via Style and Template. Main template parts are LedBorder ellipse, white CenterGlow ellipse, white CornerLight shape and of course ContentPresent. LedBorder adapts to LedControl height. Depending on IsChecked LedBorder is colored with OnColor or OffColor (as well as Foreground). Disabled control is grayed.
<Style TargetType="local:LedControl">
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:LedControl">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid Background="Transparent" Name="grd"
Margin="{TemplateBinding Padding}"
VerticalAlignment="Stretch"
Width="{Binding Path=ActualHeight, Mode=OneWay, RelativeSource={RelativeSource Self}}">
<Ellipse x:Name="LedBorder"
Fill="{TemplateBinding Background}"
Stroke="{TemplateBinding BorderBrush}"
StrokeThickness="2"
Stretch="Uniform"/>
<Ellipse x:Name="CenterGlow" Stretch="Uniform">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="White" Offset="-0.25"/>
<GradientStop Color="Transparent" Offset="0.91"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name="CornerLight" Stretch="Uniform" Margin="2">
<Ellipse.Fill>
<RadialGradientBrush Center="0.15 0.15" RadiusX="0.5" RadiusY="0.5">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="Transparent" Offset="1"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Grid>
<ContentPresenter x:Name="content" Grid.Column="1" Margin="4,0,0,0"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
RecognizesAccessKey="True"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="true">
<Setter TargetName="LedBorder" Property="Fill" Value="{Binding Path=OnColor, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter TargetName="content" Property="TextElement.Foreground" Value="{Binding Path=OnColor, RelativeSource={RelativeSource TemplatedParent}}"/>
</Trigger>
<Trigger Property="IsChecked" Value="false">
<Setter TargetName="LedBorder" Property="Fill" Value="{Binding Path=OffColor, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter TargetName="content" Property="TextElement.Foreground" Value="{Binding Path=OffColor, RelativeSource={RelativeSource TemplatedParent}}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="CenterGlow" Property="Fill">
<Setter.Value>
<RadialGradientBrush Opacity="1">
<GradientStop Color="Transparent" Offset="-0.5" />
<GradientStop Color="#888" Offset="1" />
</RadialGradientBrush>
</Setter.Value>
</Setter>
<Setter TargetName="content" Property="TextElement.Foreground" Value="#888"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and here is a sample:
<StackPanel>
<local:LedControl Content="Disabled OFF" Height="24" IsChecked="False" IsEnabled="False" />
<local:LedControl Content="Disabled ON" Height="32" IsChecked="True" IsEnabled="False" />
<local:LedControl Content="Enabled OFF" OffColor="Chocolate" IsChecked="False" Height="40" />
<local:LedControl Content="Enabled ON" OnColor="Navy" IsChecked="True" Height="48" />
</StackPanel>

You can use PathGradientBrush to draw a radial gradient. Here is the result of the code which I wrote. You can use any color as CheckedColor and UnCheckedColor, I used Red and Green to get this result:
Code
using System;
using System.ComponentModel;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;
public class MyCheckBox : CheckBox
{
public MyCheckBox()
{
this.SetStyle(ControlStyles.AllPaintingInWmPaint, true);
this.DoubleBuffered = true;
this.ResizeRedraw = true;
CheckedColor = Color.Green; ;
UnCheckedColor = Color.Red; ;
}
[DefaultValue(typeof(Color), "Green")]
public Color CheckedColor { get; set; }
[DefaultValue(typeof(Color), "Red")]
public Color UnCheckedColor { get; set; }
protected override void OnPaint(PaintEventArgs e)
{
var darkColor = Color.Black;
var lightColor = Color.FromArgb(200, Color.White);
var cornerAlpha = 80;
this.OnPaintBackground(e);
using (var path = new GraphicsPath())
{
e.Graphics.SmoothingMode = SmoothingMode.AntiAlias;
var rect = new Rectangle(0, 0, Height, Height);
path.AddEllipse(rect);
rect.Inflate(-1, -1);
using (var bgBrush = new SolidBrush(darkColor))
{
e.Graphics.FillEllipse(bgBrush, rect);
}
using (var pathGrBrush = new PathGradientBrush(path))
{
var color = Checked ? CheckedColor : UnCheckedColor;
pathGrBrush.CenterColor = color; ;
Color[] colors = { Color.FromArgb(cornerAlpha, color) };
pathGrBrush.SurroundColors = colors;
e.Graphics.FillEllipse(pathGrBrush, rect);
}
using (var pathGrBrush = new PathGradientBrush(path))
{
pathGrBrush.CenterColor = lightColor; ;
Color[] colors = { Color.Transparent };
pathGrBrush.SurroundColors = colors;
var r = (float)(Math.Sqrt(2) * Height / 2);
var x = r / 8;
e.Graphics.FillEllipse(pathGrBrush, new RectangleF(-x, -x, r, r));
e.Graphics.ResetClip();
}
}
TextRenderer.DrawText(e.Graphics, Text, Font,
new Rectangle(Height, 0, Width - Height, Height), ForeColor,
TextFormatFlags.Left | TextFormatFlags.VerticalCenter);
}
}

Areo Glass Effect and windowStyle set to none causes window resize to not function properly

Areo Glass Effect and windowStyle set to none and AllowTransparency causes widow resize to not function properly
After adding the Areo Glass theme to my window and setting WindowState to None the window does not resize properly. I can go as large as I want but when resizing down smaller the glass effect stays the same width and height.
For example I click Maximize. The window Expands to the full screen size. But when restoring my window restores back down but not the glass effect.
All I really want is the blur effect. I Don't care about the glass, but this seems to be the only way I can get a transparent blur.
How can I fix this?
xaml
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" AllowsTransparency="True" WindowStyle="None" ResizeMode="CanResizeWithGrip" Background="Transparent">
<Border BorderThickness="1" Margin="0,35,0,0" BorderBrush="Orange">
<Grid Background="#0CFFA500">
<DockPanel VerticalAlignment="Top" HorizontalAlignment="Stretch" Height="35" Background="#4effffff">
<DockPanel.Resources>
<Style x:Key="WindowIconStyle" TargetType="{x:Type Button}">
<Setter Property="FontSize" Value="16" />
<Setter Property="Foreground" Value="#444" />
<Setter Property="Height" Value="30"></Setter>
<Setter Property="Width" Value="30"></Setter>
<Setter Property="FontFamily" Value="Webdings"></Setter>
<Setter Property="Background" Value="#ff0000"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border BorderBrush="Transparent" BorderThickness="0.5,0,0.5,0">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#77abff" />
<Setter Property="Foreground" Value="#000000" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border BorderBrush="Black" BorderThickness="1,0,1,0">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="1"/>
<GradientStop Color="White" Offset="0.952"/>
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FFF7F7F7" Offset="0.044"/>
</LinearGradientBrush>
</Border.Background>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border BorderBrush="#444" BorderThickness="1,0,1,0">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="#444" Offset="1"/>
<GradientStop Color="#ffececec" Offset="0.952"/>
<GradientStop Color="#444" Offset="0"/>
<GradientStop Color="#ffececec" Offset="0.044"/>
</LinearGradientBrush>
</Border.Background>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</DockPanel.Resources>
<Button DockPanel.Dock="Right" VerticalAlignment="Center" HorizontalAlignment="Right" Click="TriggerClose" Style="{StaticResource WindowIconStyle}" Content="r" />
<Button x:Name="btnMaximize" DockPanel.Dock="Right" VerticalAlignment="Center" HorizontalAlignment="Right" Click="TriggerMaximize" Style="{StaticResource WindowIconStyle}" Content="c" />
<Button DockPanel.Dock="Right" VerticalAlignment="Center" HorizontalAlignment="Right" Click="TriggerMinimize" Style="{StaticResource WindowIconStyle}" Content="0" />
<StatusBar Background="Transparent" MouseDoubleClick="TriggerMaximize" MouseMove="TriggerMoveWindow" >
<TextBlock DockPanel.Dock="Left" x:Name="txtTitle" Text="Title" FontSize="16" Padding="10,0,0,0"/>
</StatusBar>
</DockPanel>
<Border BorderThickness="0,1,0,0" Margin="0,35,0,0" BorderBrush="#f7000000">
</Border>
</Grid>
</Border>
</Window>
C#
using System;
using System.Runtime.InteropServices;
using System.Windows;
using System.Windows.Input;
using System.Windows.Interop;
namespace WpfApplication2 {
public partial class MainWindow : Window {
#region Constants
private System.Windows.Window me { get; set; }
private const int WM_DWMCOMPOSITIONCHANGED = 0x031E;
private const int DWM_BB_ENABLE = 0x1;
#endregion //Constants
#region Structures
[StructLayout(LayoutKind.Sequential)]
private struct DWM_BLURBEHIND {
public int dwFlags;
public bool fEnable;
public IntPtr hRgnBlur;
public bool fTransitionOnMaximized;
}
[StructLayout(LayoutKind.Sequential)]
private struct MARGINS {
public int cxLeftWidth;
public int cxRightWidth;
public int cyTopHeight;
public int cyBottomHeight;
}
#endregion //Structures
#region APIs
[DllImport("dwmapi.dll", PreserveSig = false)]
private static extern void DwmEnableBlurBehindWindow(IntPtr hwnd, ref DWM_BLURBEHIND blurBehind);
[DllImport("dwmapi.dll")]
private static extern int DwmExtendFrameIntoClientArea(IntPtr hWnd, ref MARGINS pMargins);
[DllImport("dwmapi.dll", PreserveSig = false)]
private static extern bool DwmIsCompositionEnabled();
#endregion //APIs
public MainWindow() {
SourceInitialized += OnSourceInitialized;
InitializeComponent();
}
private void OnSourceInitialized(object sender, EventArgs eventArgs) {
me = (Window)sender;
if (Environment.OSVersion.Version.Major >= 6) {
var hwnd = new WindowInteropHelper(me).Handle;
var hs = HwndSource.FromHwnd(hwnd);
hs.CompositionTarget.BackgroundColor = System.Windows.Media.Colors.Transparent;
hs.AddHook(new HwndSourceHook(this.WndProc));
this.InitializeGlass(hwnd);
}
}
public System.Windows.Media.Color GetAreoColor() {
int icolor = (int)Microsoft.Win32.Registry.GetValue(#"HKEY_CURRENT_USER\Software\Microsoft\Windows\DWM", "ColorizationColor", null);
var c = System.Drawing.Color.FromArgb(icolor);
return System.Windows.Media.Color.FromArgb(c.A, c.R, c.G, c.B);
}
private static String ConverterToHex(System.Drawing.Color c) {
return String.Format("#{0}{1}{2}", c.R.ToString("X2"), c.G.ToString("X2"), c.B.ToString("X2"));
}
#region Methods
#region InitializeGlass
public void InitializeGlass(IntPtr hwnd) {
if (!DwmIsCompositionEnabled())
return;
// fill the background with glass
var margins = new MARGINS();
margins.cxLeftWidth = margins.cxRightWidth = margins.cyBottomHeight = margins.cyTopHeight = -1;
DwmExtendFrameIntoClientArea(hwnd, ref margins);
// initialize blur for the window
DWM_BLURBEHIND bbh = new DWM_BLURBEHIND();
bbh.fEnable = true;
// bbh.fTransitionOnMaximized = true;
bbh.dwFlags = DWM_BB_ENABLE;
DwmEnableBlurBehindWindow(hwnd, ref bbh);
}
#endregion //InitializeGlass
#region WndProc
private IntPtr WndProc(IntPtr hwnd, int msg, IntPtr wParam, IntPtr lParam, ref bool handled) {
if (msg == WM_DWMCOMPOSITIONCHANGED) {
this.InitializeGlass(hwnd);
handled = false;
}
return IntPtr.Zero;
}
#endregion //WndProc
#endregion //Methods
private void TriggerMoveWindow(object sender, MouseEventArgs e) {
if (e.LeftButton == MouseButtonState.Pressed) {
if (WindowState == System.Windows.WindowState.Maximized) {
WindowState = System.Windows.WindowState.Normal;
double pct = PointToScreen(e.GetPosition(this)).X / System.Windows.SystemParameters.PrimaryScreenWidth;
Top = 0;
Left = e.GetPosition(this).X - (pct * Width);
}
Application.Current.MainWindow.DragMove();
}
}
private void TriggerMaximize(object sender, EventArgs e) {
if (WindowState == System.Windows.WindowState.Maximized) {
WindowState = System.Windows.WindowState.Normal;
btnMaximize.FontFamily = new System.Windows.Media.FontFamily("Webdings");
btnMaximize.Content = "c";
} else if (WindowState == System.Windows.WindowState.Normal) {
WindowState = System.Windows.WindowState.Maximized;
btnMaximize.FontFamily = new System.Windows.Media.FontFamily("Wingdings");
btnMaximize.Content = "r";
InvalidateVisual();
}
}
private void TriggerClose(object sender, RoutedEventArgs e) {
Close();
}
private void TriggerMinimize(object sender, RoutedEventArgs e) {
WindowState = System.Windows.WindowState.Minimized;
}
}
}

It seems that AllowsTransparency == True is the source of this behavior. Therefore you can remove it. However, you should set the Opacity of Backgroud Brush to be zero:
<Window.Background>
<SolidColorBrush Opacity="0" Color="Transparent"/>
</Window.Background>
This along with setting CompositionTarget.BackgroundColor to be transparent, and also using DwmEnableBlurBehindWindow function will make a similar result to setting AllowsTransparency == True.
However, with these modifications, the look of the window is not very pleasant because of its border. The Border will go away if you set ResizeMode=="NoResize". However, in this case, you should implement resizing yourself. Fortunately, this is easy by adding a Thumb and handling DragDelta event. Here is the full code:
Xaml
<Window x:Class="Test1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Test1"
mc:Ignorable="d"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
Title="MainWindow" Name="window"
Height="350" Width="525" WindowStyle="None" ResizeMode="NoResize" >
<Window.Background>
<SolidColorBrush Opacity="0" Color="Transparent"/>
</Window.Background>
<Grid>
<Thumb DockPanel.Dock="Bottom" DragDelta="Thumb_DragDelta" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="8" Height="8" Cursor="SizeNWSE" Background="Red" Panel.ZIndex="4"/>
<Border BorderThickness="1" BorderBrush="Orange" Margin="0,0,0,0">
<Grid Background="#0CFFA500">
<DockPanel VerticalAlignment="Top" HorizontalAlignment="Stretch" Height="35" Background="#4effffff">
<DockPanel.Resources>
<Style x:Key="WindowIconStyle" TargetType="{x:Type Button}">
<Setter Property="FontSize" Value="16" />
<Setter Property="Foreground" Value="#444" />
<Setter Property="Height" Value="30"></Setter>
<Setter Property="Width" Value="30"></Setter>
<Setter Property="FontFamily" Value="Webdings"></Setter>
<Setter Property="Background" Value="#ff0000"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border BorderBrush="Transparent" BorderThickness="0.5,0,0.5,0">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#77abff" />
<Setter Property="Foreground" Value="#000000" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border BorderBrush="Black" BorderThickness="1,0,1,0">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="1"/>
<GradientStop Color="White" Offset="0.952"/>
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FFF7F7F7" Offset="0.044"/>
</LinearGradientBrush>
</Border.Background>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border BorderBrush="#444" BorderThickness="1,0,1,0">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="#444" Offset="1"/>
<GradientStop Color="#ffececec" Offset="0.952"/>
<GradientStop Color="#444" Offset="0"/>
<GradientStop Color="#ffececec" Offset="0.044"/>
</LinearGradientBrush>
</Border.Background>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</DockPanel.Resources>
<Button DockPanel.Dock="Right" VerticalAlignment="Center" HorizontalAlignment="Right" Click="TriggerClose" Style="{StaticResource WindowIconStyle}" Content="r" />
<Button x:Name="btnMaximize" DockPanel.Dock="Right" VerticalAlignment="Center" HorizontalAlignment="Right" Click="TriggerMaximize" Style="{StaticResource WindowIconStyle}" Content="c" />
<Button DockPanel.Dock="Right" VerticalAlignment="Center" HorizontalAlignment="Right" Click="TriggerMinimize" Style="{StaticResource WindowIconStyle}" Content="0" />
<StatusBar Background="Transparent" MouseDoubleClick="TriggerMaximize" MouseMove="TriggerMoveWindow" >
<TextBlock DockPanel.Dock="Left" x:Name="txtTitle" Text="Title" FontSize="16" Padding="10,0,0,0"/>
</StatusBar>
</DockPanel>
<Border BorderThickness="0,1,0,0" Margin="0,35,0,0" BorderBrush="#f7000000">
</Border>
</Grid>
</Border>
</Grid>
</Window>
CS Code
public partial class MainWindow : Window
{
private const int WM_DWMCOMPOSITIONCHANGED = 0x031E;
private const int DWM_BB_ENABLE = 0x1;
[StructLayout(LayoutKind.Sequential)]
private struct DWM_BLURBEHIND
{
public int dwFlags;
public bool fEnable;
public IntPtr hRgnBlur;
public bool fTransitionOnMaximized;
}
[StructLayout(LayoutKind.Sequential)]
private struct MARGINS
{
public int cxLeftWidth;
public int cxRightWidth;
public int cyTopHeight;
public int cyBottomHeight;
}
[DllImport("dwmapi.dll", PreserveSig = false)]
private static extern void DwmEnableBlurBehindWindow(IntPtr hwnd, ref DWM_BLURBEHIND blurBehind);
[DllImport("dwmapi.dll")]
private static extern int DwmExtendFrameIntoClientArea(IntPtr hWnd, ref MARGINS pMargins);
[DllImport("dwmapi.dll", PreserveSig = false)]
private static extern bool DwmIsCompositionEnabled();
public MainWindow()
{
InitializeComponent();
SourceInitialized += OnSourceInitialized;
}
private void OnSourceInitialized(object sender, EventArgs eventArgs)
{
var hwnd = new WindowInteropHelper(this).Handle;
var hs = HwndSource.FromHwnd(hwnd);
hs.CompositionTarget.BackgroundColor = System.Windows.Media.Colors.Transparent;
var margins = new MARGINS();
margins.cxLeftWidth = margins.cxRightWidth = margins.cyTopHeight = margins.cyBottomHeight = -1;
DwmExtendFrameIntoClientArea(hwnd, ref margins);
DWM_BLURBEHIND bbh = new DWM_BLURBEHIND();
bbh.fEnable = true;
bbh.dwFlags = DWM_BB_ENABLE;
DwmEnableBlurBehindWindow(hwnd, ref bbh);
}
private void TriggerMinimize(object sender, RoutedEventArgs e)
{
WindowState = System.Windows.WindowState.Minimized;
}
private void TriggerMoveWindow(object sender, MouseEventArgs e)
{
if (e.LeftButton == MouseButtonState.Pressed)
{
if (WindowState == System.Windows.WindowState.Maximized)
{
WindowState = System.Windows.WindowState.Normal;
double pct = PointToScreen(e.GetPosition(this)).X / System.Windows.SystemParameters.PrimaryScreenWidth;
Top = 0;
Left = e.GetPosition(this).X - (pct * Width);
}
Application.Current.MainWindow.DragMove();
}
}
private void TriggerMaximize(object sender, EventArgs e)
{
if (WindowState == System.Windows.WindowState.Maximized)
{
WindowState = System.Windows.WindowState.Normal;
btnMaximize.FontFamily = new System.Windows.Media.FontFamily("Webdings");
btnMaximize.Content = "c";
}
else if (WindowState == System.Windows.WindowState.Normal)
{
WindowState = System.Windows.WindowState.Maximized;
btnMaximize.FontFamily = new System.Windows.Media.FontFamily("Wingdings");
btnMaximize.Content = "r";
InvalidateVisual();
}
}
private void TriggerClose(object sender, RoutedEventArgs e)
{
Close();
}
private void Thumb_DragDelta(object sender, DragDeltaEventArgs e)
{
this.Height += e.VerticalChange;
this.Width += e.HorizontalChange;
}
}
You can see the result:

Remodel simple WPF code to WinRT

For four days i trying to rewmodel the following code to analogue in WinRT, but I can't. :/
The WinRT does not have DrawingImage, so I tried to proceed by analogy with the Path or Polyline, but I failed.
I'm sure, that if someone know WPF and WinRT this is not problem for him to remodel this code.
I think, that only problems are with DrawingImage and with triggering.
I know, that it's a lot of code, but i think, that problem is trivial, nevertheless i does not know how to solve this for four days. ;/
I would be very grateful for help with remodel this code.
<Window x:Class="HexagonGridTest.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:HexagonGridTest"
Title="Window1" Height="741.836" Width="697.351" Background="#FF232323">
<Window.Resources>
<DrawingImage x:Key="HexagonImage">
<DrawingImage.Drawing>
<DrawingGroup>
<GeometryDrawing Brush="#11AA11"
Geometry="M 250,0 L 750,0 L 1000,433 L 750,866 L 250,866 L 0,433 Z">
<GeometryDrawing.Pen>
<Pen Brush="Black" Thickness="10" LineJoin="Round"/>
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>
<DrawingImage x:Key="HexagonHoverImage">
<DrawingImage.Drawing>
<DrawingGroup>
<GeometryDrawing Brush="Khaki"
Geometry="M 250,0 L 750,0 L 1000,433 L 750,866 L 250,866 L 0,433 Z">
<GeometryDrawing.Pen>
<Pen Brush="Black" Thickness="10" LineJoin="Round"/>
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>
<DrawingImage x:Key="HexagonPressedImage">
<DrawingImage.Drawing>
<DrawingGroup>
<GeometryDrawing Brush="Orange"
Geometry="M 250,0 L 750,0 L 1000,433 L 750,866 L 250,866 L 0,433 Z">
<GeometryDrawing.Pen>
<Pen Brush="Black" Thickness="10" LineJoin="Round"/>
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>
<Style x:Key="HexagonButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Khaki"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Image x:Name="img" Source="{StaticResource HexagonImage}"/>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="img" Property="Source" Value="{StaticResource HexagonHoverImage}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="img" Property="Source" Value="{StaticResource HexagonPressedImage}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<local:HexagonGrid Rows="4" Columns="1" HexagonSideLength="40">
<local:HexagonGrid.Resources>
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource HexagonButtonStyle}"/>
</local:HexagonGrid.Resources>
<Button Grid.Row="0" Grid.Column="2" Content="0,2"/>
<Button Grid.Row="0" Grid.Column="1" Content="0,1"/>
<Button Grid.Row="1" Grid.Column="2" Content="1,2"/>
</local:HexagonGrid>
</Grid>
</Window>
This class should be compatible with WinRT.
using System;
using System.Windows;
using System.Windows.Controls;
namespace HexagonGridTest
{
public class HexagonGrid : Grid
{
public static readonly DependencyProperty HexagonSideLengthProperty =
DependencyProperty.Register("HexagonSideLength", typeof(double), typeof(HexagonGrid), null);
public double HexagonSideLength
{
get { return (double)GetValue(HexagonSideLengthProperty); }
set { SetValue(HexagonSideLengthProperty, value); }
}
public static readonly DependencyProperty RowsProperty =
DependencyProperty.Register("Rows", typeof(int), typeof(HexagonGrid), new PropertyMetadata((int)1));
public int Rows
{
get { return (int)GetValue(RowsProperty); }
set { SetValue(RowsProperty, value); }
}
public static readonly DependencyProperty ColumnsProperty =
DependencyProperty.Register("Columns", typeof(int), typeof(HexagonGrid), new PropertyMetadata((int)1));
public int Columns
{
get { return (int)GetValue(ColumnsProperty); }
set { SetValue(ColumnsProperty, value); }
}
protected override Size MeasureOverride(Size constraint)
{
double side = HexagonSideLength;
double width = 2 * side;
double height = side * Math.Sqrt(3.0);
double colWidth = 0.75 * width;
double rowHeight = height;
Size availableChildSize = new Size(width, height);
foreach (FrameworkElement child in this.Children)
{
child.Measure(availableChildSize);
}
double totalHeight = Rows * rowHeight;
if (Columns > 1)
totalHeight += (0.5 * rowHeight);
double totalWidth = Columns + (0.5 * side);
Size totalSize = new Size(totalWidth, totalHeight);
return totalSize;
}
protected override Size ArrangeOverride(Size arrangeSize)
{
double side = HexagonSideLength;
double width = 2 * side;
double height = side * Math.Sqrt(3.0);
double colWidth = 0.75 * width;
double rowHeight = height;
Size childSize = new Size(width, height);
foreach (FrameworkElement child in this.Children)
{
int row = GetRow(child);
int col = GetColumn(child);
double left = col * colWidth;
double top = row * rowHeight;
bool isUnevenCol = (col % 2 != 0);
if (isUnevenCol)
top += (0.5 * rowHeight);
child.Arrange(new Rect(new Point(left, top), childSize));
}
return arrangeSize;
}
}
}
My Page Resources with Style code, which is incorrect, that is sure, but i can't correct that.
Don't throw any errors, just don't draw anything.
<Page.Resources>
<Path x:Key="HexagoPath"
Stroke="DarkGoldenRod"
StrokeThickness="7"
Fill="AliceBlue"
Data="M 250,0 L 750,0 L 1000,433 L 750,866 L 250,866 L 0,433 Z" />
<Path x:Key="HexagoPathHover"
Stroke="DarkGoldenRod"
StrokeThickness="7"
Fill="Bisque"
Data="M 250,0 L 750,0 L 1000,433 L 750,866 L 250,866 L 0,433 Z" />
<Path x:Key="HexagoPathPressed"
Stroke="DarkGoldenRod"
StrokeThickness="7"
Fill="Brown"
Data="M 250,0 L 750,0 L 1000,433 L 750,866 L 250,866 L 0,433 Z" />
<Style x:Key="HexagoPathStyle" TargetType="Button">
<Setter Property="MinWidth" Value="0"/>
<Setter Property="MinHeight" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
<Path x:Name="PH" DataContext="{StaticResource HexagoPath}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Path>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>