WitMicButton.xaml

<UserControl x:Class="WitAiSample.WitMicButton"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="120" d:DesignWidth="120">
	<UserControl.Resources>
		<Style x:Key="WitMicButtonStyle" 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"/>
									<VisualState x:Name="Disabled"/>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
							<Border x:Name="ButtonBackground" CornerRadius="0">
								<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
							</Border>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</UserControl.Resources>
    
    <Button x:Name="WitButton"  Height="120" Width="120" Click="MicButton_Click" Style="{StaticResource WitMicButtonStyle}" ManipulationStarted="WitButton_ManipulationStarted" ManipulationCompleted="WitButton_ManipulationCompleted">
    	<VisualStateManager.VisualStateGroups>
    		<VisualStateGroup x:Name="ToggledStates">
    			<VisualState x:Name="Normal"/>
    			<VisualState x:Name="Pressed">
    				<Storyboard>
    					<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="WitButtonBackground">
    						<DiscreteObjectKeyFrame KeyTime="0">
    							<DiscreteObjectKeyFrame.Value>
    								<Visibility>Visible</Visibility>
    							</DiscreteObjectKeyFrame.Value>
    						</DiscreteObjectKeyFrame>
    					</ObjectAnimationUsingKeyFrames>
    					<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill)" Storyboard.TargetName="WitButtonImage">
    						<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
    					</ObjectAnimationUsingKeyFrames>
    					<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill)" Storyboard.TargetName="WitButtonBackground">
    						<DiscreteObjectKeyFrame KeyTime="0">
    							<DiscreteObjectKeyFrame.Value>
    								<SolidColorBrush Color="White"/>
    							</DiscreteObjectKeyFrame.Value>
    						</DiscreteObjectKeyFrame>
    					</ObjectAnimationUsingKeyFrames>
    				</Storyboard>
    			</VisualState>
    			<VisualState x:Name="Toggled">
    				<Storyboard>
    					<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush)" Storyboard.TargetName="WitButtonBorder">
    						<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
    					</ObjectAnimationUsingKeyFrames>
    					<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill)" Storyboard.TargetName="WitButtonImage">
    						<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
    					</ObjectAnimationUsingKeyFrames>
    				</Storyboard>
    			</VisualState>
    		</VisualStateGroup>
    	</VisualStateManager.VisualStateGroups>
		<Grid>
			<Ellipse x:Name="WitButtonBackground" Margin="4" Visibility="Collapsed"/>
								
			<Border x:Name="WitButtonBorder" BorderBrush="{StaticResource PhoneSubtleBrush}" BorderThickness="4" Height="120" Width="120" CornerRadius="60">
								
				<Rectangle x:Name="WitButtonImage" Fill="{StaticResource PhoneSubtleBrush}" Width="50" Height="75">
					<Rectangle.OpacityMask>
						<ImageBrush ImageSource="/Assets/microphone.png" />
					</Rectangle.OpacityMask>					
				</Rectangle>
			</Border>
		</Grid>
	</Button>
</UserControl>