■ VisualStateManager 엘리먼트의 VisualStateGroups 첨부 속성을 CarouselView 객체에서 사용하는 방법을 보여준다.
▶ PhotoModel.cs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
namespace TestProject; /// <summary> /// 사진 모델 /// </summary> public class PhotoModel { //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region ID - ID /// <summary> /// ID /// </summary> public string ID { get; set; } #endregion #region 제목 - Title /// <summary> /// 제목 /// </summary> public string Title { get; set; } #endregion #region 이미지 소스 - ImageSource /// <summary> /// 이미지 소스 /// </summary> public ImageSource ImageSource { get; set; } #endregion } |
▶ MainPage.xaml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<?xml version="1.0" encoding="utf-8" ?> <ContentPage x:Class="TestProject.MainPage" xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"> <Grid Margin="10" RowDefinitions="*,2*,*"> <CarouselView x:Name="carouselView" Grid.Row="1" BackgroundColor="Cornsilk" PeekAreaInsets="200"> <CarouselView.ItemsLayout> <LinearItemsLayout Orientation="Horizontal" ItemSpacing="10" /> </CarouselView.ItemsLayout> <CarouselView.ItemTemplate> <DataTemplate> <Grid> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="CurrentItem"> <VisualState.Setters> <Setter Property="Scale" Value="1.1" /> </VisualState.Setters> </VisualState> <VisualState x:Name="PreviousItem"> <VisualState.Setters> <Setter Property="Opacity" Value="0.5" /> </VisualState.Setters> </VisualState> <VisualState x:Name="NextItem"> <VisualState.Setters> <Setter Property="Opacity" Value="0.5" /> </VisualState.Setters> </VisualState> <VisualState x:Name="DefaultItem"> <VisualState.Setters> <Setter Property="Opacity" Value="0.25" /> </VisualState.Setters> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Frame HorizontalOptions="Center" HeightRequest="300" CornerRadius="5" BorderColor="DarkGray" HasShadow="True"> <StackLayout Spacing="10"> <Label HorizontalOptions="Center" FontSize="16" Text="{Binding ID}" /> <Label HorizontalOptions="Center" FontSize="18" FontAttributes="Bold" Text="{Binding Title}" /> <Image HorizontalOptions="Center" WidthRequest="200" HeightRequest="200" Aspect="Fill" Source="{Binding ImageSource}" /> </StackLayout> </Frame> </Grid> </DataTemplate> </CarouselView.ItemTemplate> </CarouselView> </Grid> </ContentPage> |
▶ MainPage.xaml.cs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
namespace TestProject; /// <summary> /// 메인 페이지 /// </summary> public partial class MainPage : ContentPage { //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainPage() /// <summary> /// 생성자 /// </summary> public MainPage() { InitializeComponent(); List<PhotoModel> list = new List<PhotoModel>(); list.Add(new PhotoModel { ID = "0001", Title = "풍경1", ImageSource = ImageSource.FromFile("sample1.jpg") }); list.Add(new PhotoModel { ID = "0002", Title = "풍경2", ImageSource = ImageSource.FromFile("sample2.jpg") }); list.Add(new PhotoModel { ID = "0003", Title = "풍경3", ImageSource = ImageSource.FromFile("sample3.jpg") }); list.Add(new PhotoModel { ID = "0004", Title = "풍경4", ImageSource = ImageSource.FromFile("sample4.jpg") }); this.carouselView.ItemsSource = list; } #endregion } |
