Question

我一直在尝试创建一个TabControl，该TabControl的TabItem（选项卡）的背景图像在被选中时会发生变化。我也希望TabItem的背景透明。

我尝试了许多不同的事情。我设法在TabItem上使用了透明背景：

Styling TabItems

变化的图像与此配合工作：

Change image on isSelected

但是无论我如何尝试，我似乎都无法将两者结合起来。

我最终设法在TabItem上获得了透明背景，从而使用此方法改变了isSelected上的图像：

Set Image When TabItem isSelected

与“样式化TabItems”链接结合在一起，但在测试一个选项卡时，这导致第二个TabItem具有与第一个选项卡相同的背景图像，尽管行为正是我想要的，但在选择时会发生变化。

Output Screenshot

我认为这与将Gridpanel放入网格中的方式有关，但是我不确定。

谢谢！

这是我当前拥有的代码：

<TabControl TabStripPlacement="Left" Height="500" Width="700" Margin="0,0,200,0">
<TabControl.Resources>
<Style TargetType="TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Grid Name="Panel">
<ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="10,2"/>
<StackPanel>
<HeaderedItemsControl>
<Image x:Name="imgUsers" Source="/images/usersBtnPressed.png" Height="75"/>
</HeaderedItemsControl>
</StackPanel>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Panel" Property="Background" Value="Transparent"/>
<Setter TargetName="imgUsers" Property="Source" Value="/images/usersBtnPressed.png"/>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="imgUsers" Property="Source" Value="/images/usersBtn.png"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>

<TabItem Name="tabUsers">
<TabItem.HeaderTemplate>
<DataTemplate>
<StackPanel>
</StackPanel>
</DataTemplate>
</TabItem.HeaderTemplate>
</TabItem>
<TabItem>
<TabItem.HeaderTemplate>
<DataTemplate>
<StackPanel>
<Image Source="/images/membersBtn.png" Height="75" Width="150"/>
</StackPanel>
</DataTemplate>
</TabItem.HeaderTemplate>
</TabItem>
</TabControl>

Answer 1

对于其他可能会尝试这样做的人。...我设法通过将用于更改TabItem图像的触发器放入TabItem自身内部来解决该问题，

<TabControl TabStripPlacement="Left" Height="500" Width="700" Margin="0,0,200,0">
        <TabControl.Resources>
            <Style TargetType="TabItem">

                <Setter Property="Template">

                    <Setter.Value>
                        <ControlTemplate TargetType="TabItem">
                            <Grid Name="Panel">
                                <ContentPresenter x:Name="ContentSite"
                                                  VerticalAlignment="Center"
                                                  HorizontalAlignment="Center"
                                                  ContentSource="Header"
                                                  Margin="10,2"/>

                            </Grid>

                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter TargetName="Panel" Property="Background" Value="Transparent"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </TabControl.Resources>

        <TabItem Height="75" BorderBrush="{x:Null}">
            <TabItem.Style>
                <Style TargetType="{x:Type TabItem}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type TabItem}">
                            <Image x:Name="imgUsers"/>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter TargetName="imgUsers" Property="Image.Source" Value="/images/usersBtnPressed.png" />
                            </Trigger>

                            <Trigger Property="IsSelected" Value="False">
                                <Setter TargetName="imgUsers" Property="Image.Source" Value="/images/usersBtn.png" />
                            </Trigger>
                            </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </TabItem.Style>
        </TabItem>

        <TabItem Height="75" BorderBrush="{x:Null}">
            <TabItem.Style>
                <Style TargetType="{x:Type TabItem}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type TabItem}">
                                <Image x:Name="imgMembers"/>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="True">
                                        <Setter TargetName="imgMembers" Property="Image.Source" Value="/images/membersBtnPressed.png" />
                                    </Trigger>

                                    <Trigger Property="IsSelected" Value="False">
                                        <Setter TargetName="imgMembers" Property="Image.Source" Value="/images/membersBtn.png" />
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </TabItem.Style>
        </TabItem>

    </TabControl>

Output Users selected

Output Members selected

WPF更改TabItem图像背景与透明背景上的isSelected

1 个答案: