0

I have a circle shaped button and I like to add a pair of Angel Wings to it, but I can't seem to draw it correctly. I'd like to draw a border with an angel wing on the left and a circle in the middle and an angel wing on the right, in one custom shape..

the Custom shape is the border of the button.

The button is a resizable button, it means it can change Height & Width with the Window, and still maintain the same position.

this button is just an example of what I have made so far.

Circle Button

I've searched for a solution on Google and this site but can't find anything that can help me..

ArchAngel
  • 634
  • 7
  • 16
  • you can draw what you want in [Inkscape](https://inkscape.org/en/) and save as XAML and use it directly in your template. Check also [XDraw](https://xdraw.codeplex.com/) – Franck Apr 02 '15 at 11:41
  • If I use Adobe Photoshop Cs6 to create a png, can I use that in Inkscape?? – ArchAngel Apr 02 '15 at 11:53
  • in Inkscape you can open lots of image format and convert them to `Path` object. but quality depends on the image source quality and precision. if you image have color and huge thickness of line and was made using anti aliasing you will get horribly huge amount of vector on the path result. if you use small lines and very little color with no gradient you can get amazing conversion result. You can also hand trace over the image and use your manual tracing instead of the automatic one (usually the best result) – Franck Apr 02 '15 at 12:23
  • I found it I got the xaml file of the path.. – ArchAngel Apr 02 '15 at 12:40
  • If you post it as an Answer I'll make it the Answer.. – ArchAngel Apr 02 '15 at 12:45
  • i posted as an answer – Franck Apr 02 '15 at 14:33

3 Answers3

1

try looking for image/Photoshop/any other image or drawing method to Xaml converter you can create an image and convert it to xaml
see http://vectormagic.com

taken form here

Community
  • 1
  • 1
ZSH
  • 905
  • 5
  • 15
1

You can use software like Inkscape and with that you can open most image format and from images you can use the trace bitmap option to trace a path. This will create a <path> object in a <canvas>. It can then be used as a background.

things to note :

The quality highly depends on the image source quality and precision. So if your image have lots of color and gradient, huge line thickness and uses anti aliasing you will get very bad result because of a huge amount of vector on the path result. if you use thinner lines and very little color with no gradient you can get amazing conversion result.

You can also hand trace over the image and use that instead of the automatic option. You will get better result like that but it require more work.

With this path created you can create a resource in your application dictionary and use it for icon or background on anything you want. It is scalable in any direction without quality lost as it is now a vector "image".

Franck
  • 4,438
  • 1
  • 28
  • 55
0

Can you try this if it helps

  1. Create Custom control , something like this

    <Grid ClipToBounds="True" HorizontalAlignment="Center" VerticalAlignment="Center">
<ed:Arc x:Name="KnobA" ArcThickness="1" ArcThicknessUnit="Percent" EndAngle="360" Height="120" Stretch="None"
        Stroke="Black"
        StartAngle="0" Width="120" RenderTransformOrigin="0.5,0.5" StrokeThickness="0">
    <ed:Arc.Fill>
        <ImageBrush ImageSource="/Gazelle;component/Resources/Images/image.png" Stretch="UniformToFill" />
    </ed:Arc.Fill>
</ed:Arc>
</Grid>

  2. Use it in your other XAML

    <controls:BoundRotaryButton  Grid.Column="1" Margin="0,0,35,30"
VerticalAlignment="Bottom" HorizontalAlignment="Right" Opacity="0.2"
Grid.ColumnSpan="2"
BoundRotaryButtonState="{Binding myvm.RotaryPressed, Mode=OneWayToSource, 
NotifyOnTargetUpdated=True, UpdateSourceTrigger=PropertyChanged}" />

  3. Create the dependency in code behind of the button control and the handler for mouse clicks.

    public static readonly DependencyProperty KnobAPushButtonStateProperty = DependencyProperty.Register("KnobAPushButtonState", typeof (bool), typeof (KnobA));

public bool KnobAPushButtonState
{
get { return (bool) GetValue(KnobAPushButtonStateProperty); }
set { SetValue(KnobAPushButtonStateProperty, value); }
}       


private void KnobA_MouseDown(object sender, MouseEventArgs e)
{
Mouse.Capture(this);
KnobAPushButtonState = true;

private void KnobA_MouseUp(object sender, MouseEventArgs e)
{
Mouse.Capture(null);
KnobAPushButtonState = false;
}

  4. In your viewmodel you will know when this dependency property changes the button is pressed or released and invoke the command you need.

I have something like a circular button, which you can rotate and press and so on. But you can use any shape you like with Blend.

WinterS
  • 127
  • 11