Наведение курсора мыши на вкладку

ProgramBox

Наведение курсора мыши на вкладку

Post author:admin
Запись опубликована:28 мая, 2023
Post category:Вопросы по программированию

#wpf

Вопрос:

Я пытаюсь создать элемент управления вкладками в стиле, подобном примеру Google с кухонной раковиной. Когда мышь перемещается по вкладке, я хочу иметь возможность изменять ее цвет, и когда я нажимаю на эту вкладку, цвет фона ее содержимого меняется в соответствии с цветом вкладки. Однако, если вы не нажимаете на вкладку, а мышь перемещается, я хочу, чтобы она вернулась к своему первоначальному цвету. Я хочу, чтобы вкладки были разных цветов.

Что я имею прямо сейчас, так это то, что при наведении курсора мыши на вводную вкладку content «Содержимое для введения»

шрифт содержимого меняется на красный. Мне пришлось перевести его на передний план, чтобы я мог видеть, что он работает. Имейте в виду, что я совсем новичок в xaml и wpf. Я пытаюсь научиться сам, и в книге, которая у меня есть, есть очень маленький раздел о стилях.

Вот пример гугловского кухонного греха, которого я пытаюсь достичь. http://gwt.google.com/samples/KitchenSink/KitchenSink.html

Любая помощь очень ценится.

 <Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <SolidColorBrush x:Key="mouseOverColor"
            Color="Red" />
        <Style x:Key="myStyle" TargetType="TabItem">
            <Setter Property="BorderThickness" Value="3"/>
            <Setter Property="BorderBrush" Value="Red"/>
            <Setter Property="Background" Value="LightBlue"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TabItem">
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver"
                                     Value="True">
                                <Setter Property="Foreground"
                                        Value="{StaticResource mouseOverColor}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                        <ContentPresenter />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <TabControl  Background="AliceBlue"  Grid.Column="1"
             Grid.ColumnSpan="2" Margin="92,40,37,80"
             Grid.Row="2">
            <TabItem  Header="Intro" >
                <TabItem Style="{StaticResource myStyle}" >
                    Content for intro
                </TabItem>
            </TabItem>
            <TabItem Header="Widgets">
                Content for widget
            </TabItem>
            <TabItem Header="Panels">
                content for panel
            </TabItem>
        </TabControl>
    </Grid>
</Window>

1. Я подозреваю, что у вас не должно быть TabItem, ссылающегося на ваш стиль, вложенного во вводную TabItem. Вместо этого поместите Style={...} атрибут после Header="Intro" атрибута в том же теге TabItem.

Ответ №1:

Это немного сложно, потому что фон выбранной вкладки по умолчанию бесцветный, поэтому вам нужно переопределить шаблон управления. Лучше всего изменить стиль по умолчанию, чтобы вам не нужно было начинать все сначала, что в любом случае довольно многословно:

 <ControlTemplate x:Key="TabItemControlTemplate" TargetType="{x:Type TabItem}">
    <Grid SnapsToDevicePixels="True">
        <Border x:Name="Bd" BorderBrush="White" BorderThickness="1,1,1,0" Padding="{TemplateBinding Padding}">
            <Border.Style>
                <Style TargetType="{x:Type Border}">
                    <Setter Property="Background" Value="Gray"/>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsSelected}" Value="True">
                            <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}" />
                        </DataTrigger>
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsMouseOver}" Value="True">
                            <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
            <ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}"/>
        </Border>
    </Grid>
    <ControlTemplate.Triggers>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsSelected" Value="False"/>
                <Condition Property="IsMouseOver" Value="True"/>
            </MultiTrigger.Conditions>
            <Setter Property="BorderBrush" TargetName="Bd" Value="#FF3C7FB1"/>
        </MultiTrigger>
        <Trigger Property="TabStripPlacement" Value="Bottom">
            <Setter Property="BorderThickness" TargetName="Bd" Value="1,0,1,1"/>
        </Trigger>
        <Trigger Property="TabStripPlacement" Value="Left">
            <Setter Property="BorderThickness" TargetName="Bd" Value="1,1,0,1"/>
        </Trigger>
        <Trigger Property="TabStripPlacement" Value="Right">
            <Setter Property="BorderThickness" TargetName="Bd" Value="0,1,1,1"/>
        </Trigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsSelected" Value="True"/>
                <Condition Property="TabStripPlacement" Value="Top"/>
            </MultiTrigger.Conditions>
            <Setter Property="Margin" Value="-2,-2,-2,-1"/>
            <Setter Property="Margin" TargetName="Content" Value="0,0,0,1"/>
        </MultiTrigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsSelected" Value="True"/>
                <Condition Property="TabStripPlacement" Value="Bottom"/>
            </MultiTrigger.Conditions>
            <Setter Property="Margin" Value="-2,-1,-2,-2"/>
            <Setter Property="Margin" TargetName="Content" Value="0,1,0,0"/>
        </MultiTrigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsSelected" Value="True"/>
                <Condition Property="TabStripPlacement" Value="Left"/>
            </MultiTrigger.Conditions>
            <Setter Property="Margin" Value="-2,-2,-1,-2"/>
            <Setter Property="Margin" TargetName="Content" Value="0,0,1,0"/>
        </MultiTrigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsSelected" Value="True"/>
                <Condition Property="TabStripPlacement" Value="Right"/>
            </MultiTrigger.Conditions>
            <Setter Property="Margin" Value="-1,-2,-2,-2"/>
            <Setter Property="Margin" TargetName="Content" Value="1,0,0,0"/>
        </MultiTrigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Background" TargetName="Bd" Value="#FFF4F4F4"/>
            <Setter Property="BorderBrush" TargetName="Bd" Value="#FFC9C7BA"/>
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

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

Также для придания части содержимого того же цвета, что и вкладка, необходима дополнительная привязка в TabControl. Далее этот шаблон управления необходимо применить к элементам либо с помощью автоматического стиля, либо прямой ссылки:

 <TabControl x:Name="MyControl" Height="200"
            Background="{Binding RelativeSource={RelativeSource Self}, Path=SelectedItem.Background}">
    <TabItem Header="tab1" Background="Red"   Template="{DynamicResource TabItemControlTemplate}"/>
    <TabItem Header="tab2" Background="Green" Template="{DynamicResource TabItemControlTemplate}"/>
    <TabItem Header="tab3" Background="Blue" Template="{DynamicResource TabItemControlTemplate}"/>
</TabControl>

Выбрана первая вкладка, наведите курсор мыши на последнюю вкладку:
Скриншот

Аннотация к использованию:

 <Window ...>
    <Window.Resources>
        <ControlTemplate x:Key="TabItemControlTemplate" TargetType="{x:Type TabItem}">
            ...
        </ControlTemplate>
    </Window.Resources>
    <Grid>
        <!-- You can reference the template anywhere inside the visual tree
             of the Window if it has been declared in the Resources of the
             window, most XML elemnts that are children of the Window element
             are inside its visual tree -->
        <TabControl ...>
            <TabItem Template="{StaticResource TabItemControlTemplate}" .../>
        </TabControl>
    </Grid>
</Window>

1. Могу ли я получить полный код со всем этим вместе? не уверен, что мне нужно перед первой частью кода, чтобы заставить его работать? я вставил код, и он не сработал. Нужно ли мне сначала что-то вроде windows.resources?

2. Это полный код, вам больше ничего не должно понадобиться. Просто поместите шаблон в некоторые Resources . «это не сработало бы» ужасно точно, как это не работает?

3. я имею в виду, что я скопировал код и вставил его в y project, но что было до — <ControlTemplate x: Key=»TabItemControlTemplate» TargetType=»{x:Type TabItem}»>?

4. Если вы видите что-то с x:Key свойством, вы можете предположить, что это ресурс, это означает, что вы должны поместить это в словарь ресурсов; любой словарь с исходным кодом, который находится на более высоком уровне, чем тот, где он используется, Window.Resources был бы подходящим в этом случае. Если у вас все еще возникают проблемы с этим, вам следует прочитать следующее: msdn.microsoft.com/en-us/library/ms750613.aspx

5. MSDN — это все, что вам нужно, если у вас VS 2010, вы можете навести курсор на метод / класс / свойство / что угодно и нажать F1, и это приведет вас на нужную страницу документации, кроме того, есть множество Overview статей, которые вполне совершенны, например msdn.microsoft.com/en-us/library/ms752347.aspx , msdn.microsoft.com/en-us/library/ms742806.aspx и msdn.microsoft.com/en-us/library/ms745683(v=VS.85).aspx