I have a descendent of FrameworkElement with the following methods:
class HexVisual : FrameworkElement {
/* ... */
private PathGeometry GetHexGeometry(Hexagon Hexagon) {
var geometry = default(PathGeometry);
if(mHexGeometries.TryGetValue(Hexagon, out geometry)){
return geometry;
}
PathFigure figure = new PathFigure();
int i = 0;
foreach (Point point in Hexagon.Polygon.Points) {
if (i == 0) {
figure.StartPoint = point;
i++;
continue;
}
figure.Segments.Add(new LineSegment(point, true));
}
geometry = new PathGeometry();
geometry.Figures.Add(figure);
geometry.FillRule = FillRule.Nonzero;
return geometry;
}
private DrawingVisual CreateHexVisual() {
DrawingVisual visual = new DrawingVisual();
using (DrawingContext context = visual.RenderOpen()) {
context.DrawGeometry(BorderBrush, BorderPen, mHexGeometry);
}
return visual;
}
}
When I add this visual to the Canvas, I am getting a filled hexagon rather than just the stroke (border).
What am I doing wrong here that is causing the geometry to fill?
Not sure if I really understand your question, because you can't "add visuals to a Canvas", but maybe you just set BorderBrush to null or Transparent, or replace
context.DrawGeometry(BorderBrush, BorderPen, mHexGeometry);
with
context.DrawGeometry(null, BorderPen, mHexGeometry);
Related
I'm wanting to render a bezier curve that will contain many hundreds of points. This curve doesn't need to be hit testable or interactable in any way, so I thought I'd try a Visual as that seems to be the most light weight.
Using the code below though, why is it causing the rest of the application to run slowly? for example, window resizing is very slow.
I'm just looking for the most efficient way to render curves without any of the input handling functionality (even with this example, you can hook up to the MouseOver event and it will only fire when your cursor is actually over the lines, so it looks like I'm still paying for that (setting IsHitTestVisiable doesn't seem to help with the performance))
public class VisualHost : FrameworkElement
{
VisualCollection _children;
public VisualHost()
{
_children = new VisualCollection(this);
_children.Add(CreateDrawingVisualRectangle());
}
DrawingVisual CreateDrawingVisualRectangle()
{
var drawingVisual = new DrawingVisual();
var drawingContext = drawingVisual.RenderOpen();
var geometry = new StreamGeometry();
using (var ctx = geometry.Open())
{
ctx.BeginFigure(new Point(0, 0), false, false);
var r = new Random();
for (int i = 0; i < 500; ++i)
{
var p1 = new Point(r.Next(0, 1000), r.Next(0, 1000));
var p2 = new Point(r.Next(0, 1000), r.Next(0, 1000));
ctx.QuadraticBezierTo(p1, p2, true, false);
}
}
geometry.Freeze();
drawingContext.DrawGeometry(null, new Pen(Brushes.Red, 1), geometry);
drawingContext.Close();
return drawingVisual;
}
protected override int VisualChildrenCount
{
get { return _children.Count; }
}
protected override Visual GetVisualChild(int index)
{
if (index < 0 || index >= _children.Count)
{
throw new ArgumentOutOfRangeException();
}
return _children[index];
}
}
public partial class MainWindow : Window
{
public MainWindow()
{
Content = new VisualHost();
}
}
You could use a BitmapCache to create a bitmap that caches the rendering of the DrawingVisual...so that when your FrameworkElement is invalided (due to the sizing) the cached bitmap is used to provide the "visual bits", instead of the slower route of having to render the drawing instructions inside of the "DrawingVisual" again (i.e. what was described by StreamGeometry in the drawingcontext).
DrawingVisual CreateDrawingVisualRectangle()
{
var drawingVisual = new DrawingVisual();
var drawingContext = drawingVisual.RenderOpen();
var geometry = new StreamGeometry();
using (var ctx = geometry.Open())
{
ctx.BeginFigure(new Point(0, 0), false, false);
var r = new Random();
for (int i = 0; i < 500; ++i)
{
var p1 = new Point(r.Next(0, 1000), r.Next(0, 1000));
var p2 = new Point(r.Next(0, 1000), r.Next(0, 1000));
ctx.QuadraticBezierTo(p1, p2, true, false);
}
}
geometry.Freeze();
drawingContext.DrawGeometry(null, new Pen(Brushes.Red, 1), geometry);
drawingContext.Close();
drawingVisual.CacheMode = new BitmapCache();
return drawingVisual;
}
I have Image and i have created visual brush for image when i move object form one point to another. but I don't see image on visual brush. if you see my rectangle, it suppose to show image.
See image : http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/e8833983-3d73-45e1-8af1-3bc27846441d
here is code:
internal static VisualBrush GetVisualBrushByObject(LabelObject obj, Rect objectRect, int quality, FlowDirection flowdirection)
{
DrawingVisual drawingVisual = new DrawingVisual();
DrawingContext drawingContext = drawingVisual.RenderOpen();
Rect objectbounds = new Rect(0, 0, objectRect.Width, objectRect.Height);
if (obj is TextObject)
{
TextObject txtObj = obj.Clone() as TextObject;
DymoTextBlock txtBlock = txtObj.DymoTextBlock as DymoTextBlock;
objectbounds = new Rect(txtBlock.GetNaturalSize(txtBlock.GetFormattedText(flowdirection)));
}
if (obj is ImageObject)
{
drawingContext.DrawImage(((ImageObject)obj).Image, objectbounds);
}
LabelObject.RenderParams lrp = new LabelObject.RenderParams(drawingContext, new Common.Resolution(96, 96), false, objectbounds, flowdirection);
obj.Render(lrp);
VisualBrush vBrush = new VisualBrush();
vBrush.TileMode = TileMode.None;
vBrush.Stretch = Stretch.Fill;
if (obj is ImageObject)
{
vBrush.Opacity = 0.4;
}
drawingContext.Close();
vBrush.Visual = drawingVisual;
return vBrush;
}
pls help me
Thanks
If you are moving your image with Transforms(TranslateTransform), then you have to undo it for the visual brush phase.
I have an image editor I'm developing in silverlight which has multiple text and image elements on one canvas, that are draggable etc. I need feedback for the user to highlight the selected element when it is clicked on by the user and highlight a different element instead if another is clicked. I think I should do this with a dashed border around the element, but I don't know if it's possible.
Below is my code relating to the elements -
Project.cs
namespace ImageEditor.Client.BLL
{
public class Project : INotifyPropertyChanged
{
private int numberOfElements;
#region Properties
private ObservableCollection<FrameworkElement> elements;
public ObservableCollection<FrameworkElement> Elements
{
get { return elements; }
set
{
elements = value;
NotifyPropertyChanged("Elements");
}
}
private FrameworkElement selectedElement;
public FrameworkElement SelectedElement
{
get { return selectedElement; }
set
{
selectedElement = value;
NotifyPropertyChanged("SelectedElement");
}
}
private TextBlock selectedTextElement;
public TextBlock SelectedTextElement
{
get { return selectedTextElement; }
set
{
selectedTextElement = value;
NotifyPropertyChanged("SelectedTextElement");
}
}
private Image selectedImageElement;
public Image SelectedImageElement
{
get { return selectedImageElement; }
set
{
selectedImageElement = value;
NotifyPropertyChanged("SelectedImageElement");
}
}
#endregion
#region Methods
private void AddTextElement(object param)
{
TextBlock textBlock = new TextBlock();
textBlock.Text = "New Text";
textBlock.Foreground = new SolidColorBrush(Colors.Gray);
textBlock.FontSize = 25;
textBlock.FontFamily = new FontFamily("Arial");
textBlock.Cursor = Cursors.Hand;
textBlock.Tag = null;
AddDraggingBehavior(textBlock);
textBlock.MouseLeftButtonUp += element_MouseLeftButtonUp;
this.Elements.Add(textBlock);
numberOfElements++;
this.SelectedElement = textBlock;
this.selectedTextElement = textBlock;
}
private BitmapImage GetImageFromLocalMachine(out bool? success, out string fileName)
{
OpenFileDialog dialog = new OpenFileDialog()
{
Filter = "Image Files (*.bmp;*.jpg;*.gif;*.png;)|*.bmp;*.jpg;*.gif;*.png;",
Multiselect = false
};
success = dialog.ShowDialog();
if (success == true)
{
fileName = dialog.File.Name;
FileStream stream = dialog.File.OpenRead();
byte[] data;
BitmapImage imageSource = new BitmapImage();
using (FileStream fileStream = stream)
{
imageSource.SetSource(fileStream);
data = new byte[fileStream.Length];
fileStream.Read(data, 0, data.Length);
fileStream.Flush();
fileStream.Close();
}
return imageSource;
}
else
{
fileName = string.Empty;
return new BitmapImage();
}
}
private void AddImageElement(object param)
{
bool? gotImage;
string fileName;
BitmapImage imageSource = GetImageFromLocalMachine(out gotImage, out fileName);
if (gotImage == true)
{
Image image = new Image();
image.Name = fileName;
image.Source = imageSource;
image.Height = imageSource.PixelHeight;
image.Width = imageSource.PixelWidth;
image.MaxHeight = imageSource.PixelHeight;
image.MaxWidth = imageSource.PixelWidth;
image.Cursor = Cursors.Hand;
image.Tag = null;
AddDraggingBehavior(image);
image.MouseLeftButtonUp += element_MouseLeftButtonUp;
this.Elements.Add(image);
numberOfElements++;
this.SelectedElement = image;
this.SelectedImageElement = image;
}
}
private void OrderElements()
{
var elList = (from element in this.Elements
orderby element.GetValue(Canvas.ZIndexProperty)
select element).ToList<FrameworkElement>();
for (int i = 0; i < elList.Count; i++)
{
FrameworkElement fe = elList[i];
fe.SetValue(Canvas.ZIndexProperty, i);
}
this.Elements = new ObservableCollection<FrameworkElement>(elList);
}
public void element_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
this.SelectedElement = sender as FrameworkElement;
if (sender is TextBlock)
{
this.SelectedTextElement = sender as TextBlock;
FadeOut(this.SelectedTextElement);
}
else if (sender is Image)
{
this.SelectedImageElement = sender as Image;
FadeOut(this.SelectedImageElement);
}
}
#endregion
More than needed there but you get a good idea of how it all works from that. How might I go about it? I'm still pretty new to silverlight
Edit:
This is my start attempt at a DashBorder Method, wherein I'm trying to make a rectangle the same dimensions as the selected element which will go around the element
public static void DashBorder(FrameworkElement element)
{
Rectangle rect = new Rectangle();
rect.Stroke = new SolidColorBrush(Colors.Black);
rect.Width=element.Width;
rect.Height=element.Height;
rect.StrokeDashArray = new DoubleCollection() { 2, 2 };
}
It appears to do nothing and isn't what I want to do anyway. Is there no way to make a dash border on a FrameworkElement directly?
I don't know how, but google does.
You can use the StrokeDashArray to achieve the desired effect,
example:
<Rectangle Canvas.Left="10" Canvas.Top="10" Width="100" Height="100"
Stroke="Black" StrokeDashArray="10, 2"/>
The first number in StrokeDashArray is the length of the dash, the
second number is the length of the gap. You can repeat the dash gap
pairs to generate different patterns.
Edit:
To do this in code create a rectangle and set it's StrokeDashArray property like this (code untested):
Rectangle rect = new Rectangle();
rect.StrokeThickness = 1;
double[] dashArray = new double[2];
dashArray[0] = 2;
dashArray[1] = 4;
rect.StrokeDashArray = dashArray;
There is an very old WPF application of Hyper Tree - http://blogs.msdn.com/b/llobo/archive/2007/10/31/mindmap-app-using-hyperbolic-tree.aspx.
The source code can be found at codeplax.com -
http://hypertree.codeplex.com/releases/view/11524
I wanted to use this tree control in my silverlight application. Now the issue is that i am new to silverlight, and the code is using some WPF specific things.
Please suggest me to solve my problem.
Thanks in advance.
Abhinav
Update:
things like
FrameworkPropertyMetadata and FrameworkPropertyMetadataOptions, InvalidateVisual(), OnRender override, child UIElements.
Code Added:
public class SmartBorder : Decorator
{
#region Dependency Properties
public static readonly DependencyProperty GlowBrushProperty =
DependencyProperty.Register("GlowBrush", typeof(Brush), typeof(SmartBorder), new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.AffectsRender));
......
#region Dependency Property backing CLR properties
......
#endregion
// if the button is pressed, this fires
private static void OnRenderIsPressedChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
{
SmartBorder border = o as SmartBorder;
if (border != null)
{
if ((bool)e.NewValue == true)
{
border.BorderBrush = Brushes.Transparent;
border.BorderWidth = 2;
}
else
{
border.BorderBrush = Brushes.Red;
border.BorderWidth = 2;
}
border.InvalidateVisual();
}
}
// if the mouse is over the control, this fires
private static void OnRenderIsMouseOverChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
{
SmartBorder border = o as SmartBorder;
if (border != null)
{
border.InvalidateVisual();
}
}
// a series of methods which all make getting the default or currently selected brush easier
protected override void OnRender(DrawingContext dc)
{
Rect rc = new Rect(0, 0, this.ActualWidth, this.ActualHeight);
LinearGradientBrush gradientOverlay = GetGradientOverlay();
Brush glowBrush = GetGlowBrush();
Brush backBrush = GetBackgroundBrush();
Brush borderBrush = GetBorderBrush();
Pen borderPen = new Pen(borderBrush, BorderWidth);
double cornerRadiusCache = CornerRadius;
// draw the highlight as necessary
if (RenderIsMouseOver)
{
Rect rcGlow = rc;
double glowMove = BorderWidth * 2;
rcGlow.Inflate(glowMove, glowMove);
glowMove = 0;
rcGlow.Offset(new Vector(glowMove, glowMove));
dc.DrawRoundedRectangle(GetOuterGlowBrush(), null, rcGlow, cornerRadiusCache, cornerRadiusCache);
}
// we want to clip anything that might errantly draw outside of the smart border control
dc.PushClip(new RectangleGeometry(rc, cornerRadiusCache, cornerRadiusCache));
dc.DrawRoundedRectangle(backBrush, borderPen, rc, cornerRadiusCache, cornerRadiusCache);
dc.DrawRoundedRectangle(gradientOverlay, borderPen, rc, cornerRadiusCache, cornerRadiusCache);
if (!RenderIsPressed)
{
double clipBorderSize = BorderWidth * -4.0;
Rect rcClip = rc;
rcClip.Offset(clipBorderSize, clipBorderSize);
rcClip.Inflate(-clipBorderSize, -clipBorderSize);
dc.PushClip(new RectangleGeometry(rcClip, cornerRadiusCache, cornerRadiusCache));
dc.DrawEllipse(glowBrush, null, new Point(this.ActualWidth / 2, this.ActualHeight * 0.10), this.ActualWidth * 0.80, this.ActualHeight * 0.40);
dc.Pop();
}
// just draw the border now to make sure it overlaps everything nicely
dc.DrawRoundedRectangle(null, borderPen, rc, cornerRadiusCache, cornerRadiusCache);
dc.Pop();
//base.OnRender(drawingContext);
}
protected override Size MeasureOverride(Size constraint)
{
UIElement child = this.Child as UIElement;
double borderThickness = BorderWidth * 2.0;
if (child != null)
{
...
}
return new Size(Math.Min(borderThickness, constraint.Width), Math.Min(borderThickness, constraint.Height));
}
}
Regarding FrameworkPropertyMetadata and FrameworkPropertyMetadataOptions and value coercions etc. for Silverlight see the WPF_Compatibility solution under the ClipFlair codebase (http://clipflair.codeplex.com)
I am deriving from shape to draw an ellipse. The drawing starts at 0,0 so only the bottom right corner of the ellipse its drawn. How do I transform the origin in the overridegeometry method:
class Ellipse2 : Shape
{
EllipseGeometry ellipse;
public static readonly DependencyProperty TextBoxRProperty = DependencyProperty.Register("TextBoxR", typeof(TextBox), typeof(Ellipse2), new FrameworkPropertyMetadata(null));
public TextBox TextBox
{
get { return (TextBox)GetValue(TextBoxRProperty); }
set { SetValue(TextBoxRProperty, value); }
}
public Ellipse2()
{
ellipse = new EllipseGeometry();
this.Stroke = Brushes.Gray;
this.StrokeThickness = 3;
}
protected override Geometry DefiningGeometry
{
get
{
ellipse.RadiusX = this.Width/2;
ellipse.RadiusY = this.Height/2;
return ellipse;
}
}
}
I fixed it by using
protected override Geometry DefiningGeometry
{
get
{
TranslateTransform t = new TranslateTransform(ActualWidth / 2, ActualHeight / 2);
ellipse.Transform = t;
ellipse.RadiusX = this.ActualWidth/2;
ellipse.RadiusY = this.ActualHeight/2;
return ellipse;
}
}
Another way would be to set the center property of the ellipse I think to the attributes (I haven't tried this yet).