时间戳

首页 > 解决方案 > WPF 模板化按钮 - 无点击事件

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

问题描述

我正在尝试设计一个周围有虚线边框和中间有图像的按钮。理想的命中测试将在图像本身上进行，但不是必需的。我的问题是我无法触发点击事件。这可能是一个命中测试问题，但我无法弄清楚。

除了按钮上明显的 onClick 之外，我还尝试了图像上的 MouseEvents、Stackpanel 上的 ButtonBase.Click、边框上的 Border.InputBindings .. 我认为设置 Background=Transparent 会做到这一点，但没有成功。

这是xml：

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

标签： wpf

解决方案

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

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

推荐阅读