Removing standard blue background on button click for windows phone 8 c#

Question

I am using following code to show a lot of buttons in my ScrollView

foreach (RingModel ring in app.rings)
            {
                Button btn = new Button();
                btn.BorderThickness = new Thickness(0, 0, 0, 0);

                Image img = new Image();
                img.Width = 100;
                img.Height = 100;
                img.Margin = new Thickness(5, 0, 0, 0);

                Uri myUri = new Uri(ring.ringThumbNailImagePath, UriKind.Absolute);
                BitmapImage bmi = new BitmapImage();
                bmi.CreateOptions = BitmapCreateOptions.None;
                bmi.UriSource = myUri;
                img.Source = bmi;
                btn.Content = img;
                btn.Tag = i;
                btn.Click += Ring_Click;

                scrollStackPanel.Children.Add(btn);
                i++;
            }

However these buttons are giving Blue background on click. I want to make it transparent. How can i make it possible.

Answer 1

On your shared App.xaml under the <Application.Resources>

write this

<SolidColorBrush x:Key="ButtonDisabledBackgroundThemeBrush" Color="Ur color"/>
  <SolidColorBrush x:Key="ButtonPressedBackgroundThemeBrush" Color="Ur Color" />

For More http://msdn.microsoft.com/en-us/library/windows/apps/xaml/jj709909.aspx

Answer 2

Use custom style:

<Style x:Key="ButtonStyle1" TargetType="ButtonBase">
  <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="ButtonBase">
        <Grid Background="Transparent">
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Normal"/>
              <VisualState x:Name="MouseOver"/>
              <VisualState x:Name="Pressed">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Foreground">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneButtonBasePressedForegroundBrush}" />
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Disabled">
                <Storyboard>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Foreground">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}" />
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="BorderBrush">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}" />
                  </ObjectAnimationUsingKeyFrames>
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Background">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" Background="{TemplateBinding Background}" Margin="{StaticResource PhoneTouchTargetOverhang}" >
            <ContentControl x:Name="ContentContainer" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Padding="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
          </Border>
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

And then assign the style to the button:

btn.Style = (Style) Resources["ButtonStyle1"];