如何在TabItem上設置ZIndex？

我想我的TabItems到邊界之間定位在實現了「粘合劑」的影響，就像這樣：如何在TabItem上設置ZIndex？

不過，我似乎無法做到這一點影響使用Z-索引與我的邊界和各TabItem項目。目前，我得到這樣的結果：

使用此代碼：

<Border CornerRadius="40,40,0,0" Background="Orange" Margin="8,31,2,21" Grid.RowSpan="4" Panel.ZIndex="-3" ></Border> 
     <Border CornerRadius="40,40,0,0" Background="Red" Margin="6,29,4,23" Grid.RowSpan="4" Panel.ZIndex="-1"></Border> 
     <Border CornerRadius="40,40,0,0" Background="Yellow" Margin="3,26,7,26" Grid.RowSpan="4" Panel.ZIndex="1"></Border> 
     <Border CornerRadius="40,40,0,0" Background="DarkRed" Margin="1,23,9,29" Grid.RowSpan="4" Panel.ZIndex="3"></Border> 
     <Border CornerRadius="40,40,0,0" Background="OrangeRed" Margin="-2,19,12,33" Grid.RowSpan="4" Name="border1" Panel.ZIndex="5"></Border> 
     <TabControl Name="tabControl1" TabStripPlacement="Bottom" Background="Transparent" Margin="-2,32,15,6" Grid.RowSpan="4" BorderThickness="0"> 
      <TabItem Name="tabItem1" Margin="0,0,0,1" Panel.ZIndex="4"> 
       <TabItem.Header> 
        <TextBlock> 
       Main</TextBlock> 
       </TabItem.Header> 
      </TabItem> 
      <TabItem Name="tabItem2" Panel.ZIndex="5"> 
       <TabItem.Header> 
        <TextBlock Height="13" Width="91"> 
       Internet Explorer</TextBlock> 
       </TabItem.Header> 
      </TabItem> 
      <TabItem Name="tabItem3" Panel.ZIndex="0"> 
       <TabItem.Header> 
        <TextBlock> 
       Firefox</TextBlock> 
       </TabItem.Header> 
      </TabItem> 
      <TabItem Name="tabItem4" Panel.ZIndex="-2"> 
       <TabItem.Header> 
        <TextBlock> 
       Chrome</TextBlock> 
       </TabItem.Header> 
      </TabItem> 
      <TabItem Name="tabItem5" Panel.ZIndex="-4"> 
       <TabItem.Header> 
        <TextBlock> 
       Opera</TextBlock> 
       </TabItem.Header> 
      </TabItem> 
     </TabControl>

不過，這並沒有達到預期的影響。我怎樣才能在WPF中做到這一點？ TabControl是最佳選擇嗎？

來源

2012-12-05 CC Inc

你的做法是相當複雜的！一個更簡單的替代方法是在背景圖像的標籤上使用隱藏按鈕，並使用隱藏的標籤對內容進行標籤控制。

換句話說，將透明或者不可見的圖像置於圖像中的標籤上。單擊按鈕時，如果Firefox控件位於選項卡編號1並單擊了Firefox按鈕，代碼會將選項卡控件的ItemIndex更改爲1。當然，你會想要隱藏用戶的tabcontrol中的實際標籤。

這種方法將會更容易維護和開發！

希望這可以幫助你！

來源

2012-12-08 23:02:10 FrostyFire

哇！ JAB的另一個出色答案。感謝您的想法！ –

我不是很確定我理解正確，但是這可能會接近你的努力做到：

<TabControl Name="tabControl1" TabStripPlacement="Bottom" Background="Transparent" Margin="-2,32,15,6" Grid.RowSpan="4" BorderThickness="0"> 
     <TabItem Name="tabItem1" Margin="0,0,0,1" Panel.ZIndex="4"> 
      <TabItem.Header> 
       <TextBlock> 
      Main</TextBlock> 
      </TabItem.Header> 
      <Border CornerRadius="40,40,0,0" Background="Orange" Grid.RowSpan="4" Panel.ZIndex="-3" ></Border> 
     </TabItem> 
     <TabItem Name="tabItem2" Panel.ZIndex="5"> 
      <TabItem.Header> 
       <TextBlock Height="13" Width="91"> 
      Internet Explorer</TextBlock> 
      </TabItem.Header> 
      <Border CornerRadius="40,40,0,0" Background="OrangeRed" Grid.RowSpan="4" Name="border1" Panel.ZIndex="5"></Border> 
     </TabItem> 
     <TabItem Name="tabItem3" Panel.ZIndex="0"> 
      <TabItem.Header> 
       <TextBlock> 
      Firefox</TextBlock> 
      </TabItem.Header> 
      <Border CornerRadius="40,40,0,0" Background="Red" Grid.RowSpan="4" Panel.ZIndex="-1"></Border> 
     </TabItem> 
     <TabItem Name="tabItem4" Panel.ZIndex="-2"> 
      <TabItem.Header> 
       <TextBlock> 
      Chrome</TextBlock> 
      </TabItem.Header> 
      <Border CornerRadius="40,40,0,0" Background="Yellow" Grid.RowSpan="4" Panel.ZIndex="1"></Border> 
     </TabItem> 
     <TabItem Name="tabItem5" Panel.ZIndex="-4"> 
      <TabItem.Header> 
       <TextBlock> 
      Opera</TextBlock> 
      </TabItem.Header> 
      <Border CornerRadius="40,40,0,0" Background="DarkRed" Grid.RowSpan="4" Panel.ZIndex="3"></Border> 
     </TabItem> 
    </TabControl>

來源

2012-12-05 03:02:50

謝謝，但我想要做的是在背景中有邊界，只是讓tabitems給出背後的外觀。我不能讓邊界受到tabitem的限制。 –

如何在TabItem上設置ZIndex？

回答

相關問題