[C#/WINUI3/.NET6] ParallaxView 엘리먼트 : Source/VerticalShift 속성 사용하기

■ ParallaxView 엘리먼트의 Source/VerticalShift 속성을 사용하는 방법을 보여준다.

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <ParallaxView Name="parallaxView"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Source="{Binding ElementName=listView}"
            VerticalShift="500">
            <Image Source="ms-appx:///IMAGE/cliff.jpg" />
        </ParallaxView>
        <ListView Name="listView"
            ItemsSource="{x:Bind ItemCollection}"
            HorizontalAlignment="Stretch"
            Background="#80000000"
            HighContrastAdjustment="Auto">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="x:String">
                    <TextBlock
                        Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"
                        Text="{x:Bind}" />
                </DataTemplate>
            </ListView.ItemTemplate>
            <ListView.Header>
                <TextBlock
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Foreground="White"
                    FontSize="28"
                    Text="Scroll the list to see parallaxing of image" />
            </ListView.Header>
        </ListView>
    </Grid>
</Page>

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

<Page x:Class="TestProject.MainPage"

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

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

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<ParallaxView Name="parallaxView"

HorizontalAlignment="Left"

VerticalAlignment="Top"

Source="{Binding ElementName=listView}"

VerticalShift="500">

</ParallaxView>

<ListView Name="listView"

ItemsSource="{x:Bind ItemCollection}"

HorizontalAlignment="Stretch"

Background="#80000000"

HighContrastAdjustment="Auto">

<ListView.ItemTemplate>

<TextBlock

Foreground="{ThemeResource SystemControlForegroundAltHighBrush}"

Text="{x:Bind}" />

</DataTemplate>

</ListView.ItemTemplate>

<ListView.Header>

<TextBlock

HorizontalAlignment="Center"

VerticalAlignment="Center"

Foreground="White"

FontSize="28"

Text="Scroll the list to see parallaxing of image" />

</ListView.Header>

</ListView>

</Grid>

</Page>

▶ MainPage.xaml.cs


using System.Collections.ObjectModel;

using Microsoft.UI.Xaml.Controls;

namespace TestProject
{
    /// <summary>
    /// 메인 페이지
    /// </summary>
    public sealed partial class MainPage : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region Field

        /// <summary>
        /// 항목 컬렉션
        /// </summary>
        public ObservableCollection<string> ItemCollection = new ObservableCollection<string>();

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainPage()

        /// <summary>
        /// 생성자
        /// </summary>
        public MainPage()
        {
            InitializeComponent();

            for(int i = 0; i < 100; i++)
            {
                ItemCollection.Add($"항목 : {i:D5}");
            }
        }

        #endregion
    }
}

using System.Collections.ObjectModel;

using Microsoft.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

////////////////////////////////////////////////////////////////////////////////////////// Public

#region Field

/// <summary>

/// 항목 컬렉션

/// </summary>

public ObservableCollection<string> ItemCollection = new ObservableCollection<string>();

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

for(int i = 0; i < 100; i++)

{

ItemCollection.Add($"항목 : {i:D5}");

}

#endregion

}

TestProject.zip