Use image with text in MtPivot

Mar 10, 2015 at 3:22 PM
Edited Mar 10, 2015 at 3:22 PM
Hi I am using MTPivot control in my app. Problem is that I want different images and text on headers .
This is the way I define header template of pivot
<Controls:MtPivot Name="RechargeAccountPivot">
            <Controls:MtPivot.HeaderTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Margin="0 0 10 0" Width="70" Source="/Assets/Images/BalanceTopUpIcons/rechargeCard.png" />
                        <TextBlock Text="{Binding Header}" FontSize="50" 
                FontWeight="Light" Margin="0,0,20,20" />
                    </StackPanel>
                </DataTemplate>
            </Controls:MtPivot.HeaderTemplate>
Now for pivot item I am using
<Controls:MtPivotItem Header="eVoucher">
</Controls:MtPivotItem>

<Controls:MtPivotItem Header="ePay">
</Controls:MtPivotItem>

Now the header is changing but images remains same how can I do that
Need Help
Thanks.
Coordinator
Mar 10, 2015 at 3:39 PM
Edited Mar 10, 2015 at 3:40 PM
The data context of the HeaderTemplate is a MtPivotItem. The simplest way would be to implement your own MtPivotItem class with a new Image property:
public class MyMtPivotItem : MtPivotItem
{
    public string Image { get; set; }
}
Now you can use this class instead of MtPivotItem in XAML and define the image for each pivot item.
In the HeaderTemplate you can now bind to the Image:
<Controls:MtPivot.HeaderTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Margin="0 0 10 0" Width="70" Source="{Binding Image}" />
                        <TextBlock Text="{Binding Header}" FontSize="50" 
                FontWeight="Light" Margin="0,0,20,20" />
                    </StackPanel>
                </DataTemplate>
            </Controls:MtPivot.HeaderTemplate>
I did not test this, but it should work...
Mar 10, 2015 at 3:49 PM
How to bind that will u please provide some code
Coordinator
Mar 10, 2015 at 4:03 PM
Edited Mar 10, 2015 at 4:04 PM
<Controls:MtPivot>
    <Controls:MtPivot.HeaderTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Image Margin="0 0 10 0" Width="70" Source="{Binding Image}" />
                <TextBlock Text="{Binding Header}" FontSize="50" 
                           FontWeight="Light" Margin="0,0,20,20" />
            </StackPanel>
        </DataTemplate>
    </Controls:MtPivot.HeaderTemplate>
    <MyControls:MyPivotItem Header="eVoucher" Image="PathToImage">
        ...
    </MyControls:MyPivotItem>
    <MyControls:MyPivotItem Header="ePay" Image="PathToImage">
        ...
    </MyControls:MyPivotItem>
</Controls:MtPivot>

public class MyPivotItem : MtPivotItem
{
    public string Image { get; set; }
}
Mar 10, 2015 at 4:04 PM
Thanks Bro it helps .
Coordinator
Mar 10, 2015 at 4:05 PM
This should work. If you like the library, please follow it and review it. Thanks