Skip to content

Instantly share code, notes, and snippets.

@dereklakin
Last active Aug 10, 2016
Embed
What would you like to do?
XAML chromeless button with foreground change on pressed
<Page
x:Class="App3.MainPage"
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">
<Page.Resources>
<!-- ChromelessButton -->
<ControlTemplate x:Key="ChromelessButtonTemplate" TargetType="Button">
<Border x:Name="LayoutRoot" Background="{TemplateBinding Background}">
<ContentPresenter
x:Name="ContentPresenter"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Foreground="{TemplateBinding Foreground}" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<!-- Simply remove the PointerUpThemeAnimations if you don't want the default button animations. -->
<VisualStateGroup.Transitions>
<VisualTransition From="Pressed" To="PointerOver">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="LayoutRoot" />
</Storyboard>
</VisualTransition>
<VisualTransition From="PointerOver" To="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="LayoutRoot" />
</Storyboard>
</VisualTransition>
<VisualTransition From="Pressed" To="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="LayoutRoot" />
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver" />
<VisualState x:Name="Pressed">
<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="LayoutRoot" />
<!-- This bit changes the colour on press. Do the same above in PointerOver for a hover effect. -->
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemAccentColor}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation
Duration="0"
Storyboard.TargetName="LayoutRoot"
Storyboard.TargetProperty="(UIElement.Opacity)"
To="0.3" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Border>
</ControlTemplate>
<Style x:Key="ChromelessButtonStyle" TargetType="Button">
<Setter Property="Background" Value="Transparent" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Margin" Value="0" />
<Setter Property="Padding" Value="0" />
<Setter Property="MinHeight" Value="0" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="Template" Value="{StaticResource ChromelessButtonTemplate}" />
</Style>
</Page.Resources>
<Grid>
<Button HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24" FontFamily="Segoe MDL2 Assets" Content="&#xEC8A;" Style="{ThemeResource ChromelessButtonStyle}" />
</Grid>
</Page>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment