2013-01-21 57 views
3

我正在開發一個簡單的應用程序,用於在wp7中學習pivot control如何爲透視項目標題添加圖片

我們可以爲數據透視圖項目添加圖像,而不是標題中的文本(波紋圖像中的紅色標記區域)。

是它可以添加圖片,請建議我

我的XAML代碼:提前

<Grid x:Name="LayoutRoot" Background="Transparent"> 
    <!--Pivot Control--> 
    <controls:Pivot Title="MY APPLICATION" Name="mainPivot"> 
     <!--Pivot item one--> 
     <controls:PivotItem Header="item1"> 
      <Grid> 
       <Image Source="/SchoolList;component/Gallery/child.jpg"/> 
      </Grid> 
     </controls:PivotItem> 

     <!--Pivot item two--> 
     <controls:PivotItem Header="item2"> 
      <Grid> 
       <Image Source="/SchoolList;component/Gallery/class.jpg"/> 
      </Grid> 
     </controls:PivotItem> 
    </controls:Pivot> 
</Grid> 

感謝

in marked red area can we add images

回答

1

與@toni petrina的想法我添加圖像到HeaderTemplate到使用data binding樞軸控制。我在使用旋轉與頭部模板圖像我的應用程序實現的圖片庫提供了很大的外觀和感覺

XAML代碼是:

<controls:Pivot Title="Photo Gallery" Name="mainPivot" ItemsSource="{Binding PivotImages}"> 
     <controls:Pivot.HeaderTemplate> 
      <DataTemplate> 
       <Image Name="play" Source="{Binding imgSrc}" Height="80" Width="120" Margin="0,10,0,0"/> 
      </DataTemplate> 
     </controls:Pivot.HeaderTemplate> 
     <controls:Pivot.ItemTemplate> 
      <DataTemplate> 
       <Grid> 
        <Image Name="mainImage" Source="{Binding imgSrc}" /> 
       </Grid> 
      </DataTemplate> 
     </controls:Pivot.ItemTemplate> 
</controls:Pivot> 

,我已經創建了一個簡單class一個string property保存images source和而製備的List和分配給該樞軸ItemsSource上頁加載事件

mainPivot.ItemsSource = items; // items is the list with image sources 
+0

你會告訴我你的類你已經做了.. –

+0

我可以提供另一張圖像,以便在未顯示透視圖的情況下添加我想要顯示的圖像。 – Yawar

1

是的。只需使用HeaderTemplate中

<Pivot> 
    <Pivot.HeaderTemplate> 
     <DataTemplate> 
      <Image ... /> 
     </DataTemplate> 
    </Pivot.HeaderTemplate> 
</Pivot> 

我還要補充一點,而這通常是可能的,但不建議一般使用。除非你需要透視功能來完全不同的東西。這有點不直觀。

+0

感謝您的回答,我怎樣才能顯示圖像(即在網格中加入相同的圖像)代替項目1,項目2(標題)。給定的答案是顯示一個圖像的所有數據透視表項(標題),我用xaml代碼更新了我的問題 – kartheek

+1

我解決了它通過使用'數據綁定':) – kartheek

7

使用此尖端:

<phone:Pivot> 
     <phone:Pivot.HeaderTemplate> 
      <DataTemplate> 
       <Image Source="{Binding}" /> // important 
      </DataTemplate> 
     </phone:Pivot.HeaderTemplate> 
</phone:Pivot> 

,然後設置你的樞軸項目標頭,如

<phone:PivotItem Header="path-to-image" > 

check the screen shot

相關問題