wpf 不规则 button 问题

[kingdomxmk]

本人用Microsoft Expression Blend 3 创建了一个五角星button,如果不用图片，可点区域是五角星，正常。但是一旦将五角星图片做为此按钮的背景图片，按钮的可点区域成了正方形，如何解决？

[沝林]

在Blend中生成一个五角星（资产-》形状-》Star），双击后star生成一个五角星，然后放到Button的Template中，通过MouseOver可以看出可点区域是五角星，代码如下，一下在Blend4中测试通过

<Button Content="Test" Width="100" Height="100" Margin="128,128,172,72">
			<Button.Template>
				<ControlTemplate TargetType="Button">
					<Grid>
						<VisualStateManager.VisualStateGroups>
							<VisualStateGroup x:Name="CommonStates">
								<VisualState x:Name="Normal"/>
								<VisualState x:Name="MouseOver">
									<Storyboard>
										<ColorAnimation Duration="0" To="#FFEB8686" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="regularPolygon" d:IsOptimized="True"/>
										<ColorAnimation Duration="0" To="#F9A95454" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="regularPolygon" d:IsOptimized="True"/>
										<ColorAnimation Duration="0" To="#E5A17070" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="regularPolygon" d:IsOptimized="True"/>
									</Storyboard>
								</VisualState>
								<VisualState x:Name="Pressed"/>
								<VisualState x:Name="Disabled"/>
							</VisualStateGroup>
						</VisualStateManager.VisualStateGroups>
						<ed:RegularPolygon x:Name="regularPolygon" Stroke="Red" InnerRadius="0.47211" PointCount="5" Stretch="Fill" UseLayoutRounding="False">
							<ed:RegularPolygon.Fill>
								<LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
									<GradientStop Color="#FFFFFFFF" Offset="0"/>
									<GradientStop Color="#F9FFFFFF" Offset="0.375"/>
									<GradientStop Color="#E5FFFFFF" Offset="0.625"/>
									<GradientStop Color="#C6FFFFFF" Offset="1"/>
								</LinearGradientBrush>
							</ed:RegularPolygon.Fill>
						</ed:RegularPolygon>
						<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
					</Grid>
				</ControlTemplate>
			</Button.Template>
			
    	
		</Button>

[kingdomxmk]

这个我知道，问题是，我有个star的图片，嵌入这个star形按钮样式里面后，我这个按钮的可点区域就是矩形了

[沝林]

[Quote=引用 3 楼 kingdomxmk 的回复:]
这个我知道，问题是，我有个star的图片，嵌入这个star形按钮样式里面后，我这个按钮的可点区域就是矩形了
[/Quote]

Button默认的Template最外层是一个Border，这个Border就是矩形的，你需要自定义Template，去掉这个Border

<ControlTemplate TargetType="Button">
  <Grid>
    <Image Width={TemplateBinding Width} Height={TemplateBinding Height} .../>
    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
  </Grid>
</ControlTemplate>

[putianchengp]

<Style x:Key="ButtonStyle3" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" Clip="M49,23 C43.130802,18.598101 11.974427,-1 52,-1 C52,19.111135 83.078522,16.592207 44,26" BorderThickness="{TemplateBinding BorderThickness}" Background="White" CornerRadius="3">
<Grid Background="{TemplateBinding Background}" Clip="M49,23 C43.130802,18.598101 11.974427,-1 52,-1 C52,19.111135 83.078522,16.592207 44,26" Margin="1">

</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>


这是我新建的style样式，可以试一下哈