我的按钮的六边形图像如图所示。我想从角落边缘删除点击,只有在点击图片时才点击。我尝试了一些解决方案,通过我的可点击网格总是平方,这就是为什么我的按钮点击区域比我的图片大。
<ControlTemplate TargetType="{x:Type Button}">
<Grid x:Name="LayoutGrid"
SnapsToDevicePixels="true">
<ContentPresenter x:Name="contentPresenter"
Focusable="True"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="0"
IsHitTestVisible="True"
ToolTip="Button">
<ContentPresenter.Content>
<Image Source="/WpfApp3;component/Images/hexagonImage.png"
Stretch="None" />
</ContentPresenter.Content>
</ContentPresenter>
<Label Content="Label"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="60,130,60,51"
Width="180"
Height="40"
HorizontalContentAlignment="Center"
RenderTransformOrigin="0.428,-0.075"
FontSize="18"
FontFamily="Arial Narrow"
IsHitTestVisible="False" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsDefaulted"
Value="true" />
<Trigger Property="IsMouseOver"
Value="true" />
<Trigger Property="IsPressed"
Value="true" />
<Trigger Property="IsEnabled"
Value="false">
<Setter Property="TextElement.Foreground"
TargetName="contentPresenter"
Value="{StaticResource Button.Disabled.Foreground}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
答案 0 :(得分:0)
以下是我已经完成的答案,以防有人将来需要类似的东西。 1.我从Button获得了customControl。在内部我有2个DependencyProperties只是为了点击更改图像。
public ImageSource Image
{
get { return (ImageSource)GetValue(ImageProperty); }
set { SetValue(ImageProperty, value); }
}
public static readonly DependencyProperty ImageProperty =
DependencyProperty.Register("Image", typeof(ImageSource), typeof(CustomControl),
new FrameworkPropertyMetadata(default(ImageSource), FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));
public ImageSource NewImage
{
get { return (ImageSource)GetValue(NewImageProperty); }
set { SetValue(NewImageProperty, value); }
}
// Using a DependencyProperty as the backing store for NewImage. This enables animation, styling, binding, etc...
public static readonly DependencyProperty NewImageProperty =
DependencyProperty.Register("NewImage", typeof(ImageSource), typeof(CustomControl),
new FrameworkPropertyMetadata(default(ImageSource), FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));
在Generic.xaml里面,我喜欢这样的结构化代码(这对我和我的项目都有用)。
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:wpf.core">
<Style TargetType="{x:Type local:CustomControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="{Binding ActualWidth, ElementName=image}"
Height="{Binding ActualHeight, ElementName=image}">
<Image x:Name="image"
IsHitTestVisible="False"
Stretch="None"
VerticalAlignment="Center"
HorizontalAlignment="Center">
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source"
Value="{Binding Image, RelativeSource={RelativeSource TemplatedParent}}" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsPressed, RelativeSource={RelativeSource AncestorType={x:Type Button}}}"
Value="true">
<Setter Property="Source"
Value="{Binding NewImage, RelativeSource={RelativeSource TemplatedParent}}" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
Height="48"
IsHitTestVisible="False"
Margin="38.667,0,38,46.666"
VerticalAlignment="Bottom"
HorizontalAlignment="Center"
MaxHeight="48"
MaxWidth="188" />
<Path Data="M2,88.60254L152,2 302,88.60254 302,261.817621 152,350.410161 2,261.807621z"
RenderTransformOrigin="0.5,0.5"
Stretch="Fill"
Fill="Transparent"
Focusable="True"
StrokeThickness="0"
Margin="25.333,-24.001,25.333,-23.999"
VerticalAlignment="Stretch"
Opacity="0">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform Angle="90" />
<TranslateTransform />
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed"
Value="true">
<Setter Property="Foreground"
Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Trick是制作与我的照片完全相同的路径(Hexagon),并设置该路径可点击但透明,图片可见但不可点击,这解决了我的问题,现在我已经完全功能六角按钮。
主窗口中的代码示例,仅用于显示目的。
<Grid>
<cc:CustomControl Image="/WpfApp3;component/Images/hexPicture1.png"
NewImage="/WpfApp3;component/Images/hexPicture2.png"
ToolTip="Button"
Content="Some content"
FontFamily="Arial narrow"
FontSize="18"/>
</Grid>