How remove border from clicked button in silverlight?

Question

Hi all.
I have a button and image inside it in my silverlight user control.
When I click to the button a border added to it.
Can I remove border from button when it is pressed?
Thanks.

Answer 1

You will need to tweak the Button template to do that. First get hold of the existing template (in Blend this where you use Edit Copy of Template) which you can get from the documentation if you only have Visual Studio. Button Styles and Templates.

Copy the entire style and place it in a resource somewhere in your UserControl or better yet in a ResourceDictionary file of its own and included in the UserControl resources using MergedDictionaries :-

NoFocusRectangleButtonStyle.xaml:-

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&gt;
    <Style x:Key="NoFocusRectangleButtonStyle" TargetType="Button">
        <!-- copy of style contents from documentation -->
    </Style>
</ResourceDictionary>

In your UserControl:-

<UserControl .... >
   <UserControl.Resources>
     <ResourceDictionary>
       <ResourceDictionary.MergedDictionaries>
          <ResourceDictionary Source="NoFocusRectangleButtonStyle.xaml" />
        </ResourceDictionary.MergedDictionaries>
        <!-- other local resources -->
     </ResourceDictionary>
   </UserControl.Resources>
   <Grid x:Name="LayoutRoot" ...>

     <Button Style="{StaticResource NoFocusRectangleButtonStyle}">
        <Image Source="yourimage.png" />
     </Button>

   </Grid>
</UserControl>

Now you just need to tweak the Template in the copied style to remove the Focus Rectangle. You'll find it right at the bottom of the template, delete it. Then look further up to the end of the set of VisualStateGroups, you'll see a VisualState called "Focus", delete the Storyboard it contains and you are done.