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

Microsoft App Hub Philippines

I was trying to register my account in the App Hub 2 days ago and I found out that my country was not on the list of countries. So I contacted Microsoft about this matter. After a few days they replied. Here it is, for the sake of other Filipinos who wanted to submit Windows Phone apps in the Marketplace…

Hello Michael,

Thank you for contacting Windows Phone Developer Support. Unfortunately, your country (Philippines) is not available for App Hub at this time. We are working with the government of your country to be able to allow the App Hub Marketplace there, but there is no time frame on when this may be done. It is not that Microsoft does not want to add App Hub in the Philippines, it is that the Philippines must authorize Microsoft to do commerce there through the App Hub program and Marketplace. Updates will be provided here: http://create.msdn.com/en-us/home/faq.

We have announced the following Global Publishers in various regions though who can assist in publishing your apps for you.

Region Global Publisher Website
APAC App Port http://www.app-exchange.com

CEE APPA Market http://appamarket.com

CHINA MTel http://wp.mtelnet.com

CHINA Device7 http://www.device7.com

MEA Yalla Apps http://www.yallaapps.com

Best Regards,
Ben
The Windows Phone Marketplace Support Team
=================================================================

There is a local Microsoft office here in the Philippines, But I don’t have any Idea what are they doing here. It’s been almost a year since Windows Phone Apps hit the Marketplace. C’mon guys!

PS: to Philippine Goverment, Please don’t tell me that the cause of this delays were due to “misunderstanding” of Bribe prices! As ususal, don’t deny it. Faggots!

RH Bill Grand Debate

Its been a long time for me thinking the best demo of HTTP based video streaming via IIS 7.5 Media Server 2 that I have setup on my server. I hope GMA 7 is ok with it besides I’ve got this copy also on the public website YouTube.

Note: Due to Silverlight security issues on IE9 and Chrome.. You can only viewed this in Firefox 4 and later