Develop Reference

WPF - Setting corner radius in code behind

I want to bring a some rectangles to my WPF-Pages, these Rectangles should have rounded corners. To bring a few of the rectangles to the page without having to write every single one in xaml I decided to do it with a loop in the code.
I tried this one:
for (int i = 0; i < 5; i++)
{
Rectangle rect = new Rectangle();
rect.Fill = System.Windows.Media.Brushes.Green;
var style = new Style(typeof(Border));
style.Setters.Add(new Setter(Border.CornerRadiusProperty, new CornerRadius(12.0, 0, 0 , 0)));
rect.Resources.Add(typeof(Border), style);
Grid.SetColumn(rect, 1);
Grid.SetRow(rect, 1);
mainGrid.Children.Add(rect);
}
but the corner radius of my rectangles won´t change. Do you have any suggestion?
Thanks for your help in advance!

To bring a few of the rectangles to the page without having to write every single one in xaml
Good problem to solve.
I decided to do it with a loop in the code
Absolutely bad solution. Use proper MVVM with an <ItemsControl> bound to your list of objects you're trying to display, stored in your view model. And then create a global style sheet and apply it to this either automatically or manually.
Anyway to answer your question, you're creating an unnamed style on Border and applying it to a Rectangle. That will never auto-apply, and good thing, because you reference Border.CornerRadiusProperty which doesn't exist on a Rectangle.
You want to either make your style override the Rectangle's template and add a Border around it, then set its corner border radius, or manually add the border above the rectangle and set its corner radius in your setter (only add the style to the Border's resources).
Your code doesn't really make sense to me though, Rectangle also has corner radius properties, RadiusX and RadiusY, you could just set those if that's what you want.

The rectangle is overflowing. If you do the same thing with a border it will work. When you add the rectangle inside the border you can see what its doing
Rectangle rect = new Rectangle();
rect.Fill = System.Windows.Media.Brushes.Green;
Border b = new Border();
b.Width = 100;
b.Height = 100;
b.Background = Brushes.White;
b.CornerRadius= new CornerRadius(12, 0, 0, 0);
b.BorderThickness = new Thickness(2);
b.BorderBrush = Brushes.Red;
b.Child = rect;//adding this rectangle will show you how the corner is overflowing
grid_Main.Children.Add(b);

Visual elements in Livecharts?

I want to move a vertical line from the beginning of a Cartesian Chart to the end in a timespan of 5 seconds. I tried looking at the example provided in the website https://lvcharts.net/App/examples/v1/wpf/Visual%20Elements, but the UI Elements in the graph do not match with the code.
When I tried adding the line directly to the chart, the line works fine, but the chart is not showing up.
<lvc:CartesianChart Name="CartChart" Height="150" Zoom="Xy" Pan="Xy">
<lvc:CartesianChart.Series>
<lvc:LineSeries Values="{Binding audioPoints}" StrokeThickness="1" PointGeometry="{x:Null}" Visibility="Visible" />
</lvc:CartesianChart.Series>
<Line x:Name="anotherLine" Stroke="Black" Height="160" X1="0"X2="0" Y1="0" Y2="160"/>
</lvc:CartesianChart>

I found this code example that I think will demonstrate what you need to do. You should be able to translate most of it into databindings and xaml.
What's important to notice is that you add a VisualElement to the VisualElements collection on the CartesianChart. You set the UIElement property on the VisualElement object to be the WPF control you want added to your chart.
https://lvcharts.net/App/examples/v1/wf/Visual%20Elements
cartesianChart1.VisualElements.Add(new VisualElement
{
X = 0.5,
Y = 7,
HorizontalAlignment = HorizontalAlignment.Center,
VerticalAlignment = VerticalAlignment.Top,
UIElement = new TextBlock //notice this property must be a wpf control
{
Text = "Warning!",
FontWeight = FontWeights.Bold,
FontSize = 16,
Opacity = 0.6
}
});
cartesianChart1.VisualElements.Add(new VisualElement()
{
X=0,
Y=myCalculatedValue,
UIElement = new Rectangle()
{
Width= width,
Margin= new Thickness(-seriesWidth/2, 0, 0, 0),
Height=6,
Fill=Brushes.Black,
VerticalAlignment = VerticalAlignment.Top
}
});

How can you outline an ellipse without using stroke property?

What I really want is a way to have a negative stroke Thickness value on a WPF shape such as an ellipse, so that the stoke outline paints outwards towards LEFT and TOP of Shape, rather than inside of the shape, over writing my text when I make the thinkness of the stroke too thick... I want the radius of my ellipse to stay constant, but the stroke to grow outwards with increased thinkness, and the LEFT, TOP placement of the shape to remain contant with the inner fill staying the same size and not getting covered up by stroke as it is increased in size.
I tried DropShadowEffect, but its kind of too blurry and not well defined enough...and looks kind of messy... really I just want a solid line going around the outside of the shape...
As you can see from attached picture above, I tried to put shadow around two the ellipses using this code below. the problem is that I want it to be a solid color around the outside like a scaletransform of another ellipse of a different color.
var e = new Ellipse();
DropShadowEffect effect = new DropShadowEffect();
effect.Color =Colors.Orange;
effect.Direction = 0;
effect.BlurRadius = 30;
effect.ShadowDepth = 4;
effect.Opacity=0;
e.Effect = effect;
t.Text = string.Format("abc");
t.Measure(new Size(gwin.XStep, gwin.YStep));
t.Arrange(new Rect(t.DesiredSize));
e.StrokeThickness = 2;
e.Stroke = Brushes.Black;
canvas.Children.Add(e);
canvas.Children.Add(t);
Another possible direction towards solving the problem:
<Ellipse RenderTransformOrigin="0.5,0.5">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
Convert to c# code and place one scaletransform ellipse centered inside another scaled transform ellipse of different colors... not sure how to set it up though.
Solution:
Based on suggestion below. I tried creating a grid, setting the width and height of the grid to the size of my ellipse, then adding two ellipses to the grid with different colors and one with a margin set to -10. and it works perfectly ... just need to place the larger ellipse with margin -10 behind the other ellipse when adding it to the grid...here's what it looks like now..
Solution is in here somewhere:
g = new Grid();
e = new Ellipse();
h = new Ellipse();
t = new TextBlock();
t.HorizontalAlignment = HorizontalAlignment.Center;
t.VerticalAlignment = VerticalAlignment.Center;
t.FontWeight = FontWeights.ExtraBold;
g.Children.Add(h);
g.Children.Add(e);
g.Children.Add(t);
gwin.canvas.Children.Add(g);
t.Text = String.Format("{0}.{1}", x, y);
g.Width = gwin.XStep;
g.Height = gwin.YStep;
Canvas.SetLeft (g, gwin.X1 + gwin.XStep*x*2);
Canvas.SetTop (g, gwin.Y1 + gwin.YStep*y*2);
e.StrokeThickness = 2;
e.Stroke = Brushes.Black;
h.Margin = new Thickness(-10);

You can use double ellipses inside a grid overlaying each other like this:
<Grid Width="100" Height="100">
<Ellipse Fill="Black" Margin="-10"/>
<Ellipse Fill="Red" />
</Grid>
The size of this compound is still 100x100 even though the first ellipse is bigger and rendered out of its boundaries.
You may also use a Path and then do this

I think there is something like border. Or you can draw one elipse and then a second one in smaller that has the background color.

Generate a circle where user taps(Clicks) in window phone8 App

I want to use the functionality in my window phone8 App that a circle should be generated where a user clicks on the phone screen. In android and IOS there is an event Touchpose. Is there any Equivalent method of touchpose in wp8.
or any other way to create a circle on screen where user taps(clicks). Thanks in advance.

Sure, you can. If your layout is based on a grid, then here's my example how you can do this.
XAML:
<Page /* all the default stuff */>
<Grid Tapped="Grid_Tapped" Background="Black">
// Your content
</Grid>
</Page>
C#:
private void Grid_Tapped(object sender, TappedRoutedEventArgs e)
{
Ellipse ellipse = new Ellipse()
{
Width = 64,
Height = 64,
Fill = new SolidColorBrush(Colors.Red),
Opacity = 0.2,
IsHitTestVisible = false, // This makes the circle transparent for touch, so you can tap things under it.
};
Grid.SetColumnSpan(ellipse, 99); // You need this if you have more columns than one.
Grid.SetRowSpan(ellipse, 99); // You need this if you have more rows than one.
Point position = e.GetPosition((Grid)sender);
ellipse.VerticalAlignment = VerticalAlignment.Top; // This will allow us to use top margin as Y coordinate.
ellipse.HorizontalAlignment = HorizontalAlignment.Left; // This will allow us to use left margin as X coordinate.
ellipse.Margin = new Thickness(position.X - ellipse.Width / 2, position.Y - ellipse.Height / 2, 0, 0); // Place the circle where user taps.
((Grid)sender).Children.Add(ellipse);
}
Note that the background of the main grid cannot be transparent, otherwise it won't fire Tapped event.
If you want, you can also animate the circle, change its size and color, make it disappear after some time...

Drawing a stretchable Line in WPF

I need to draw a line which stretch when its parent container stretch itself and it collapse when its parents collapse itself.
I develop a user control for this purpose and this control is placed in scroll viewer for some reasons.
I have binded the X2 Property of the line with the width of parent control. It solves the problem while stretching the parent control but while collapsing it is not letting the control decrease its size and scrollviewer adds a scrollbar for it.
Binding binding = new Binding("ActualWidth")
{
ElementName = Grid1.Name
};
Line mainLine = new Line
{
X1 = 0,
HorizontalAlignment=System.Windows.HorizontalAlignment.Stretch,
StrokeThickness = 2,
VerticalAlignment = VerticalAlignment.Center
};
BindingOperations.SetBinding(mainLine, Line.X2Property, binding);
Grid1.Children.Add(mainLine);
Grid.SetColumnSpan(mainLine, 4);

Try using a Rectangle to do that:
<Grid>
<Rectangle HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Fill="Black"
Height="2"/>
</Grid>