[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] ViewportBehavior 엘리먼트 : IsAlwaysOn/IsFullyInViewport/IsInViewport 속성을 사용해 부모 엘리먼트에서 자식 엘리먼트 진입/이탈 여부 구하기

■ ViewportBehavior 엘리먼트의 IsAlwaysOn/IsFullyInViewport/IsInViewport 속성을 사용해 부모 엘리먼트에서 자식 엘리먼트의 진입/이탈 여부를 구하는 방법을 보여준다.

※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다.
※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를 None으로 추가했다.

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<Page x:Class="TestProject.MainPage" Name="RootElement"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mxi="using:Microsoft.Xaml.Interactivity"
    xmlns:ctwb="using:CommunityToolkit.WinUI.Behaviors"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid
        Margin="10"
        RowSpacing="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0"
            HorizontalAlignment="Center"
            IsHitTestVisible="False"
            Text="Scroll to see the effect" />
        <ScrollViewer Grid.Row="1"
            BorderThickness="1"
            BorderBrush="{ThemeResource ControlStrongStrokeColorDefaultBrush}">
            <Grid Height="2000">
                <Border
                    Width="200"
                    Height="200"
                    Background="{ThemeResource AccentFillColorTertiaryBrush}">
                    <mxi:Interaction.Behaviors>
                        <ctwb:ViewportBehavior x:Name="viewportBehavior"
                            IsAlwaysOn="True" />
                    </mxi:Interaction.Behaviors>
                    <Rectangle
                        Width="100"
                        Height="100"
                        Fill="{ThemeResource AccentFillColorDefaultBrush}" />
                </Border>
            </Grid>
        </ScrollViewer>
        <StackPanel Grid.Row="2"
            HorizontalAlignment="Center">
            <TextBlock>
                <Run Text="IsFullyInViewport :" />
                <Run
                    FontWeight="SemiBold"
                    Text="{x:Bind viewportBehavior.IsFullyInViewport, Mode=OneWay}" />
            </TextBlock>
            <TextBlock>
                <Run Text="IsInViewport :" />
                <Run
                    FontWeight="SemiBold"
                    Text="{x:Bind viewportBehavior.IsInViewport, Mode=OneWay}" />
            </TextBlock>
        </StackPanel>
    </Grid>
</Page>

<?xml version="1.0" encoding="utf-8"?>

<Page x:Class="TestProject.MainPage" Name="RootElement"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:mxi="using:Microsoft.Xaml.Interactivity"

xmlns:ctwb="using:CommunityToolkit.WinUI.Behaviors"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid

Margin="10"

RowSpacing="10">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<TextBlock Grid.Row="0"

HorizontalAlignment="Center"

IsHitTestVisible="False"

Text="Scroll to see the effect" />

<ScrollViewer Grid.Row="1"

BorderThickness="1"

BorderBrush="{ThemeResource ControlStrongStrokeColorDefaultBrush}">

<Border

Width="200"

Height="200"

Background="{ThemeResource AccentFillColorTertiaryBrush}">

<mxi:Interaction.Behaviors>

<ctwb:ViewportBehavior x:Name="viewportBehavior"

IsAlwaysOn="True" />

</mxi:Interaction.Behaviors>

<Rectangle

Width="100"

Height="100"

Fill="{ThemeResource AccentFillColorDefaultBrush}" />

</Border>

</Grid>

</ScrollViewer>

<StackPanel Grid.Row="2"

HorizontalAlignment="Center">

<Run

FontWeight="SemiBold"

Text="{x:Bind viewportBehavior.IsFullyInViewport, Mode=OneWay}" />

</TextBlock>

<Run

FontWeight="SemiBold"

Text="{x:Bind viewportBehavior.IsInViewport, Mode=OneWay}" />

</TextBlock>

</StackPanel>

</Grid>

</Page>

TestProject.zip