WPF Изменить фон изображения TabItem на isSelected с прозрачным фоном - PullRequest
Новая
       44

WPF Изменить фон изображения TabItem на isSelected с прозрачным фоном

0 голосов
/ 08 марта 2019

Я пытался создать TabControl с TabItems (вкладками) с фоновым изображением, которое изменяется при выборе.Я также хотел бы, чтобы фон TabItem был прозрачным.

Я пробовал много разных вещей.Мне удалось получить прозрачный фон на TabItem, работающий с этим:

Styling TabItems

И изменение изображения, работающее с этим:

Изменить изображение на isSelected

Но я не могу объединить эти два значения независимо от того, что я пробовал.

Мне наконец-то удалось получить прозрачный фон на TabItem, который меняет изображениена isSelected с помощью этого:

Установить изображение, когда TabItem isSelected

в сочетании со ссылкой Styling TabItems, но при тестировании его для одной вкладки он вызывает второй TabItem иметьто же фоновое изображение, что и на первой вкладке, хотя поведение именно то, что я хочу, они меняются при выборе.

Вывод снимка экрана

Я думаю, что это что-тоделать с тем, как у меня Stackpanel внутри сетки, но я не уверен.

Спасибо!

Это код, который у меня есть в настоящее время: 

<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>

1 Ответ

0 голосов
/ 08 марта 2019

Для всех, кто может пытаться это сделать ... Мне удалось решить это, поместив Триггеры для изменения изображения 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>

Выходные данные Выбранные пользователи

Выбран выходной элемент

...