1

次のように、「バインダー」効果を実現するために、TabItems を境界線の間に配置したいと考えています。

ただし、境界線と各 TabItem アイテムで ZIndex を使用してこの効果を達成することはできないようです。現在、次の結果が得られます。

このコードの使用:

<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 は最良の選択ですか?

4

2 に答える 2

1

あなたのアプローチはかなり複雑です！より簡単な代替手段の 1 つは、背景画像のタブの上に非表示のボタンを使用し、非表示のタブを含むコンテンツにタブ コントロールを使用することです。

言い換えれば、画像内のタブの上に、透明またはその他の方法でユーザーに表示されない画像を配置します。ボタンがクリックされると、Firefox コントロールがタブ番号 1 にあり、Firefox ボタンがクリックされた場合、コードはタブ コントロールの ItemIndex を 1 に変更します。もちろん、タブコントロール内の実際のタブをユーザーから隠したいと思うでしょう。

このアプローチは、維持と開発がはるかに簡単になります。

これがお役に立てば幸いです！

于 2012-12-08T23:02:10.533 に答える
0

私が正しく理解しているかどうかはよくわかりませんが、これはあなたがやろうとしていることに近いかもしれません:

<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-05T03:02:50.243 に答える