개시하다

이 문서는 필자가 WPF 개발에서 Grid의 IsMouseOver를 사용할 때의 고민을 총결하였다.

곤란한 일의 예

3개의 버튼이 Grid에 정렬되고 1개의 버튼이 마우스로 오버플로우될 때 표시되는 경우를 고려합니다.
이를 위해 WPF 항목은 Visual Studio에서 MainWindow를 생성하고 생성합니다.다음xaml을 편집했습니다.

<Window x:Class="MouseOverSample.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"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

    <Window.Resources>
        <Style x:Key="DisplayedOnMouseOverButtonStyle" TargetType="{x:Type Button}">
            <Setter Property="Visibility" Value="Collapsed"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorLevel=1, AncestorType={x:Type Grid}}, Path=IsMouseOver}" Value="True">
                    <Setter Property="Visibility" Value="Visible"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <!-- 以下2つのボタンは常に表示される -->
        <Button Grid.Column="0" 
                Height="20" Width="40"
                Content="ボタン1"/>
        <Button Grid.Column="1" 
                Height="20" Width="40"
                Content="ボタン2"/>
        <!-- 以下のボタンはグリッドがマウスオーバーされたときのみ表示する -->
        <Button Grid.Column="2" 
                Height="20" Width="40"
                Style="{StaticResource DisplayedOnMouseOverButtonStyle}"
                Content="ボタン3"/>
    </Grid>
</Window>

Grid의 Column을 3개로 나누어 각각의 Column에 단추를 하나씩 설정합니다.
세 번째 단추만 스타일을 지정합니다.지정된 스타일은 True에서만 버튼이 있는 Grid의 IsMouseOver입니다.다음은 스타일 부분입니다.

<Style x:Key="DisplayedOnMouseOverButtonStyle" TargetType="{x:Type Button}">
    <Setter Property="Visibility" Value="Collapsed"/>
    <Style.Triggers>
        <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorLevel=1, AncestorType={x:Type Grid}}, Path=IsMouseOver}" Value="True">
            <Setter Property="Visibility" Value="Visible"/>
        </DataTrigger>
    </Style.Triggers>
</Style>

위의 MainWindowxaml을 구축하여 실행하면 다음과 같은 아주 간단한 UI를 할 수 있습니다.

그리고 결정적인 세 번째 버튼이지만 예상대로 작동하지 않는다.
구체적으로 말하면 다음과 같이 마우스가 [버튼 1]과 [버튼 2]에 걸렸을 때 표시되지만 다른 제어가 없는 영역의 Grid 영역에 마우스가 걸렸을 때도 표시되지 않는다.

모든 곤란한 해결 방법

Grid에서 원하는 배경색을 설정하는 것이 해결책입니다.
이렇게 하면 Grid에서 구성 제어가 없는 빈 영역으로 작업을 전환하면 IsMouseOver도 True를 복원하고 예상한 대로 작동합니다.
앞에서 설명한 MainWindowxaml에서 다음과 같이 Grid에 배경색을 설정합니다.또한 외관을 바꾸지 않기 위해 Transparent(투명)을 설정했다.

<Window x:Class="MouseOverSample.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"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

    <Window.Resources>
        ...
    </Window.Resources>

    <!-- Gridに背景色を設定 -->
    <Grid Background="Transparent">
        ...
    </Grid>
</Window>

상술한 변경은 예상대로 행동할 것이다.
다음은 동작 이미지입니다.

총결산

필자는 Grid IsMouseOver를 사용할 때의 주의사항을 총결하였다.
또 Grid 외에도 StackPanel과 WrapPanel도 같은 배경색을 설정하지 않으면 예상치 못한 동작을 할 수 있으니 기억해 주세요.