如何使按钮图像拉伸到外部边界

Question

我想让按钮的图像内容延伸到外部边界。我会有几个按钮，所以我假设为所有这些创建一个样式会效果最好，然后相应地添加图像源。我不知道如何将按钮上的图像拉伸到按钮边框的外侧边缘。当添加图像作为内容时，我会看到图像，然后是它周围的边框，然后是按钮占据的更多额外区域。如何将按钮的图像设置为延伸到按钮的外部区域？

<!--<Image x:Name="Tile_WiFi" Source="/Assets/Tiles/Launch/Mode_WiFi_Back.png" Height="173" Width="173" Margin="12,0,0,0" Tap="Tile_Tap"/>-->
<Button x:Name="Button_WiFi" Height="173" Width="173" Margin="12,0,0,0" Click="Button_Click">
<Button.Content>
<Image Source="/Assets/Tiles/Launch/Mode_WiFi_Back.png"/>
</Button.Content>
</Button>

Answer 1

为了删除边框，只需将按钮的BorderThickness属性设置为0。

<Button x:Name="Button_WiFi" Height="173" Width="173" Margin="12,0,0,0" Click="Button_Click" BorderThickness="0" >
<Button.Content>
<Image Source="/Assets/Tiles/Launch/Mode_WiFi_Back.png"/>
</Button.Content>
</Button>

但是，如果你想将图像拉伸到外部边界并删除多余的空间(尽管不建议这样做)，你必须编辑按钮控件的模板，这可以在Blend的帮助下完成。

编辑：让我们通过混合来弥补。这很容易。

1. 右键单击项目并选择"在混合中打开">
2. 在Blend中，选择按钮并转到Object->Edit Template->Edit a Copy
3. 将出现一个小窗口。输入你的风格的name，比如myStyle，然后在Define In部分选择Application，这样这个风格就可以应用到你应用程序中的任何地方。按OK
4. 然后在"Object and Timeline"选项卡中，选择"ButtonBackground"。里面会有一个ContentContainer。只需使它们的大小相同，即ButtonBackground和ContentContainer应该与当前网格的大小相同。使用鼠标或借助Properties窗口执行此操作
5. 如果发现Grid、ButtonBackground和ContentContainer的大小相同。那么你已经用正确的方式做到了。就这样，全部保存。关闭混合。然后返回VS。你会在那里找到你需要的按钮

您现在可以通过将Style="{StaticResource myStyle}"添加到XAML中的按钮属性来将此样式(即myStyle)应用于任何按钮。

希望这对你有帮助。

Answer 2

设置图像的填充和边距属性，如下所示。

<Button x:Name="Button_WiFi" Height="173" Width="173" Margin="12,0,0,0" Click="Button_Click">
<Button.Content>
<Image Source="/Assets/Tiles/Launch/Mode_WiFi_Back.png" 
Stretch="Fill" Margin="-2"/>
</Button.Content>
</Button>

Answer 3

修改了保存样式底部内容的边框

<Style x:Key="ButtonStyle1" TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
<Setter Property="Padding" Value="10,5,10,6"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneButtonBasePressedForegroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<!--<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}">
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>-->
<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" Background="{TemplateBinding Background}" CornerRadius="0" Margin="0">
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="0" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>