Develop Reference

Dynamically Combining Rectangles

I'm trying to combine two rectangles that I need to create dynamically but I can't figure out how to draw them using .Data and I don't know how to convert from Windows.Shapes.Rectangle to Windows.Media.Geometry.
Rectangle Cross1 = new Rectangle();
Cross1.Margin = new Thickness(465, -140, 0, 0);
Cross1.Height = 110;
Cross1.Width = 15;
Cross1.RenderTransform = rotateTransform1;
Rectangle Cross2 = new Rectangle();
Cross2.HorizontalAlignment = HorizontalAlignment.Left;
Cross2.VerticalAlignment = VerticalAlignment.Top;
Cross2.Margin = new Thickness(362, -103, 0, 0);
Cross2.Height = 110;
Cross2.Width = 15;
Cross2.RenderTransform = rotateTransform2;
CombinedGeometry c1 = new CombinedGeometry(GeometryCombineMode.Union, Cross1, Cross2);

The CombinedGeometry class only works with other System.Windows.Media.Geometry objects, not System.Windows.Shapes. You need to use the equivalent RectangleGeometry class instead.
Something such as:
RectangleGeometry Cross1 = new RectangleGeometry(new Rect(0, 0, 15, 110));
Cross1.Transform = rotateTransform1;
RectangleGeometry Cross2 = new RectangleGeometry(new Rect(0, 0, 15, 110));
Cross2.Transform = rotateTransform2;
CombinedGeometry c1 = new CombinedGeometry(GeometryCombineMode.Union, Cross1, Cross2);

Border wont apply programatically to my grid WPF C#

I have problems with Styling my grid, I am working on small app for caffe bars lets say, customer is able to choose drink from the middle of screen and drink will be shown in the right part of screen in my grid, this is how that looks like right now (when customer choose something - lets say Coke, sprite etc.):
This is my code for now :
public DrinksPanel(byte[] image)
: base()
{
BrushConverter MyBrush8 = new BrushConverter();
var myBorder = new Border();
myBorder.Background = (Brush)MyBrush8.ConvertFrom("#83D744");
Thickness marginT = this.Margin;
marginT.Top = 10;
this.Margin = marginT;
ColumnDefinition col1 = new ColumnDefinition();
col1.Width = new GridLength(45);
ColumnDefinition col2 = new ColumnDefinition();
col2.Width = new GridLength(80, GridUnitType.Star);
ColumnDefinition col3 = new ColumnDefinition();
col3.Width = new GridLength(45);
this.ColumnDefinitions.Add(col1);
this.ColumnDefinitions.Add(col2);
this.ColumnDefinitions.Add(col3);
this.Height = 45;
this.HorizontalAlignment = System.Windows.HorizontalAlignment.Stretch;
this.VerticalAlignment = System.Windows.VerticalAlignment.Stretch;
ArticleNameLabel.VerticalContentAlignment = VerticalAlignment.Center;
ArticleNameLabel.HorizontalContentAlignment = HorizontalAlignment.Left;
ArticleNameLabel.FontSize = fontSize;
ArticleNameLabel.Foreground = System.Windows.Media.Brushes.White;
ArticleNameLabel.FontFamily = Util.Font;//new System.Windows.Media.FontFamily("HelveticaNeueLTStd-Bd.otf#Helvetica Neue LT Std");
ArticleNameLabel.Content = tekst;
ArticleNameLabel.SetValue(Grid.RowProperty, 0);
ArticleNameLabel.SetValue(Grid.RowSpanProperty, 1);
ArticleNameLabel.SetValue(Grid.ColumnProperty, 1);
ArticleNameLabel.SetValue(Grid.ColumnSpanProperty, 1);
ArticleNameLabel.Width = Double.NaN;
ArticleNameLabel.Height = Double.NaN;
QuantityNumberLabel.Width = Double.NaN;
QuantityNumberLabel.Height = Double.NaN;
QuantityNumberLabel.SetValue(Grid.RowProperty, 0);
QuantityNumberLabel.SetValue(Grid.RowSpanProperty, 1);
QuantityNumberLabel.SetValue(Grid.ColumnProperty, 2);
ArticleNameLabel.SetValue(Grid.ColumnSpanProperty, 1);
QuantityNumberLabel.HorizontalAlignment = HorizontalAlignment.Center;
QuantityNumberLabel.VerticalAlignment = VerticalAlignment.Center;
QuantityNumberLabel.FontFamily = Util.Font;
QuantityNumberLabel.FontSize = numberSize;
QuantityNumberLabel.Content = "x1";
QuantityNumberLabel.Foreground = System.Windows.Media.Brushes.White;
BrushConverter MyBrush3 = new BrushConverter();
QuantityNumberLabel.Background = (Brush)MyBrush3.ConvertFrom("#83D744");
_image.Width = Double.NaN;
_image.Height = Double.NaN;
_image.HorizontalAlignment = HorizontalAlignment.Stretch;
_image.VerticalAlignment = VerticalAlignment.Stretch;
_image.SetValue(Grid.RowProperty, 0);
_image.SetValue(Grid.RowSpanProperty, 1);
_image.SetValue(Grid.ColumnProperty, 0);
_image.SetValue(Grid.ColumnSpanProperty, 1);
Image.Source = GetSlikaFromByte(image);
Rectangle background = new Rectangle();
background.SetValue(Grid.RowProperty, 0);
background.SetValue(Grid.RowSpanProperty, 1);
background.SetValue(Grid.ColumnProperty, 0);
background.SetValue(Grid.ColumnSpanProperty,3);
background.HorizontalAlignment = HorizontalAlignment.Stretch;
background.VerticalAlignment = VerticalAlignment.Stretch;
background.Width = Double.NaN;
background.Height = Double.NaN;
background.Fill = (Brush)MyBrush.ConvertFrom("#50000000");
_animation = new DoubleAnimation(numberSize, numberSize + 15, new Duration(new TimeSpan(0, 0, 0, 0, 300)));
_animation.AutoReverse = true;
this.Children.Add(background);
this.Children.Add(_image);
this.Children.Add(ArticleNameLabel);
this.Children.Add(QuantityNumberLabel);
}
***So my question is guys, how could apply
myborder
around grid?***
If anyone could help me about this I would appreciate that so much =)

Adding multiple effects to animation using storyboard using WPF

I am having trouble adding multiple effects within an animation sequence in WPF. I have multiple rectangles arranged within a grid and the way the animation effect is to work is in the following order:
By default, the user sees the grid such that every cell is bounded by a silver border on a black canvas, the color of the rectangle within each cell could be transparent/black.
On mouse hover, the rectangle in the cell changes its stroke and fill to green.
On exiting the mouse over, the previous cell slowly changes color to its default state before the mouse hover.
I was able to do the animation effect for just the stroke color but not combine it with the fill properties. Here is the code snippet for creating the rectangles within the grid:
Style cellStyle = PrepareAnimationStyle();
foreach (string label in rowHeaders)
{
for (int n = 0; n < numOfCols; n++)
grid.Children.Add(new Rectangle()
{
Stroke = Brushes.Silver,
StrokeThickness = 2,
Fill = Brushes.Transparent,
Height = cellSize,
Width = cellSize,
Style = cellstyle
});
}
And here is the code that sets the animation (still in progress, can't make it work as required):
Style PrepareAnimationStyle()
{
Trigger animTrigger = new Trigger();
animTrigger.Property = ContentElement.IsMouseOverProperty;
animTrigger.Value = true;
System.Windows.Media.Animation.ColorAnimation toGreen = new System.Windows.Media.Animation.ColorAnimation((Color)ColorConverter.ConvertFromString("#FF66CC00"), TimeSpan.FromSeconds(0));
toGreen.FillBehavior = FillBehavior.HoldEnd;
System.Windows.Media.Animation.ColorAnimation toTransparent = new System.Windows.Media.Animation.ColorAnimation(Colors.Transparent, TimeSpan.FromSeconds(1));
System.Windows.Media.Animation.ColorAnimation toSilver = new System.Windows.Media.Animation.ColorAnimation(Colors.Silver, TimeSpan.FromSeconds(1));
System.Windows.Media.Animation.Storyboard sbEnter = new System.Windows.Media.Animation.Storyboard();
//Storyboard.SetTargetProperty(toGreen, new PropertyPath("Stroke.Color"));
Storyboard.SetTargetProperty(toGreen, new PropertyPath("(Shape.Fill).(SolidColorBrush.Color)"));
sbEnter.Children.Add(toGreen);
/*Storyboard sbFill = new Storyboard();
Storyboard.SetTargetProperty(toGreen, new PropertyPath("Fill.Color"));
sbFill.Children.Add(toSilver);
Storyboard sbFillEmpty = new Storyboard();
Storyboard.SetTargetProperty(toTransparent, new PropertyPath("Fill.Color"));
sbFillEmpty.Children.Add(toSilver);*/
Storyboard sbExit = new Storyboard();
//Storyboard.SetTargetProperty(toSilver, new PropertyPath("Stroke.Color"));
Storyboard.SetTargetProperty(toTransparent, new PropertyPath("Fill.Color"));
sbExit.Children.Add(toSilver);
animTrigger.EnterActions.Add(new BeginStoryboard() { Storyboard = sbEnter });
//animTrigger.EnterActions.Add(new BeginStoryboard() { Storyboard = sbFill });
//animTrigger.EnterActions.Add(new BeginStoryboard() { Storyboard = sbFillEmpty });
animTrigger.ExitActions.Add(new BeginStoryboard() { Storyboard = sbExit });
Style cellStyle = new Style();
cellStyle.Triggers.Add(animTrigger);
return cellStyle;
}

Here you go
Style PrepareAnimationStyle()
{
Trigger animTrigger = new Trigger();
animTrigger.Property = FrameworkElement.IsMouseOverProperty;
animTrigger.Value = true;
ColorAnimation strokeToGreen = new ColorAnimation((Color)ColorConverter.ConvertFromString("#FF66CC00"), TimeSpan.FromSeconds(0));
ColorAnimation strokeToSilver = new ColorAnimation(Colors.Silver, TimeSpan.FromSeconds(1));
ColorAnimation fillToGreen = new ColorAnimation((Color)ColorConverter.ConvertFromString("#FF66CC00"), TimeSpan.FromSeconds(0));
ColorAnimation fillToTransparent = new ColorAnimation(Colors.Transparent, TimeSpan.FromSeconds(1));
Storyboard sbEnter = new Storyboard();
Storyboard.SetTargetProperty(strokeToGreen, new PropertyPath("Stroke.Color"));
Storyboard.SetTargetProperty(fillToGreen, new PropertyPath("Fill.Color"));
sbEnter.Children.Add(strokeToGreen);
sbEnter.Children.Add(fillToGreen);
Storyboard sbExit = new Storyboard();
Storyboard.SetTargetProperty(strokeToSilver, new PropertyPath("Stroke.Color"));
Storyboard.SetTargetProperty(fillToTransparent, new PropertyPath("Fill.Color"));
sbExit.Children.Add(strokeToSilver);
sbExit.Children.Add(fillToTransparent);
animTrigger.EnterActions.Add(new BeginStoryboard() { Storyboard = sbEnter });
animTrigger.ExitActions.Add(new BeginStoryboard() { Storyboard = sbExit });
Style cellStyle = new Style();
cellStyle.Triggers.Add(animTrigger);
return cellStyle;
}
in order to make it work properly make sure to set a fill and stroke while you add the cell
example
Style cellStyle = PrepareAnimationStyle(); //this line is out side of the cell loop
....
rect.Fill = new SolidColorBrush(Colors.Transparent);
rect.Stroke = new SolidColorBrush(Colors.Silver);
rect.Style = cellStyle;

Simple Animation using C# for WP

I am trying to create a simple animation using code. I copy pasted the same code of the msdn which is the following:
public MainPage()
{
InitializeComponent();
Rectangle myRectangle = new Rectangle();
myRectangle.Width = 200;
myRectangle.Height = 200;
Color myColor = Color.FromArgb(255, 255, 0, 0);
SolidColorBrush myBrush = new SolidColorBrush();
myBrush.Color = myColor;
myRectangle.Fill = myBrush;
// Add the rectangle to the tree.
LayoutRoot.Children.Add(myRectangle);
// Create a duration of 2 seconds.
Duration duration = new Duration(TimeSpan.FromSeconds(2));
// Create two DoubleAnimations and set their properties.
DoubleAnimation myDoubleAnimation1 = new DoubleAnimation();
DoubleAnimation myDoubleAnimation2 = new DoubleAnimation();
myDoubleAnimation1.Duration = duration;
myDoubleAnimation2.Duration = duration;
Storyboard sb = new Storyboard();
sb.Duration = duration;
sb.Children.Add(myDoubleAnimation1);
sb.Children.Add(myDoubleAnimation2);
Storyboard.SetTarget(myDoubleAnimation1, myRectangle);
Storyboard.SetTarget(myDoubleAnimation2, myRectangle);
// Set the attached properties of Canvas.Left and Canvas.Top
// to be the target properties of the two respective DoubleAnimations.
Storyboard.SetTargetProperty(
myDoubleAnimation1, new PropertyPath("(Canvas.Left)"));
Storyboard.SetTargetProperty(
myDoubleAnimation2, new PropertyPath("(Canvas.Top)"));
myDoubleAnimation1.To = 200;
myDoubleAnimation2.To = 200;
// Make the Storyboard a resource.
LayoutRoot.Resources.Add("unique_id", sb);
// Begin the animation.
sb.Begin();
// Sample code to localize the ApplicationBar
//BuildLocalizedApplicationBar();
}
However, I obtain a red square that doesn't move when I run the emulator.
What could be the problem?
Thank you!

C# Windows Phone - Creating a round mask

I need to mask dynamically created images, so that they will be shown as circles.
Pictures can be square, but are usually rectangles... so the circle that will be shown can be taken from the center of it...so the shown circle must be inscribed in the picture and centered in the center of it.
This is the code I'm using right now:
//Setting up the image
Image image = new Image();
image.Height = 70;
image.Width = 70;
BitmapImage bitmapImage = new BitmapImage();
bitmapImage.UriSource = new Uri("http://url-of-the-image", UriKind.Absolute);
image.CacheMode = new BitmapCache();
image.Source = bitmapImage;
image.Stretch = Stretch.UniformToFill;
image.VerticalAlignment = System.Windows.VerticalAlignment.Center;
//Setting up the mask
RadialGradientBrush opacityMask = new RadialGradientBrush();
GradientStop gs1 = new GradientStop();
GradientStop gs2 = new GradientStop();
GradientStop gs3 = new GradientStop();
gs1.Color = Color.FromArgb(255, 0, 0, 0);
gs1.Offset = 0.0;
gs2.Color = Color.FromArgb(255, 0, 0, 0);
gs2.Offset = 0.999;
gs3.Color = Color.FromArgb(0, 0, 0, 0);
gs3.Offset = 1.0;
opacityMask.GradientStops.Add(gs1);
opacityMask.GradientStops.Add(gs2);
opacityMask.GradientStops.Add(gs3);
image.OpacityMask = opacityMask;
//Showing the image
panel.Children.Add(image);
This all works fine, but when the pictures are rectangular and not square, this creates an ellipse instead of a circle... any idea on how can I force it to create a circle?
I also tried to specify some more parameters, but doesn't seem to help:
opacityMask.Center = new Point(0.5, 0.5);
opacityMask.RadiusX = 0.5;
opacityMask.RadiusY = 0.5;

Okay, today i tried again to fix this, and i came out with a solution.
It's not the best, more clean solution ever...but works :)
I basically wrapped the picture (not masked) into a StackPanel and then applied the mask to the StackPanel instead ;)
This is how it looks like (the only lines that change from the original are the the last few ones):
//Setting up the image
Image image = new Image();
image.Height = 70;
image.Width = 70;
BitmapImage bitmapImage = new BitmapImage();
bitmapImage.UriSource = new Uri("http://url-of-the-image", UriKind.Absolute);
image.CacheMode = new BitmapCache();
image.Source = bitmapImage;
image.Stretch = Stretch.UniformToFill;
image.VerticalAlignment = System.Windows.VerticalAlignment.Center;
//Setting up the mask
RadialGradientBrush opacityMask = new RadialGradientBrush();
GradientStop gs1 = new GradientStop();
GradientStop gs2 = new GradientStop();
GradientStop gs3 = new GradientStop();
gs1.Color = Color.FromArgb(255, 0, 0, 0);
gs1.Offset = 0.0;
gs2.Color = Color.FromArgb(255, 0, 0, 0);
gs2.Offset = 0.999;
gs3.Color = Color.FromArgb(0, 0, 0, 0);
gs3.Offset = 1.0;
opacityMask.GradientStops.Add(gs1);
opacityMask.GradientStops.Add(gs2);
opacityMask.GradientStops.Add(gs3);
//Setting up the StackPanel
StackPanel sp = new StackPanel();
sp.OpacityMask = opacityMask;
//Showing the image
sp.Children.Add(image);
panel.Children.Add(sp);