10. [.NET MAUI] Slider 회전하는 이미지 만들기(x:Reference 사용)

Image와 Slider의 x:Reference를 이용하여 이미지를 회전시키는 기능을 만들어보자.
*Entry를 이용하여 회전 각도에 대한 쌍방향(TwoWay)바인딩 기능을 추가로 만들자.

 

 

모두 컨트롤에 있는 Property 바인딩으로 가능하기 때문에 마크업 소스만 작성하면된다.

---

1. Image Source에 들어갈 이미지파일을 프로젝트에 넣어준다.

이미지파일 star.jpg 프로젝트에 Import

*Resources > Image 에 star.jpg 라는 Image 파일을 넣어줌

 

---

2. 마크업 소스를 아래와 같이 작성한다.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AppMaui.Page11"
             Title="Page11"
             BackgroundColor="White">
    <NavigationPage.TitleView>
        <Label Text="Page11"/>
    </NavigationPage.TitleView>

    <ScrollView>
        <Grid RowDefinitions="Auto,*,*,*,Auto,*,*,*,*,*" ColumnDefinitions="*">
            
            <Label Grid.Row="0" Text="회전" HorizontalOptions="Center"/>
            
            <Image x:Name="img1" Grid.Row="4" IsAnimationPlaying="True" 
                   Source="star" MinimumWidthRequest="100" VerticalOptions="Start"
                   Rotation="{Binding Source={x:Reference slider1}, Path= Value}"/>

            <Slider Grid.Row="8" x:Name="slider1" Maximum="360" VerticalOptions="Start" />

            <Entry Grid.Row="6" HorizontalOptions="Center" 
                   Text="{Binding Source={x:Reference slider1}, Path= Value, Mode=TwoWay}" />

        </Grid>
        
    </ScrollView>
</ContentPage>

2-1) Image 컨트롤의 이름을 x:Name = "img1"으로 정하고 Slider 이름은 x:Name = slider1 으로 정한다.

2-2) Image에 회전 값을 넣을 수 있는 Rotation Property에  x:Reference를 이용하여 Page11에 있는 slider1 의 Value Property를 바인딩시킨다. (slider1의 Value 값에 따라 Image 가 회전함)

2-3) Entry에 Text에도 slider1의 Value 바인딩 시키고, Mode = TwoWay로 지정하여 입력, 출력 둘다 가능하도록 만든다.

* Grid의 Row, Column Definitions에 *은 비율에 따라 할당되기때문에 Auto로 입력하여 컨트롤러 크기에 맞춘다.

---

3. 빌드하자.

 

빌드된 모습 슬라이더 값에 따라 회전한다.

 

 

Entry에 값을 넣어줘도 잘 회전한다.

 

끝!