Creating Diagonal Pattern in WPF - c#

I want to create diagonal hatch pattern in WPF. I am using following XAML code to generate it:
<VisualBrush
x:Key="HatchBrushnew"
TileMode="Tile" Viewport="0,0,30,30"
ViewportUnits="Absolute" Viewbox="0,0,30,30"
ViewboxUnits="Absolute">
<VisualBrush.Visual>
<Canvas>
<Path Stroke="Gray" StrokeThickness="0.1cm" >
<Path.Data>
<LineGeometry StartPoint="0,0" EndPoint="30,30" />
</Path.Data>
</Path>
</Canvas>
</VisualBrush.Visual>
</VisualBrush>
But the after filling shape with this pattern, I am getting small gap between two lines. Can anyone suggest a way to avoid that small gap?

A DrawingBrush would be much simpler than a VisualBrush.
In addition to the central diagonal line, this one draws two additional lines (which may of course be shorter) to cover the top right and bottom left corners of the Brush tile:
<DrawingBrush x:Key="HatchBrush" TileMode="Tile"
Viewport="0,0,30,30" ViewportUnits="Absolute"
Viewbox="0,0,30,30" ViewboxUnits="Absolute">
<DrawingBrush.Drawing>
<GeometryDrawing>
<GeometryDrawing.Pen>
<Pen Brush="Black" Thickness="5"/>
</GeometryDrawing.Pen>
<GeometryDrawing.Geometry>
<Geometry>M0,0 L30,30 M15,-15 L45,15 M-15,15 L15,45</Geometry>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
As shown in the answer given by Balázs, you may also set the Brush's Transform property, and use e.g. a single vertical LineGeometry:
<DrawingBrush x:Key="HatchBrush" TileMode="Tile"
Viewport="0,0,30,30" ViewportUnits="Absolute"
Viewbox="0,0,30,30" ViewboxUnits="Absolute">
<DrawingBrush.Transform>
<RotateTransform Angle="45"/>
</DrawingBrush.Transform>
<DrawingBrush.Drawing>
<GeometryDrawing>
<GeometryDrawing.Pen>
<Pen Brush="Black" Thickness="5"/>
</GeometryDrawing.Pen>
<GeometryDrawing.Geometry>
<LineGeometry StartPoint="0,15" EndPoint="30,15"/>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>

You could use VisualBrush.Transform:
<VisualBrush x:Key="HatchBrushnew"
TileMode="Tile"
Viewport="0,0,30,30"
ViewportUnits="Absolute"
Viewbox="0,0,30,30"
ViewboxUnits="Absolute">
<VisualBrush.Transform>
<RotateTransform Angle="135" CenterX=".5" CenterY=".5" />
</VisualBrush.Transform>
<VisualBrush.Visual>
<Canvas>
<Path Stroke="Gray" StrokeThickness="0.1cm" >
<Path.Data>
<LineGeometry StartPoint="15,0" EndPoint="15,30" />
</Path.Data>
</Path>
</Canvas>
</VisualBrush.Visual>
</VisualBrush>
And the result is:
This appears a bit more sparse, you could play around with the values of VisualBrush.Viewport to fix that. Since we are rotating 135 degrees, the spacing is in fact sqrt(2) times larger than the original one, you could use it as a hint.

Here the coded variant to #Balázs solution (in VB)
Public ReadOnly Property fill As Brush
Get
Dim FillColor As Color
Dim HatchThickness As Double
Dim HatchAngle As Double
FillColor = Colors.Black
HatchThickness = 3
HatchAngle = 45
'
' https://stackoverflow.com/questions/42667566/creating-diagonal-pattern-in-wpf
' and
' https://learn.microsoft.com/en-us/dotnet/framework/wpf/graphics-multimedia/wpf-brushes-overview#paint-with-a-drawing
'
Dim myBrush As New DrawingBrush()
Dim myGeometryGroup As New GeometryGroup()
'
' add a horizontal line to the geometry group
'
myGeometryGroup.Children.Add(New LineGeometry(New Windows.Point(0, 0), New Windows.Point(10, 0)))
'
' draw geometry with transparent brush and pen as defined
'
Dim p As New Windows.Media.Pen
p.Brush = New SolidColorBrush(FillColor)
p.Thickness = HatchThickness
p.StartLineCap = PenLineCap.Square
p.EndLineCap = PenLineCap.Square
Dim myDrawing As New GeometryDrawing(Nothing, p, myGeometryGroup)
'
' apply the drawing to the brush
'
myBrush.Drawing = myDrawing
'
' in case, there is more than one line use a Drawing Group
'
'Dim myDrawingGroup As New DrawingGroup()
'myDrawingGroup.Children.Add(checkers)
'myBrush.Drawing = myDrawingGroup
' set viewbox and viewport
myBrush.Viewbox = New Windows.Rect(0, 0, 10, 10)
myBrush.ViewboxUnits = BrushMappingMode.Absolute
myBrush.Viewport = New Windows.Rect(0, 0, 10, 10)
myBrush.ViewportUnits = BrushMappingMode.Absolute
myBrush.TileMode = TileMode.Tile
myBrush.Stretch = Stretch.UniformToFill
' rotate
myBrush.Transform = New RotateTransform(HatchAngle)
Return myBrush
End Get
End Property
and in C#
public Brush fill
{
get
{
Color FillColor;
double HatchThickness;
double HatchAngle;
FillColor = Colors.Black;
HatchThickness = 3;
HatchAngle = 45;
//
// https://stackoverflow.com/questions/42667566/creating-diagonal-pattern-in-wpf
// and
// https://learn.microsoft.com/en-us/dotnet/framework/wpf/graphics-multimedia/wpf-brushes-overview#paint-with-a-drawing
//
DrawingBrush myBrush = new DrawingBrush();
GeometryGroup myGeometryGroup = new GeometryGroup();
//
// add a horizontal line to the geometry group
//
myGeometryGroup.Children.Add(new LineGeometry(new Windows.Point(0, 0), new Windows.Point(10, 0)));
//
// draw geometry with transparent brush and pen as defined
//
Windows.Media.Pen p = new Windows.Media.Pen();
p.Brush = new SolidColorBrush(FillColor);
p.Thickness = HatchThickness;
p.StartLineCap = PenLineCap.Square;
p.EndLineCap = PenLineCap.Square;
GeometryDrawing myDrawing = new GeometryDrawing(null/* TODO Change to default(_) if this is not a reference type */, p, myGeometryGroup);
//
// apply the drawing to the brush
//
myBrush.Drawing = myDrawing;
//
// in case, there is more than one line use a Drawing Group
//
// Dim myDrawingGroup As New DrawingGroup()
// myDrawingGroup.Children.Add(checkers)
// myBrush.Drawing = myDrawingGroup
// set viewbox and viewport
myBrush.Viewbox = new Windows.Rect(0, 0, 10, 10);
myBrush.ViewboxUnits = BrushMappingMode.Absolute;
myBrush.Viewport = new Windows.Rect(0, 0, 10, 10);
myBrush.ViewportUnits = BrushMappingMode.Absolute;
myBrush.TileMode = TileMode.Tile;
myBrush.Stretch = Stretch.UniformToFill;
// rotate
myBrush.Transform = new RotateTransform(HatchAngle);
return myBrush;
}
}

Related

Pivot point for positioning Path in C# WPF canvas

so i have this Path and i need to place it rotated by its center in a coordinate. so i have this static Path in .xaml
<Path Stroke="Black" RenderTransformOrigin="0.379,0.494" Canvas.Left="30" Canvas.Top="0">
<Path.RenderTransform>
<TransformGroup>
<RotateTransform Angle="-38.28"/>
<TranslateTransform X="-30" Y="-30"/>
</TransformGroup>
</Path.RenderTransform>
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="75,30">
<PathFigure.Segments>
<PathSegmentCollection>
<LineSegment Point="0,0"/>
<LineSegment Point="12,30"/>
<LineSegment Point="0, 60"/>
<LineSegment Point="75, 30"/>
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
</Path>
but then i create it from code the same way and it just doesn't wanna center, it just starts rotating around the point
{
PathGeometry pathGeom = new PathGeometry();
Sprite = new Path
{
Data = pathGeom,
RenderTransformOrigin = new Point(0.379, 0.5),
Stroke = new SolidColorBrush(Color.FromArgb(120, 0, 0, 0)),
Fill = new SolidColorBrush(Color.FromArgb(120, 30, 200, 7))
};
var pf = new PathFigure { StartPoint = new Point(75, 30) };
pf.Segments.Add(new LineSegment { Point = new Point(0, 0) });
pf.Segments.Add(new LineSegment { Point = new Point(12, 30) });
pf.Segments.Add(new LineSegment { Point = new Point(0, 60) });
pf.Segments.Add(new LineSegment { Point = new Point(75, 30) });
pathGeom.Figures.Add(pf);
UpdateRotation();
canvas.Children.Add(Sprite);
}
private void UpdateRotation()
{
Sprite.RenderTransform = new TransformGroup
{
Children = new TransformCollection {
new RotateTransform(Road.Angle + (Direction == -1 ? 90 : 0), -30, -30) , <-- i tried doing this
new TranslateTransform(-30, -30), <-- and this separately, but they both didn't work
}
};
Canvas.SetLeft(Sprite, Loc.X);
Canvas.SetTop(Sprite, Loc.Y);
}
here's what the static path looks like:what it looks like
You may simplify your drawing by defining the pivot point as origin - with coordinates (0,0). There is no need for a TranslateTransform or a centered RotateTransform. You would also not have to create new transforms on each direction update. Just set the Angle property of the existing RotateTransform.
private Path Sprite { get; }
public MainWindow()
{
InitializeComponent();
Sprite = new Path
{
Data = Geometry.Parse("M0,0 L-12,-30 63,0 -12,30Z"),
// or Data = Geometry.Parse("M-13,0 L-25,-30 50,0 -25,30Z"),
// or whatever corresponds to the original RenderTransformOrigin
RenderTransform = new RotateTransform(),
Stroke = new SolidColorBrush(Color.FromArgb(120, 0, 0, 0)),
Fill = new SolidColorBrush(Color.FromArgb(120, 30, 200, 7))
};
canvas.Children.Add(Sprite);
UpdatePosition(100, 100, 45); // for example
}
private void UpdatePosition(double x, double y, double direction)
{
((RotateTransform)Sprite.RenderTransform).Angle = direction;
Canvas.SetLeft(Sprite, x);
Canvas.SetTop(Sprite, y);
}

How do I fill a rectangle on canvas with a hatchbrush pattern? [duplicate]

I want to create diagonal hatch pattern in WPF. I am using following XAML code to generate it:
<VisualBrush
x:Key="HatchBrushnew"
TileMode="Tile" Viewport="0,0,30,30"
ViewportUnits="Absolute" Viewbox="0,0,30,30"
ViewboxUnits="Absolute">
<VisualBrush.Visual>
<Canvas>
<Path Stroke="Gray" StrokeThickness="0.1cm" >
<Path.Data>
<LineGeometry StartPoint="0,0" EndPoint="30,30" />
</Path.Data>
</Path>
</Canvas>
</VisualBrush.Visual>
</VisualBrush>
But the after filling shape with this pattern, I am getting small gap between two lines. Can anyone suggest a way to avoid that small gap?
A DrawingBrush would be much simpler than a VisualBrush.
In addition to the central diagonal line, this one draws two additional lines (which may of course be shorter) to cover the top right and bottom left corners of the Brush tile:
<DrawingBrush x:Key="HatchBrush" TileMode="Tile"
Viewport="0,0,30,30" ViewportUnits="Absolute"
Viewbox="0,0,30,30" ViewboxUnits="Absolute">
<DrawingBrush.Drawing>
<GeometryDrawing>
<GeometryDrawing.Pen>
<Pen Brush="Black" Thickness="5"/>
</GeometryDrawing.Pen>
<GeometryDrawing.Geometry>
<Geometry>M0,0 L30,30 M15,-15 L45,15 M-15,15 L15,45</Geometry>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
As shown in the answer given by Balázs, you may also set the Brush's Transform property, and use e.g. a single vertical LineGeometry:
<DrawingBrush x:Key="HatchBrush" TileMode="Tile"
Viewport="0,0,30,30" ViewportUnits="Absolute"
Viewbox="0,0,30,30" ViewboxUnits="Absolute">
<DrawingBrush.Transform>
<RotateTransform Angle="45"/>
</DrawingBrush.Transform>
<DrawingBrush.Drawing>
<GeometryDrawing>
<GeometryDrawing.Pen>
<Pen Brush="Black" Thickness="5"/>
</GeometryDrawing.Pen>
<GeometryDrawing.Geometry>
<LineGeometry StartPoint="0,15" EndPoint="30,15"/>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
You could use VisualBrush.Transform:
<VisualBrush x:Key="HatchBrushnew"
TileMode="Tile"
Viewport="0,0,30,30"
ViewportUnits="Absolute"
Viewbox="0,0,30,30"
ViewboxUnits="Absolute">
<VisualBrush.Transform>
<RotateTransform Angle="135" CenterX=".5" CenterY=".5" />
</VisualBrush.Transform>
<VisualBrush.Visual>
<Canvas>
<Path Stroke="Gray" StrokeThickness="0.1cm" >
<Path.Data>
<LineGeometry StartPoint="15,0" EndPoint="15,30" />
</Path.Data>
</Path>
</Canvas>
</VisualBrush.Visual>
</VisualBrush>
And the result is:
This appears a bit more sparse, you could play around with the values of VisualBrush.Viewport to fix that. Since we are rotating 135 degrees, the spacing is in fact sqrt(2) times larger than the original one, you could use it as a hint.
Here the coded variant to #Balázs solution (in VB)
Public ReadOnly Property fill As Brush
Get
Dim FillColor As Color
Dim HatchThickness As Double
Dim HatchAngle As Double
FillColor = Colors.Black
HatchThickness = 3
HatchAngle = 45
'
' https://stackoverflow.com/questions/42667566/creating-diagonal-pattern-in-wpf
' and
' https://learn.microsoft.com/en-us/dotnet/framework/wpf/graphics-multimedia/wpf-brushes-overview#paint-with-a-drawing
'
Dim myBrush As New DrawingBrush()
Dim myGeometryGroup As New GeometryGroup()
'
' add a horizontal line to the geometry group
'
myGeometryGroup.Children.Add(New LineGeometry(New Windows.Point(0, 0), New Windows.Point(10, 0)))
'
' draw geometry with transparent brush and pen as defined
'
Dim p As New Windows.Media.Pen
p.Brush = New SolidColorBrush(FillColor)
p.Thickness = HatchThickness
p.StartLineCap = PenLineCap.Square
p.EndLineCap = PenLineCap.Square
Dim myDrawing As New GeometryDrawing(Nothing, p, myGeometryGroup)
'
' apply the drawing to the brush
'
myBrush.Drawing = myDrawing
'
' in case, there is more than one line use a Drawing Group
'
'Dim myDrawingGroup As New DrawingGroup()
'myDrawingGroup.Children.Add(checkers)
'myBrush.Drawing = myDrawingGroup
' set viewbox and viewport
myBrush.Viewbox = New Windows.Rect(0, 0, 10, 10)
myBrush.ViewboxUnits = BrushMappingMode.Absolute
myBrush.Viewport = New Windows.Rect(0, 0, 10, 10)
myBrush.ViewportUnits = BrushMappingMode.Absolute
myBrush.TileMode = TileMode.Tile
myBrush.Stretch = Stretch.UniformToFill
' rotate
myBrush.Transform = New RotateTransform(HatchAngle)
Return myBrush
End Get
End Property
and in C#
public Brush fill
{
get
{
Color FillColor;
double HatchThickness;
double HatchAngle;
FillColor = Colors.Black;
HatchThickness = 3;
HatchAngle = 45;
//
// https://stackoverflow.com/questions/42667566/creating-diagonal-pattern-in-wpf
// and
// https://learn.microsoft.com/en-us/dotnet/framework/wpf/graphics-multimedia/wpf-brushes-overview#paint-with-a-drawing
//
DrawingBrush myBrush = new DrawingBrush();
GeometryGroup myGeometryGroup = new GeometryGroup();
//
// add a horizontal line to the geometry group
//
myGeometryGroup.Children.Add(new LineGeometry(new Windows.Point(0, 0), new Windows.Point(10, 0)));
//
// draw geometry with transparent brush and pen as defined
//
Windows.Media.Pen p = new Windows.Media.Pen();
p.Brush = new SolidColorBrush(FillColor);
p.Thickness = HatchThickness;
p.StartLineCap = PenLineCap.Square;
p.EndLineCap = PenLineCap.Square;
GeometryDrawing myDrawing = new GeometryDrawing(null/* TODO Change to default(_) if this is not a reference type */, p, myGeometryGroup);
//
// apply the drawing to the brush
//
myBrush.Drawing = myDrawing;
//
// in case, there is more than one line use a Drawing Group
//
// Dim myDrawingGroup As New DrawingGroup()
// myDrawingGroup.Children.Add(checkers)
// myBrush.Drawing = myDrawingGroup
// set viewbox and viewport
myBrush.Viewbox = new Windows.Rect(0, 0, 10, 10);
myBrush.ViewboxUnits = BrushMappingMode.Absolute;
myBrush.Viewport = new Windows.Rect(0, 0, 10, 10);
myBrush.ViewportUnits = BrushMappingMode.Absolute;
myBrush.TileMode = TileMode.Tile;
myBrush.Stretch = Stretch.UniformToFill;
// rotate
myBrush.Transform = new RotateTransform(HatchAngle);
return myBrush;
}
}

Convert XAML code to C# code

How can I convert this code part from XAML to C# code?
<ComboBoxItem x:Name="cmbItemDashDot1">
<Viewbox>
<Image Height="18" Width="70">
<Image.Source>
<DrawingImage>
<DrawingImage.Drawing>
<GeometryDrawing Brush="Black">
<GeometryDrawing.Geometry>
<LineGeometry StartPoint="0,9" EndPoint="38,9" />
</GeometryDrawing.Geometry>
<GeometryDrawing.Pen>
<Pen Brush="Black" Thickness="1" DashStyle="{x:Static DashStyles.DashDot}"/>
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingImage.Drawing>
</DrawingImage>
</Image.Source>
</Image>
</Viewbox>
</ComboBoxItem>
I can not find analogies for some elements.
Or How can I draw a line in ComboBoxItem programmatically?
Try this code
Image img = new Image();
GeometryDrawing gDrwing = new GeometryDrawing();
gDrwing.Brush = Brushes.Black;
LineGeometry lineGeo = new LineGeometry();
lineGeo.StartPoint = new Point(0, 9);
lineGeo.EndPoint = new Point(38, 9);
Pen pen = new Pen();
pen.Brush = Brushes.Black;
pen.Thickness = 1;
pen.DashStyle = DashStyles.DashDot;
gDrwing.Geometry = lineGeo;
gDrwing.Pen = pen;
DrawingImage geometryImage = new DrawingImage(gDrwing);
img.Source = geometryImage;
Viewbox vb = new Viewbox();
vb.Child = img;
comboBox1.Items.Add(vb);

Converting a Yin Yang in XAML into C#

I'm trying to draw a Yin Yang symbol using C# code because (to me) it feels like I have better control over what I'm doing and it also feels easier to manipulate it.
I did succeed in drawing the symbol using XAML:
<Canvas Margin="50,50,900,1210" Grid.ColumnSpan="2">
<Path Stroke="Black" Canvas.Top="52" Canvas.Left="76.248" Height="244" Stretch="Uniform" Width="344.504" Fill="White">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="50,0" IsFilled="True">
<ArcSegment IsLargeArc="True" Size="50, 50" Point="50, 100" SweepDirection="Clockwise" />
<ArcSegment IsLargeArc="True" Size="25, 25" Point="50, 50" SweepDirection="Clockwise" />
<ArcSegment IsLargeArc="True" Size="25, 25" Point="50, 0" SweepDirection="Counterclockwise" />
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
<Path Stroke="Black" Canvas.Top="52" Canvas.Left="14.748" Height="244" Stretch="Uniform" Width="344.504" Fill="Black">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="50,0" IsFilled="True">
<ArcSegment IsLargeArc="True" Size="50, 50" Point="50, 100" SweepDirection="Counterclockwise" />
<ArcSegment IsLargeArc="True" Size="25, 25" Point="50, 50" SweepDirection="Clockwise" />
<ArcSegment IsLargeArc="True" Size="25, 25" Point="50, 0" SweepDirection="Counterclockwise" />
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
<Path Stroke="Black" Canvas.Top="96" Canvas.Left="194" Height="50" Stretch="Uniform" Width="50" Fill="White" RenderTransformOrigin="1.126,-0.19">
<Path.Data>
<EllipseGeometry Center="10, 10" RadiusX="5" RadiusY=" 5">
<EllipseGeometry.Transform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform CenterX="1" CenterY="10"/>
<RotateTransform CenterX="1" CenterY="10"/>
<TranslateTransform/>
</TransformGroup>
</EllipseGeometry.Transform>
</EllipseGeometry>
</Path.Data>
</Path>
<Path Stroke="Black" Canvas.Top="210" Canvas.Left="194" Height="50" Stretch="Uniform" Width="50" Fill="Black" RenderTransformOrigin="1.126,-0.19">
<Path.Data>
<EllipseGeometry Center="10, 10" RadiusX="5" RadiusY=" 5">
<EllipseGeometry.Transform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform CenterX="1" CenterY="10"/>
<RotateTransform CenterX="1" CenterY="10"/>
<TranslateTransform/>
</TransformGroup>
</EllipseGeometry.Transform>
</EllipseGeometry>
</Path.Data>
</Path>
</Canvas>
but when I try to draw it using code, I'm so confused as to why I'm not getting anything.
Path YinYangPathLeft=new Path();
YinYangPathLeft.Stroke=Brushes.Black;
YinYangPathLeft.StrokeThickness=5;
Path YinYangPath = new Path();
YinYangPath.Stroke = Brushes.Black;
YinYangPath.StrokeThickness = 5;
Point topPoint=new Point(50,0);
Point middlePoint = new Point(50, 50);
Point bottomPoint = new Point(50, 100);
//point start point, size, rotation angle, bool is large arc, sweep direction, bool isstroked
//left side of symbol
ArcSegment arcSegment1 = new ArcSegment();
ArcSegment arcSegment2 = new ArcSegment();
ArcSegment arcSegment3 = new ArcSegment();
//right side of symbol
ArcSegment arcSegment4 = new ArcSegment();
ArcSegment arcSegment5 = new ArcSegment();
ArcSegment arcSegment6 = new ArcSegment();
//start of the segments for Yin Yang
arcSegment1.Point = new Point(bottomPoint.X, bottomPoint.Y);
arcSegment1.Size = new Size(100, 100);
arcSegment1.SweepDirection = SweepDirection.Counterclockwise;
arcSegment1.IsLargeArc = true;
arcSegment2.Point = new Point(middlePoint.X, middlePoint.Y);
arcSegment2.Size = new Size(50, 50);
arcSegment2.SweepDirection = SweepDirection.Clockwise;
arcSegment2.IsLargeArc = true;
arcSegment3.Point = new Point(topPoint.X, topPoint.Y);
arcSegment3.Size=new Size(50,50);
arcSegment3.SweepDirection=SweepDirection.Counterclockwise;
arcSegment3.IsLargeArc=true;
arcSegment4.Point = new Point(bottomPoint.X, bottomPoint.Y);
arcSegment4.Size = new Size(50, 50);
arcSegment4.SweepDirection = SweepDirection.Clockwise;
arcSegment4.IsLargeArc = true;
arcSegment5.Point = new Point(middlePoint.X, middlePoint.Y);
arcSegment5.Size = new Size(50, 50);
arcSegment5.SweepDirection = SweepDirection.Counterclockwise;
arcSegment5.IsLargeArc = true;
arcSegment6.Point = new Point(topPoint.X, topPoint.Y);
arcSegment6.Size = new Size(100, 100);
arcSegment6.SweepDirection = SweepDirection.Counterclockwise;
arcSegment6.IsLargeArc = true;
//End of segments for Yin Yang
PathFigure YinYangFigureLeft=new PathFigure();
YinYangFigureLeft.StartPoint = topPoint;
YinYangFigureLeft.IsClosed = true;
YinYangFigureLeft.Segments.Add(arcSegment1);
YinYangFigureLeft.Segments.Add(arcSegment2);
YinYangFigureLeft.Segments.Add(arcSegment3);
PathGeometry YinYangGeometryLeft=new PathGeometry();
//YinYangGeometryLeft.AddGeometry(YinYangGeometryLeft);
YinYangGeometryLeft.Figures.Add(YinYangFigureLeft);
PathFigure YinYangFigureRight = new PathFigure();
YinYangFigureRight.StartPoint = topPoint;
YinYangFigureRight.IsClosed = true;
YinYangFigureRight.Segments.Add(arcSegment4);
YinYangFigureRight.Segments.Add(arcSegment5);
YinYangFigureRight.Segments.Add(arcSegment6);
PathGeometry YinYangGeometryRight = new PathGeometry();
//YinYangGeometryRight.AddGeometry(YinYangGeometryRight);
YinYangGeometryRight.Figures.Add(YinYangFigureRight);
GeometryGroup YinYangGeometryGroup=new GeometryGroup();
YinYangGeometryGroup.Children.Add(YinYangGeometryLeft);
YinYangGeometryGroup.Children.Add(YinYangGeometryRight);
//YinYangPath.Data = YinYangGeometryGroup;
GeometryDrawing YinYangGeometryDrawing = new GeometryDrawing();
YinYangGeometryDrawing.Brush = Brushes.Black;
YinYangGeometryDrawing.Pen = new Pen(Brushes.Yellow, 2);
YinYangGeometryDrawing.Geometry = YinYangGeometryGroup;
//DrawingGroup= Yin+Yang
DrawingGroup YinYangDrawingGroup = new DrawingGroup();
YinYangDrawingGroup.Children.Add(YinYangGeometryDrawing);
//DrawingImage YinYangDrawingImage = new DrawingImage(YinYangGeometryDrawing);
DrawingImage YinYangDrawingImage = new DrawingImage(YinYangDrawingGroup);
YinYangTest.Source = YinYangDrawingImage;
I did also try using a Canvas and a StackPanel but still came up empty:
/*
Canvas YinYangCanvas = new Canvas();
YinYangCanvas.Height = 200;
YinYangCanvas.Children.Add(YinYangPath);
this.Content = YinYangCanvas;
*/
/*
StackPanel YYSP = new StackPanel();
YYSP.Children.Add(YinYangPath);
this.Content = YYSP;
*/
Out of curiosity towards what you're trying to accomplish, I figured I would share how I would do it to maybe lend on the idea of how you might do it a bit easier your way also.
<Canvas Height="120" Width="120">
<Path StrokeThickness="1.0" Stroke="Black" Fill="White"
Data="F1 M 89.591,29.017 C 89.591,52.492 72.658,59.419 56.110,59.419 C 41.871,59.419 30.711,75.583 30.711,87.512 C 30.711,102.873 41.258,112.244 51.418,117.710 C 54.023,118.063 56.679,118.261 59.381,118.261 C 91.899,118.261 118.261,91.899 118.261,59.381 C 118.261,29.019 95.279,4.033 65.764,0.851 C 82.748,7.431 89.591,19.831 89.591,29.017 Z"/>
<Path Fill="Black"
Data="F1 M 0.500,59.381 C 0.500,89.196 22.668,113.820 51.418,117.710 C 41.258,112.244 30.711,102.873 30.711,87.512 C 30.711,75.583 41.871,59.419 56.110,59.419 C 72.658,59.419 89.591,52.492 89.591,29.017 C 89.591,19.831 82.748,7.431 65.764,0.851 C 63.667,0.624 61.538,0.500 59.381,0.500 C 26.862,0.500 0.500,26.861 0.500,59.381 Z"/>
<Path Fill="White"
Data="F1 M 53.233,30.594 C 53.233,27.065 56.094,24.206 59.621,24.206 C 63.148,24.206 66.009,27.065 66.009,30.594 C 66.009,34.122 63.148,36.981 59.621,36.981 C 56.094,36.981 53.233,34.122 53.233,30.594 Z"/>
<Path Fill="Black"
Data="F1 M 52.962,88.467 C 52.962,84.939 55.822,82.080 59.350,82.080 C 62.877,82.080 65.737,84.939 65.737,88.467 C 65.737,91.996 62.877,94.855 59.350,94.855 C 55.822,94.855 52.962,91.996 52.962,88.467 Z"/>
</Canvas>
Alternatively if you just wanted to use arc segments, I'd start with one ellipse, and draw just one side on top of it with arc segment. As for why your code doesn't produce anything, I'd ask if you get any kind of errors and where you have PaintEventArgs or CreateGraphics method or a Graphics Object etc which would give a place to produce it.

Displaying Image in Circle in Windows Phone

I am creating a WP (7.1+8) app, that requires me to display images inside a circle ( as in Google+ ).
I found a solution that uses a GradientBrush to accomplish the task via following code:-
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;
I want to know that what will be the performance impact if i needed to do this on large number of images, say 50.
Use clipping to display partial area of a control.
<Image Source="YouImage.jpg">
<Image.Clip>
<EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50" />
</Image.Clip>
</Image>
Change the Center, RadiusX and RadiusY to your convenience.
Use the following code snippet for your requirement.
<Ellipse Height="300" Width="300">
<Ellipse.Fill>
<ImageBrush ImageSource="images/WmDev.jpg" AlignmentX="Center" AlignmentY="Center" />
</Ellipse.Fill>
</Ellipse>
Hope it Helps.
This question is already answered still if you want to see it in more detail then you could have a look here
The XAML solution will be,
<Image Source=”{Binding Converter={StaticResource ContactPictureConverter}}” Width=”48″ Height=”48″ Stretch=”Fill”
>
<Image.Clip>
<EllipseGeometry Center=”24,24″ RadiusX=”24″ RadiusY=”24″ />
</Image.Clip>
</Image>

Categories

Resources