如何禁用鼠標懸停在用戶控件上的突出顯示效果

Question

我已經搜索了相同的問題場景，但它們不清楚，並且大多數關注按鈕而不是用戶控件。

我有一個用戶控件，我通過這種方式從主窗口加載：

private void Button_Click(object sender, RoutedEventArgs e)
{           
    ContentArea.Content = new Views.DashboardView();
}

但是當加載該用戶控件時，當我用鼠標懸停在它上面時，整個窗口都會突出顯示，而不是突出顯示該窗口中的各個控件

被黑色輪廓包圍的控件是在鼠標懸停事件上完全突出顯示的用戶控件。 有沒有辦法禁用這種突出顯示效果，只需突出顯示用戶控件中的“管理”按鈕，而不突出顯示整個控件。

這是我的用戶控件 XAML 代碼：

<UserControl x:Class="S.O.B_Management_System.Views.DashboardView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:local="clr-namespace:S.O.B_Management_System.Views"
    mc:Ignorable="d"            
    d:DesignHeight="300" d:DesignWidth="540">

    <Grid>
        <ListView>
            <ScrollViewer Height="300">
                <StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Background="LightBlue" Width="150" Height="90" Margin="10">
                        <StackPanel Orientation="Vertical">
                        <TextBlock Margin="10" Width="130" Background="White" Text="TRIANGLES" Padding="35,3,5,3" FontFamily="Century Gothic"/>
                        <Button Content="Manage" Width="100" Margin="0,15,0,0" Click="Button_Click"/>
                            </StackPanel>
                    </TextBlock>
                        <TextBlock Background="LightBlue" Width="150" Height="90" Margin="10">
                        </TextBlock>
                        <TextBlock Background="LightBlue" Width="150" Height="90" Margin="10">
                        </TextBlock>
                    </StackPanel>
                </StackPanel>
            </ScrollViewer>
        </ListView>
    </Grid>
</UserControl>

和我的主窗口 XAML 代碼：

<Window x:Class="S.O.B_Management_System.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:S.O.B_Management_System"
        xmlns:vm="clr-namespace:S.O.B_Management_System.Views"
        mc:Ignorable="d"
        WindowStartupLocation="CenterScreen"
        Title="MainWindow" Height="700" Width="1250">
    <Window.Resources>
        <DataTemplate DataType="{x:Type vm:DashboardView}">
            <vm:DashboardView />
            <!-- This is a UserControl -->
        </DataTemplate>

    </Window.Resources>
    <DockPanel>
        <Menu DockPanel.Dock="Top">
            <MenuItem Header="Test">
            </MenuItem>
        </Menu>
        <StackPanel Orientation="Horizontal">
            <DockPanel>
                
                <StackPanel Width="230"  Orientation="Vertical" DockPanel.Dock="Left">
                    <ListView Height="400">
                        <ListViewItem Name="dash" Content="Dashboard" FontFamily="Century Gothic" FontWeight="Bold" Height="30" Background="AliceBlue">
                           
                        </ListViewItem>
                        <ListViewItem Content="Inventory" FontFamily="Century Gothic" FontWeight="Bold" Height="30" Background="AliceBlue"/>
                        <ListViewItem Content="Dashboard" FontFamily="Century Gothic" FontWeight="Bold" Height="30" Background="AliceBlue"/>
                        <ListViewItem Content="Dashboard" FontFamily="Century Gothic" FontWeight="Bold" Height="30" Background="AliceBlue"/>
                        <ListViewItem Content="Dashboard" FontFamily="Century Gothic" FontWeight="Bold" Height="30" Background="AliceBlue"/>
                        <Button Height="20" Width="60" Content="{Binding Name}"
                          Command="{Binding DataContext.ChangePageCommand,
                             RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
                          CommandParameter="{Binding}"
                          Margin="2,5" Click="Button_Click"/>
                    </ListView>
                </StackPanel>
                <StackPanel Orientation="Vertical" DockPanel.Dock="Right">

                    <ContentControl x:Name="ContentArea" />
                </StackPanel>
            </DockPanel>    
        </StackPanel>
    </DockPanel>
</Window>

任何幫助將不勝感激

Answer 1

我通過刪除 DashboardView 中相互交織的堆棧面板解決了這個問題

<UserControl x:Class="S.O.B_Management_System.Views.DashboardView"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:local="clr-namespace:S.O.B_Management_System.Views"
   mc:Ignorable="d"            
   d:DesignHeight="300" d:DesignWidth="540">

    <Grid>
        <DockPanel>       
            <ListView Height="400" DockPanel.Dock = Top>
                <ListViewItem Name="dash" Content="Dashboard" FontFamily="Century Gothic" FontWeight="Bold" Height="30" Background="AliceBlue" />
                <ListViewItem Content="Inventory" FontFamily="Century Gothic" FontWeight="Bold" Height="30" Background="AliceBlue"/>
                <ListViewItem Content="Dashboard" FontFamily="Century Gothic" FontWeight="Bold" Height="30" Background="AliceBlue"/>
                <ListViewItem Content="Dashboard" FontFamily="Century Gothic" FontWeight="Bold" Height="30" Background="AliceBlue"/>
                <ListViewItem Content="Dashboard" FontFamily="Century Gothic" FontWeight="Bold" Height="30" Background="AliceBlue"/>
                <Button Height="20" Width="60" Content="{Binding Name}"
                    Command="{Binding DataContext.ChangePageCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" 
                    CommandParameter="{Binding}" Margin="2,5" Button_Click"/>
            </ListView>
        </DockPanel>
    </Grid>
</UserControl>

謝謝大家的幫助

Answer 2

您需要為您感興趣的部分定義一個包含 IsMouseOver 的樣式觸發器。例如，要在鼠標懸停時更改所選列表框項目的顏色，您可以這樣做

<ListBox>
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Blue"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

如果您不使用資源字典，則在用戶控件本身中定義樣式可能會更容易。 例如，如果您有一個嵌套在彈出窗口中的列表框，並且您想更改所選項目的顏色，則可以執行此操作

<UserControl>
    <Grid>
        <TextBox>
        <Popup>
            <ListBox>
                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="Blue"/>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </ListBox.ItemContainerStyle>
            </ListBox>
        </Popup>
    </Grid>
</UserControl>