Question

我正在尝试设计一个按钮，该按钮的四周都带有虚线边框，中间是一个图像。理想的命中测试应该在图像本身上，但不是必需的。我的问题是我无法触发click事件。这可能是一个命中测试问题，但我无法弄清楚。

除了按钮上明显的onClick之外，我还在图像上尝试了MouseEvents，在按钮面板上尝试了ButtonBase.Click，在边框上尝试了Border.InputBindings。 / p>

这是xaml：

<Button Grid.Row="0" Click="Button_Click_1">
            <Button.Template>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border Background="Transparent" Grid.Row="0" Margin="30,50" CornerRadius="10" BorderThickness="4">
                        <Border.BorderBrush>
                            <VisualBrush>
                                <VisualBrush.Visual>
                                    <Rectangle StrokeDashArray="4 2"
                                Stroke="#CEAC2D"
                                StrokeThickness="4"
                                RadiusX="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}}, Path=CornerRadius.TopRight}"
                                RadiusY="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}}, Path=CornerRadius.BottomLeft}"
                                Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}}, Path=ActualWidth}"
                                Height="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}}, Path=ActualHeight}"/>
                                </VisualBrush.Visual>
                            </VisualBrush>
                        </Border.BorderBrush>
                        <StackPanel Orientation="Vertical" VerticalAlignment="Center" ButtonBase.Click="Button_Click_1">
                            <Button Height="30" Width="30" Content="Start"/> // just a test button to see if it works
                            <Image Source="/Images/uploadIcon.png" Height="180"/>
                            <TextBlock Margin="0,20,0,0" Foreground="#CEAC2D" Text="Drag Folder or Click to Browse" FontFamily="Lato" FontSize="27" 
                           FontWeight="SemiBold"  HorizontalAlignment="Center"/>
                        </StackPanel>
                    </Border>
                </ControlTemplate>
            </Button.Template>
        </Button>

Answer 1

为什么要尝试将整个内容设置为按钮的模板？如果只希望图像实际可点击，则将其设置为按钮的控制模板，并将其放置在常规的可视树中：

<Border Background="Transparent" Grid.Row="0" Margin="30,50" CornerRadius="10" BorderThickness="4">
    <Border.BorderBrush>
        <VisualBrush>
            <VisualBrush.Visual>
                <Rectangle StrokeDashArray="4 2"
                Stroke="#CEAC2D"
                StrokeThickness="4"
                RadiusX="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}}, Path=CornerRadius.TopRight}"
                RadiusY="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}}, Path=CornerRadius.BottomLeft}"
                Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}}, Path=ActualWidth}"
                Height="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}}, Path=ActualHeight}"/>
            </VisualBrush.Visual>
        </VisualBrush>
    </Border.BorderBrush>

    <StackPanel Orientation="Vertical" VerticalAlignment="Center">
        <Button Click="Button_Click_1" Cursor="Hand">
            <Button.Template>
                <ControlTemplate TargetType="Button">
                    <Image Source="/Images/uploadIcon.png" Height="180"/>
                </ControlTemplate>
            </Button.Template>
        </Button>
        <TextBlock Margin="0,20,0,0" Foreground="#CEAC2D" Text="Drag Folder or Click to Browse" FontFamily="Lato" FontSize="27" 
            FontWeight="SemiBold"  HorizontalAlignment="Center"/>
    </StackPanel>
</Border>

WPF模板化按钮-无点击事件

1 个答案: