CODEWITHSUNDEEP
c#wpf
ArchAngel
ArchAngel

Reputation: 644

WPF Custom shaped button

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..

Upvotes: 0

Views: 1730

Answers (3)

Franck
Franck

Reputation: 4440

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".

Upvotes: 1

WinterS
WinterS

Reputation: 147

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.

Upvotes: 0

ZSH
ZSH

Reputation: 913

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

Upvotes: 1

Related Questions