CODEWITHSUNDEEP
c#wpfxamlwpf-controlsexpression-blend
Taurib
Taurib

Reputation: 461

Making custom shaped button in wpf and C#

have been looking and trying to get my buttons have different selection area (than the square shape). Making round shape selection area is not hard, but this arc shape, I can't find a good answer to it. I'm trying to do this in Blend for Visual Studio 2013.

As you can see on this picture

My current code is:

   <Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        x:Class="RoundUI.MainWindow"
        Title="MainWindow" Height="350" Width="525"
        AllowsTransparency="True"
        OpacityMask="White"
        WindowStyle="None"
        Background="Transparent">
    <Grid MouseLeftButtonDown="Window_MouseLeftButtonDown" MouseMove="Grid_MouseMove">
        <Grid.Background>
            <ImageBrush ImageSource="smileface.png" />
        </Grid.Background>
        <Image x:Name="image" HorizontalAlignment="Left" Height="100" Margin="212,29,0,0" VerticalAlignment="Top" Width="100" Source="nool.png" RenderTransformOrigin="0.5,0.5" MouseDown="Image_MouseDown_1" MouseEnter="Image_MouseEnter_1" MouseLeave="Image_MouseLeave" Stretch="Fill" >
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform Angle="90"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Image.RenderTransform>
            <Image.Clip>
                <EllipseGeometry Center="50,50" RadiusX="45" RadiusY="45" />
            </Image.Clip>
        </Image>



        <Image HorizontalAlignment="Left" Height="100" Margin="212,214,0,0" VerticalAlignment="Top" Width="100" MouseDown="Image_MouseDown" Source="nool.png" MouseEnter="Image_MouseEnter_2" MouseLeave="Image_MouseLeave_1" Stretch="Fill" Cursor="IBeam" ToolTip="Hello" />
        <Ellipse Height="100" Width="100" Margin="317,156,108,94" MouseEnter="Ellipse_MouseEnter" MouseLeave="Ellipse_MouseLeave" MouseDown="Ellipse_MouseDown">
            <Ellipse.Fill>
                <ImageBrush ImageSource="Arc.png"/>
            </Ellipse.Fill>
        </Ellipse>
        <TextBlock x:Name="infoBlock" HorizontalAlignment="Left" Margin="229,172,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" FontSize="16"/>
        <TextBlock x:Name="clickBlock" HorizontalAlignment="Left" Margin="354,135,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
        <Image x:Name="close" HorizontalAlignment="Left" Visibility="Hidden" Source="nool.png" Height="52" Margin="376,10,0,0" VerticalAlignment="Top" Width="69" MouseDown="close_MouseDown"/>

    </Grid>
</Window>

My question is, how can I make this green area to clickable only. It would be nice, if it could be universal code for all kind of shapes like that.

Upvotes: 2

Views: 1999

Answers (1)

Demeno
Demeno

Reputation: 11

Does the arc have to be an image?

Assuming it isn't, the way to do this in WPF is to create a Path, you can do this in Blend using the Pen tool (https://i.sstatic.net/IlhYq.png).

Note: If something is supposed to be a button, it's usually a good idea to add it as a Control Template for a Button control. You can do this in Blend by adding a button and choosing to edit its template from the right-click menu. The template should be whatever element you want the button to look like (path/image/rectangle/text or more complex layouts). Then, instead of using the MouseDown event you can use the button's Click event, which is usually a better choice. (Also, buttons support Commands when doing MVVM)

Upvotes: 1

Related Questions