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来弥补。这很容易。

右键单击您的项目，然后选择“在混合中打开”。
在Blend中，选择您的按钮并转到Object->Edit Template->Edit a Copy
会出现一个小窗口。输入您的样式的name，例如myStyle，然后在Application部分中选择Define In，以便此样式可应用于您应用中的任何位置。按确定。
然后在Object and Timeline标签中。选择ButtonBackground。里面会有一个ContentContainer。只需使两者的大小相同，即ButtonBackground和ContentContainer应与当前网格的大小相同。通过鼠标或在Properties窗口的帮助下执行此操作。
如果您发现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>

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

3 个答案: