如何在用户控件上禁用鼠标悬停突出显示效果

时间:2017-05-23 05:24:07

标签: c# wpf xaml

我搜索了相同的问题场景但是它们不清楚,而且大部分都关注按钮而不是用户控件。

我有一个用户控件,我以这种方式从主窗口加载:

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

但是当加载该用户控件时,当我用鼠标将鼠标悬停在它上面时,整个窗口会突出显示而不是突出显示该窗口中的各个控件

user control highlighted

由黑色轮廓包围的控件是完全在鼠标悬停事件上突出显示的用户控件。有没有办法禁用此突出显示效果,只需突出显示"管理" usercontrol中的按钮,也不突出显示整个控件。

这是我的usercontrol 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>

欢迎任何帮助

2 个答案:

答案 0 :(得分: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>

谢谢大家的帮助

答案 1 :(得分:0)

您需要为您感兴趣的部分定义包含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>