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

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>