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

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 的帮助下完成。

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

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

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

希望这会对你有所帮助。

Answer 2

如下所示设置 Image 的 Fill 和 Margin 属性。

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