[C#/MAUI/.NET6] VisualStateManager 엘리먼트 : VisualStateGroups 첨부 속성을 IndicatorView 객체에서 사용하기

TestProject.zip

0.36MB

▶ MainPage.xaml

<?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">
    <ContentPage.Resources>
        <Style x:Key="IndicatorLabelStyleKey" TargetType="Label">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal">
                            <VisualState.Setters>
                                <Setter Property="TextColor" Value="LightGray" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="Selected">
                            <VisualState.Setters>
                                <Setter Property="TextColor" Value="Black" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
    </ContentPage.Resources>
    <Grid
        Margin="10"
        RowDefinitions="*,2*,Auto,*">
        <CarouselView x:Name="carouselView" Grid.Row="1"
            BackgroundColor="Cornsilk"
            IndicatorView="indicatorView">
            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <StackLayout VerticalOptions="Center">
                        <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>
                    </StackLayout>
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>
        <IndicatorView x:Name="indicatorView" Grid.Row="2"
            Margin="0,10,0,0"
            HorizontalOptions="Center"
            IndicatorColor="Transparent"
            SelectedIndicatorColor="Transparent">
            <IndicatorView.IndicatorTemplate>
                <DataTemplate>
                    <Label
                        Style="{StaticResource IndicatorLabelStyleKey}"
                        FontFamily="ionicons"
                        FontSize="24"
                        Text="&#xf30c;" />
                </DataTemplate>
            </IndicatorView.IndicatorTemplate>
        </IndicatorView>
    </Grid>
</ContentPage>

 

728x90

 

▶ MainPage.xaml.cs

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
}