[C#/MAUI/.NET6] Style 엘리먼트 : BaseResourceKey 속성을 사용해 동적 스타일 상속하기

■ Style 엘리먼트의 BaseResourceKey 속성을 사용해 동적 스타일을 상속하는 방법을 보여준다.

TestProject.zip

0.15MB

▶ 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="BaseSearchBarStyleKey" TargetType="SearchBar">
            <Setter Property="BackgroundColor" Value="Gray" />
        </Style>
        <Style x:Key="BlueSearchBarStyleKey" TargetType="SearchBar" BaseResourceKey="BaseSearchBarStyleKey">
            <Setter Property="FontAttributes"   Value="Italic" />
            <Setter Property="PlaceholderColor" Value="Blue"   />
        </Style>
        <Style x:Key="RedSearchBarStyleKey" TargetType="SearchBar" BaseResourceKey="BaseSearchBarStyleKey">
            <Setter Property="FontAttributes"   Value="None" />
            <Setter Property="PlaceholderColor" Value="Red"  />
        </Style>
        <Style x:Key="SearchBarStyleKey" TargetType="SearchBar">
            <Setter Property="BackgroundColor"  Value="Gray"   />
            <Setter Property="FontAttributes"   Value="Italic" />
            <Setter Property="PlaceholderColor" Value="Blue"   />
        </Style>
    </ContentPage.Resources>
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center">
        <SearchBar x:Name="searchBar"
            Style="{DynamicResource SearchBarStyleKey}"
            Placeholder="SearchBar demonstrating dynamic styles" />
        <Button x:Name="changeButton"
            HorizontalOptions="Center"
            Margin="0,10,0,0"
            Text="스타일 변경" />
    </StackLayout>
</ContentPage>

 

▶ MainPage.xaml.cs

namespace TestProject;

/// <summary>
/// 메인 페이지
/// </summary>
public partial class MainPage : ContentPage
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - MainPage()

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

        this.changeButton.Clicked += changeButton_Clicked;
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Methoc
    ////////////////////////////////////////////////////////////////////////////////////////// Private

    #region 스타일 변경 버튼 클릭시 처리하기 - changeButton_Clicked(sender, e)

    /// <summary>
    /// 스타일 변경 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void changeButton_Clicked(object sender, EventArgs e)
    {
        if(Resources["SearchBarStyleKey"] == Resources["RedSearchBarStyleKey"])
        {
            Resources["SearchBarStyleKey"] = Resources["BlueSearchBarStyleKey"];
        }
        else
        {
            Resources["SearchBarStyleKey"] = Resources["RedSearchBarStyleKey"];
        }
    }

    #endregion
}