Question

一直在寻找并试图让我的按钮有不同的选择区域（比方形）。制作圆形选区并不难，但这种弧形，我找不到合适的答案。我试图在Blend for Visual Studio 2013中执行此操作。

As you can see on this picture

我目前的代码是：

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

我的问题是，如何才能将此绿色区域设为仅可点击。如果它可以成为各种形状的通用代码，那就太好了。

Answer 1

弧是否必须是图像？

假设不是这样，在WPF中执行此操作的方法是创建路径，您可以使用钢笔工具（{{3}在Blend中执行此操作}}）。

注意：如果某些内容应该是按钮，则通常最好将其添加为按钮控件的控制模板。您可以通过添加按钮并从右键单击菜单中选择编辑其模板，在Blend中执行此操作。模板应该是您希望按钮看起来的任何元素（路径/图像/矩形/文本或更复杂的布局）。然后，您可以使用按钮的单击事件，而不是使用 MouseDown 事件，这通常是更好的选择。（此外，按钮在执行MVVM时支持命令）

在wpf和C＃中制作自定义形状的按钮

1 个答案: