It started when I needed an Image button that can still mimics the native command button with toolkit:TiltEffect.IsTiltEnabled=”True” which can animate the tilting effect. So I decided to make my own.
If you are using Model-View-View-Model architecture its much easier to implement and use it
and by the way, you need Silverlight Toolkit for Windows Phone also.
First put this in your style page:
<Style x:Key="TransparentBackgroundButtonStyle" TargetType="Button">
<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="BorderBrush" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ColorAnimation Duration="0" To="Transparent" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" 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>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}" Background="Transparent">
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then in my case, I wanted to implement it in my history contact list so I’m going to bind it in my Data Template (I still put it in the style page):
<DataTemplate x:Key="HistoryDataTemplate">
<ListBoxItem toolkit:TiltEffect.SuppressTilt="True" >
<Grid Background="{StaticResource PhoneBackgroundBrush}" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="260" />
<ColumnDefinition Width="140" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="*"/>
<RowDefinition Height="5"/>
</Grid.RowDefinitions>
<Button Style="{StaticResource TransparentBackgroundButtonStyle}" �
toolkit:TiltEffect.IsTiltEnabled="True"
Grid.Column="0" BorderThickness="0" �
Width="50" Margin="0"�
Height="60" Padding="0" VerticalAlignment="Top" HorizontalAlignment="Left">
<Image Source="{Binding Source={StaticResource ThemedResource}, Path=HistoryListIconResource}" Width="50"�
Height="60" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="-30,-15,0,0" Stretch="UniformToFill" />
<Custom:Interaction.Behaviors>
<pag:ButtonCommand CommandBinding="{Binding Path=DataContext.HistoryCallCommand, ElementName=MainLayoutRoot}"�
CommandParameterBinding="{Binding CallNumber}" />�
</Custom:Interaction.Behaviors>
</Button>
<TextBlock Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="2"
HorizontalAlignment="Left" VerticalAlignment="Top"
Margin="0,0,5,0"
Style="{StaticResource PhoneTextLargeStyle}"
Text="{Binding CallNumber}">
</TextBlock>
<TextBlock Grid.Column="1" Grid.Row="1"
HorizontalAlignment="Left" VerticalAlignment="Top"
TextWrapping="Wrap"
Margin="0,-20,5,0" Foreground="{StaticResource PhoneAccentBrush}"
Text="{Binding CallDate}" FontSize="16"/>
<TextBlock Grid.Column="2" Grid.Row="0" �
HorizontalAlignment="Right" VerticalAlignment="Top"�
Margin="0,5,0,0"
Text="{Binding FormattedCallDuration}" FontSize="26">
<TextBlock.Foreground>
<SolidColorBrush Color="{StaticResource PhoneForegroundColor}"/>
</TextBlock.Foreground>
</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="1"�
HorizontalAlignment="Right" VerticalAlignment="Top"
Text="{Binding FormattedCallCost}" FontSize="16" Margin="12,-20,0,0">
<TextBlock.Foreground>
<SolidColorBrush Color="{StaticResource PhoneSubtleColor}"/>
</TextBlock.Foreground>
</TextBlock>
</Grid>
</ListBoxItem>
</DataTemplate>
Then, in your View Model all you need to do is map the data template in the listbox
<!--History-->
<phoneControls:PivotItem Header="History" Margin="12,-16,12,0">
<Grid>
<ContentControl Template="{StaticResource NoHistoryTextBlock}" Visibility="{Binding IsHistoryEmpty, Converter={StaticResource VisibilityConverter}}" Margin="0,0,0,34" />
<ListBox Name="ListboxHistory" ItemsSource="{Binding CallHistoryItems}" �
Style="{StaticResource HistoryTemplateItemStyle}" toolkit:TiltEffect.IsTiltEnabled="False" toolkit:TiltEffect.SuppressTilt="True"�
Visibility="{Binding IsHistoryEmpty, Converter={StaticResource NegativeVisibilityConverter}}" Background="{x:Null}" Margin="0,18,0,34"/>
<Grid Height="30" VerticalAlignment="Bottom" Visibility="{Binding IsHistoryEmpty, Converter={StaticResource NegativeVisibilityConverter}}">
<Grid.ColumnDefinitions >
<ColumnDefinition Width="225"/>
<ColumnDefinition Width="225"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding CallHistoryTotalDuration}" Grid.Column="0" HorizontalAlignment="Left"/>
<TextBlock Text="{Binding CallHistoryTotalCost}" Grid.Column="1" HorizontalAlignment="Right"/>
</Grid>
</Grid>
</phoneControls:PivotItem>
</phoneControls:Pivot>
And your output will be like this:
(Note: Due to silverlight security, it can be ONLY viewed in FF4.)