How to style button?

Question

Looking for easiest way to style button like so:

100% transparent, lookless, etc. The only visual is "X" which need to be drawn

MouseOver will color that "X" with different color.

What is the steps to come up with such control? I'm not sure how to approach it. The only way I know is to get template using Blend and then edit it by removing all elements, borders, etc. Is there any easier way?

Answer 1

i can help you when user press

in app.xaml

add

---

<Style x:Key="btnStylePress" 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 PhoneFontSizeMediumLarge}"/>
<Setter Property="Padding" Value="10,3,10,5"/>
<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 PhoneBackgroundBrush}"/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
        </ObjectAnimationUsingKeyFrames>
        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="ContentContainer" />
        <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="ContentContainer" />
        <DoubleAnimation Duration="0" To="-0.652" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="ContentContainer"/>
        <DoubleAnimation Duration="0" To="-76" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="ContentContainer"/>
        <DoubleAnimation Duration="0" To="0.826" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="ButtonBackground" />
        <DoubleAnimation Duration="0" To="-8" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="ButtonBackground"/>
        <DoubleAnimation Duration="0" To="0.552" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="ButtonBackground" />
        <DoubleAnimation Duration="0" To="-24" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="ButtonBackground" />
        <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ButtonBackground" />
       </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}" RenderTransformOrigin="0.5,0.5">
     <Border.RenderTransform>
      <CompositeTransform/>
     </Border.RenderTransform>
     <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" RenderTransformOrigin="0.5,0.5">
      <ContentControl.RenderTransform>
       <CompositeTransform/>
      </ContentControl.RenderTransform>
     </ContentControl>
    </Border>
   </Grid>
  </ControlTemplate>
 </Setter.Value>
</Setter>
</Style>

---

and any button you want to get that style

<Button **Style="{StaticResource btnStylePress}"** Grid.Row="1" Height="266" HorizontalAlignment="Left" Margin="252,419,0,0" Name="BtnStore" VerticalAlignment="Top" Width="154" Click="BtnStore_Click" BorderThickness="0" Background="{x:Null}" />

Answer 2

The easiest way is to retemplate it, either by starting with an existing template or by hacking out a new one.

I think that it is definitely worth getting comfortable enough with templating that you can write a template like this one by hand.

Most of the time it is quite straight forward. The most complicated part is getting the visual states. You can read more about the VisualStateManager class here.

Here is an example of what a template could look like for your scenario:

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.Resources>
        <ControlTemplate x:Key="XButtonTemplate">
            <Grid>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup>
                        <VisualState x:Name="MouseOver">
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetName="textblock" 
                                            Storyboard.TargetProperty="(Foreground).(Color)" To="Red"
                                            Duration="0:0:0.2" />
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Normal">
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetName="textblock" 
                                            Storyboard.TargetProperty="(Foreground).(Color)" To="Black"
                                            Duration="0:0:0.2" />
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>

                <TextBlock x:Name="textblock" HorizontalAlignment="Center" VerticalAlignment="Center" Text="X" />
            </Grid>
        </ControlTemplate>
    </Grid.Resources>
    <StackPanel>
        <Button Height="23" Width="23" Template="{StaticResource XButtonTemplate}" /> 
    </StackPanel>
</Grid>