windows phone 7, Button template image source binding

I have got Pivot with ListBoxes in each PevotItem. I've made Button control for animating items in ListBoxes. There is tree of those buttons - each of them has different image in it. However maybe there is some way to make one Button and just bind the image source. I think it will improve loading page time.

I will be thankful for any answer.

Here is my code:

    <DataTemplate x:Key="pageItemTemplate">
        <Button Content="{Binding name}" Margin="0,0,0,20" Style="{StaticResource PageListItemButton}"/>
    </DataTemplate>




<Style x:Key="PageListItemButton" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <StackPanel x:Name="stackPanel" Orientation="Horizontal">
                        <StackPanel.Projection>
                            <PlaneProjection CenterOfRotationY="0" CenterOfRotationX="1"/>
                        </StackPanel.Projection>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.05">
                                        <VisualTransition.GeneratedEasingFunction>
                                            <CircleEase EasingMode="EaseInOut"/>
                                        </VisualTransition.GeneratedEasingFunction>
                                    </VisualTransition>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                  开发者_如何学C                      <DoubleAnimation Duration="0" To="15" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="stackPanel" d:IsOptimized="True"/>
                                        <DoubleAnimation Duration="0" To="0.7" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="stackPanel" d:IsOptimized="True"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Image Source="Images/MainPage/page.png" Height="40" Stretch="Fill" Width="40"/>
                        <ContentPresenter VerticalAlignment="Bottom"/>
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="FontFamily" Value="/BestNote;component/Fonts/Fonts.zip#Diavlo Bold"/>
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="FontSize" Value="24"/>
        <Setter Property="Foreground" Value="#FF292929"/>
    </Style>

If you're finding the loading time of one image (sized for a button) is substantial enough to cause a delay opening the page, perhaps the image can be reduced in size to something more suitable for an image of that size.

Alternatively, perhaps do some profiling to identify what is actualy taking the time to load this page .. it may not be the image taking the majority of the time.

You could do simple profiling with debug output and TimeSpans, or try something like the EQATEC profiler.

Maybe you will be interested in following article:

http://silvergeek.net/2011/01/14/imagebutton-control-for-win-phone-7/