CODEWITHSUNDEEP
xamlwindows-phone-7buttonwindows-phone-8
Matthew
Matthew

Reputation: 4056

How to Make Button Image Stretch To Outside Border

I would like to make a button's image content stretch to the outside border. I will have several buttons, so I am assuming creating a style for all of these would work best, and then add the image source accordingly. I do not know how to stretch the image on the button to the outside edge of the button's border. When adding an image as content, I see the image, then the border around it, then some more extra area that the button takes up. How might I accomplish setting the image of the button to stretch to the outside area of the button?

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

Upvotes: 0

Views: 541

Answers (3)

AnaghSharma
AnaghSharma

Reputation: 414

In order to remove the border just set the BorderThickness property of button to 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>

But if you want to stretch your image to the outside border and remove the extra space(though it is not recommended to do so) you would have to edit the template of button control which can be done with the help of Blend.

Edit: Let's make it up through Blend. It is easy.

  1. Right-Click on your Project and select 'Open in Blend'.
  2. In Blend, Select your Button and go to Object->Edit Template->Edit a Copy
  3. A small window will appear. Enter the name of your style, say myStyle, and then Select Application in Define In section so that this style could be applied to anywhere in your app. Press OK.
  4. Then in the Object and Timeline tab. Select ButtonBackground. There will be a ContentContainer inside it. Just make the size of both of them same, i.e., ButtonBackground and ContentContainer should be as of same size of the grid present. Do this either by mouse or with the help of Properties window.
  5. If you find that the size of Grid, ButtonBackground and ContentContainer are the same. Then you have done it in the right way. That's it. Save all. Close Blend. And return to VS. You'll find your required button there.

You can apply this style, i.e., myStyle, to any of the button now by adding Style="{StaticResource myStyle}" to the button properties in XAML.

Hope this will help you.

Upvotes: 1

Matthew
Matthew

Reputation: 4056

Modified the Border that holds the content at the bottom of the style

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

Upvotes: 0

Boopesh
Boopesh

Reputation: 404

Set Fill and Margin property of Image as given below. 

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

Upvotes: 0

Related Questions