Related
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;
}
}
I have a dynamic list of strings with length "n" and need to draw a circle divided into "n" number of equal parts and distribute the name in parts.
I found this Xaml piece of code that generates 3 parts but I can't figure how to do it programmatically
<Image Width="500" Height="500" Name="image1">
<Image.Source>
<DrawingImage>
<DrawingImage.Drawing>
<DrawingGroup>
<GeometryDrawing Brush="Red">
<GeometryDrawing.Pen>
<Pen Brush="Black" />
</GeometryDrawing.Pen>
<GeometryDrawing.Geometry>
<PathGeometry>
<PathFigure StartPoint="100,100">
<PathFigure.Segments>
<LineSegment Point="100,0"/>
<ArcSegment Point="186.6,150" SweepDirection="Clockwise" Size="100,100"/>
<LineSegment Point="100,100"/>
</PathFigure.Segments>
</PathFigure>
</PathGeometry>
</GeometryDrawing.Geometry>
</GeometryDrawing>
<GeometryDrawing Brush="Blue">
<GeometryDrawing.Pen>
<Pen Brush="Black"/>
</GeometryDrawing.Pen>
<GeometryDrawing.Geometry>
<PathGeometry>
<PathFigure StartPoint="100,100">
<PathFigure.Segments>
<LineSegment Point="186.6,150"/>
<ArcSegment Point="13.4,150" SweepDirection="Clockwise" Size="100,100"/>
<LineSegment Point="100,100"/>
</PathFigure.Segments>
</PathFigure>
</PathGeometry>
</GeometryDrawing.Geometry>
</GeometryDrawing>
<GeometryDrawing Brush="Green">
<GeometryDrawing.Pen>
<Pen Brush="Black"/>
</GeometryDrawing.Pen>
<GeometryDrawing.Geometry>
<PathGeometry>
<PathFigure StartPoint="100,100">
<PathFigure.Segments>
<LineSegment Point="13.4,150"/>
<ArcSegment Point="100,0" SweepDirection="Clockwise" Size="100,100"/>
<LineSegment Point="100,100"/>
</PathFigure.Segments>
</PathFigure>
</PathGeometry>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>
</Image.Source>
</Image>
Is it even a good way? if not, what is the best way to generate what I need?
What really confuses me is how to calculate the ArcSegment value?
DrawingGroup drawingGroup = new DrawingGroup();
var lastPoint = new Point(100, 0);
for (int i = 0; i < 3; i++)
{
GeometryDrawing drawing = new GeometryDrawing();
drawing.Brush = (Brush)new BrushConverter().ConvertFrom("#FF0000"); // TODO: change color
drawing.Pen = new Pen
{
Brush = (Brush)new BrushConverter().ConvertFrom("#000000")
};
PathSegment lineSegment1 = new LineSegment(lastPoint, true);
lastPoint = new Point(200, 100); // TODO: calculate
PathSegment arcSegment = new ArcSegment(lastPoint, new Size(100, 100), 0, false, SweepDirection.Clockwise, true);
PathSegment lineSegment2 = new LineSegment(new Point(100, 100), true);
PathFigure figure = new PathFigure(new Point(100, 100), new PathSegment[] { lineSegment1, arcSegment, lineSegment2 }, false);
drawing.Geometry = new PathGeometry(new PathFigure[] { figure });
drawingGroup.Children.Add(drawing);
}
Thanks in advance.
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;
}
}
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.
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>