Transparent Image Button for Windows Phone (Silverlight/MVVM)

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.)

Leave a Reply


*


Switch to our mobile site