TabControl和TabItem與Dropshadow效果WPF

Question

我正在嘗試為TabControl實現樣式以及TabItem，如下圖像：

風格應該在下方顯示：

1. 項目清單
2. TabControl的白色背景和帶Dropshadow效果的選定TabItem。
3. 如果未選擇任何TabItem，則TabItem文本顏色應變為灰色。

到目前為止我所取得的成就：

1. 能夠使用TabSizeConverter轉換器划分TabControl的寬度以適應具有相等大小的TabItem項目。
2. 能夠改變背景和TabControl和TabItems。 但是無法實現Dropshadow效果。
3. 以下是我的TabItem樣式：

<Setter Property="Padding" Value="0"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Foreground" Value="{StaticResource color_MediumGray}"/>
<Setter Property="FontSize" Value="34"/>

<Setter Property="FontFamily" Value="Resources/Fonts/#HelveticaNeueMed" />

<Setter Property="Width">
    <Setter.Value>


<MultiBinding Converter="{StaticResource tabSizeConverter}">
                    `<Binding RelativeSource="{RelativeSource Mode=FindAncestor,` AncestorType={x:Type TabControl}}" />
                    <Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType={x:Type TabControl}}" Path="ActualWidth" />
                </MultiBinding>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Border x:Name="Chrome"
                        BorderThickness="30,0" 
                        BorderBrush="{StaticResource color_Transparent}" 
                        Background="{StaticResource color_LightGray}" 
                        Padding="0" Margin="0">
                        <ContentPresenter ContentSource="Header" 
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="Selector.IsSelected" Value="True">
                            <Setter TargetName="Chrome" Property="BorderThickness" Value="0"/>
                            <Setter TargetName="Chrome" Property="Background" Value="{StaticResource color_White}"/>
                            <Setter Property="Foreground" Value="{StaticResource color_Purple}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

如果有人可以幫助我用這種風格來實現TabControl將是一個很大的幫助。 提前致謝。

Answer 1

風格應該在下方顯示：

1. 項目清單
2. TabControl的白色背景和帶Dropshadow效果的選定TabItem。
3. 如果未選擇任何TabItem，則TabItem文本顏色應變為灰色。

1. 我想這只是一個錯字？

2. 設置TabControl.Background為白色，設置在TabControl的陰影效果，設置TabControl.BorderThickness為零，設置TabItem.Background和TabItem.BorderBrush為白色，不改變TabItem.BorderThickness 。 對於選項卡標題對齊， TabPanel.Margin一個簡單修復是使用選定選項卡的負邊距。

3. 在Chrome上設置TextBlock.Foreground ，而不是在模板觸發器中使用TabItem.Foreground 。

一般請注意，我用我的測試系統顏色名稱替換了顏色常量。 此外，我沒有費心去重新解決標簽項寬度問題，而是為它們分配了靜態寬度。 哦，我使用默認字體而不是你的字體資源:)

我的完整樣本：

<Window.Resources>
    <Style x:Key="itemStyle" TargetType="TabItem">
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Margin" Value="0"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="FontSize" Value="34"/>
        <Setter Property="FontFamily" Value="Resources/Fonts/#HelveticaNeueMed" />
        <Setter Property="Width" Value="310"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Border x:Name="Chrome"
                        BorderThickness="10,0" 
                        BorderBrush="Transparent" 
                        Background="LightGray" 
                        TextBlock.Foreground="Gray"
                        Padding="0" Margin="0">
                        <ContentPresenter ContentSource="Header" 
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="Selector.IsSelected" Value="True">
                            <Setter TargetName="Chrome" Property="BorderBrush" Value="White"/>
                            <Setter TargetName="Chrome" Property="Background" Value="White"/>
                            <Setter TargetName="Chrome" Property="Margin" Value="-2,0,-2,-1"/>
                            <Setter TargetName="Chrome" Property="TextBlock.Foreground" Value="Purple"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<Grid x:Name="grid1">
    <Grid MaxWidth="650" MaxHeight="600">
        <Border Background="Gray">
            <Border.Effect>
                <BlurEffect/>
            </Border.Effect>
        </Border>
        <TabControl BorderThickness="0" Margin="5" Background="White">
            <TabControl.Effect>
                <DropShadowEffect />
            </TabControl.Effect>
            <TabItem Header="Postpaid" Style="{StaticResource itemStyle}" HorizontalContentAlignment="Center">
                <WrapPanel>
                    <Rectangle Fill="Blue" Width="180" Height="180" Margin="10"/>
                    <Rectangle Fill="Green" Width="380" Height="180" Margin="10"/>
                    <Rectangle Fill="Blue" Width="180" Height="180" Margin="10"/>
                    <Rectangle Fill="Green" Width="180" Height="180" Margin="10"/>
                    <Rectangle Fill="Yellow" Width="180" Height="180" Margin="10"/>
                </WrapPanel>
            </TabItem>
            <TabItem Header="Prepaid" Style="{StaticResource itemStyle}" HorizontalContentAlignment="Center">
                <WrapPanel>
                    <Rectangle Fill="Green" Width="180" Height="180" Margin="10"/>
                    <Rectangle Fill="Yellow" Width="180" Height="180" Margin="10"/>
                    <Rectangle Fill="Blue" Width="180" Height="180" Margin="10"/>
                    <Rectangle Fill="Green" Width="380" Height="180" Margin="10"/>
                    <Rectangle Fill="Blue" Width="180" Height="180" Margin="10"/>
                </WrapPanel>
            </TabItem>
        </TabControl>
    </Grid>
</Grid>