Pivot item datatemplate

Question

I want to fill my pivotpage using bindings following this tutorial. It works very well except for 1 fact. My content doesnt fill to it maximum potential.

Normal:

normal button filling

XAML:

<controls:Pivot Title="MY APPLICATION">
    <!--Pivot item one-->
    <controls:PivotItem Header="item1">
        <Button Content="test" />
    </controls:PivotItem>

    <!--Pivot item two-->
    <controls:PivotItem Header="item2">
        <Grid/>
    </controls:PivotItem>
</controls:Pivot>

With binding:

binding button filling

XAML:

<phone:PhoneApplicationPage.Resources>
    <DataTemplate x:Key="TheShopApp.UI.ViewModels.TestPivotItemViewModel">
        <Button Content="Test" />
    </DataTemplate>
</phone:PhoneApplicationPage.Resources>

<controls:Pivot Title="{Binding Path=ApplicationName}" ItemsSource="{Binding Path=PivotItems}">
    <controls:Pivot.HeaderTemplate>
        <DataTemplate>
            <Grid x:Name="grid">
                <TextBlock TextWrapping="Wrap"
                    Text="{Binding PivotTitle}"
                    d:LayoutOverrides="Width, Height" />
            </Grid>
        </DataTemplate>
    </controls:Pivot.HeaderTemplate>
    <controls:Pivot.ItemTemplate>
        <DataTemplate>
            <helpers:DataTemplateSelector Content="{Binding}" />
        </DataTemplate>
    </controls:Pivot.ItemTemplate>
</controls:Pivot>

So now my question is: how can I get my binding content to look like the normal content? I found this question which is sort of the same, but I couldn't figure out how too implement it.

score 4 · Accepted Answer · answered Oct 05 '12 at 09:00

I needed to add the following XAML to the templateselector: HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"

XAML:

<phone:PhoneApplicationPage.Resources>
    <DataTemplate x:Key="TheShopApp.UI.ViewModels.TestPivotItemViewModel">
        <Button Content="Test" />
    </DataTemplate>
</phone:PhoneApplicationPage.Resources>

<controls:Pivot Title="{Binding Path=ApplicationName}" ItemsSource="{Binding Path=PivotItems}">
    <controls:Pivot.HeaderTemplate>
        <DataTemplate>
            <Grid x:Name="grid">
                <TextBlock TextWrapping="Wrap"
                    Text="{Binding PivotTitle}"
                    d:LayoutOverrides="Width, Height" />
            </Grid>
        </DataTemplate>
    </controls:Pivot.HeaderTemplate>
    <controls:Pivot.ItemTemplate>
        <DataTemplate>
            <helpers:DataTemplateSelector HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Content="{Binding}" />
        </DataTemplate>
    </controls:Pivot.ItemTemplate>
</controls:Pivot>

Pivot item datatemplate

1 Answers1