Question

所以我已经成功实现了一个带有自定义背景的按钮点击。这是xaml：

<Button 
    HorizontalAlignment="Left" 
    Grid.Row="0" 
    Grid.Column="0" 
    Command="{Binding PreferencesClickedCmd}"
    >
    <Path 
        Data="..." 
        Stretch="Uniform" 
        Fill="#FF070707" 
        Width="16" 
        Height="16" 
        Margin="0,0,0,0" 
        RenderTransformOrigin="0.5,0.5"
        >
        <Path.RenderTransform>
            <TransformGroup>
                <TransformGroup.Children>
                    <RotateTransform Angle="0" />
                    <ScaleTransform ScaleX="1" ScaleY="1" />
                </TransformGroup.Children>
            </TransformGroup>
        </Path.RenderTransform>
    </Path>
</Button>

现在，有没有办法在Path对象本身上使用MVVM实现单击命令。我正在寻找的只有一个图标部分是可点击的（没有按钮对象的帮助）。使用按钮，可以单击整个生成的背景矩形，以便触发路径的事件。

Answer 1

如果你只想填充的Path区域是可点击的，这将有效（只需交换你自己的Path，转换等东西）：

<Button
    Command="{Binding PreferencesClickedCmd}"
    >
    <Button.Content>
        <Path Data="M 8,0 L 0,16 L 16,0 Z" Fill="SlateBlue" />
    </Button.Content>
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <ContentPresenter />
        </ControlTemplate>
    </Button.Template>
</Button>

按钮的整个视觉呈现仅由内容替换，并且路径未填充的按钮部分不可点击，因为它们是透明的。

如果您希望整个内容可以点击，只需为模板提供一个“ 透明的背景：

<ControlTemplate TargetType="Button">
    <Grid Background="#01ffffff">
        <ContentPresenter />
    </Grid>
</ControlTemplate>

这是MVVM做事方式：Button提供了Click事件，Command属性和一些可视化内容;如果您想要的只是Click事件和Command Property，请不要滚动您自己的Click事件;在丢弃视觉内容时使用Button的那些部分。

Answer 2

根据Brandley的建议，以下是我设法以最少的编码更改来实现它的方法。我将按钮大小设置为与图标大小匹配，将背景设置为透明，边框宽度设置为0：

<Button HorizontalAlignment="Left" Grid.Row="0" Grid.Column="0" Margin="5,0,0,0" Width="30" Height="30" BorderThickness="0"  Background="Transparent" Command="{Binding PreferencesClickedCmd}">
            <Path Data="..." Stretch="Uniform" Fill="#FF070707" Width="16" Height="16" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
                <Path.RenderTransform>
                    <TransformGroup>
                        <TransformGroup.Children>
                            <RotateTransform Angle="0" />
                            <ScaleTransform ScaleX="1" ScaleY="1" />
                        </TransformGroup.Children>
                    </TransformGroup>
                </Path.RenderTransform>
            </Path>
        </Button>

WPF路径命令

2 个答案: