다음을 통해 공유

인앱 아크릴

XAML AcrylicBrush 또는 미리 정의된 AcrylicBrush 테마 리소스를 사용하여 앱 화면에 앱 내 아크릴을 적용할 수 있습니다.

WinUI 갤러리 앱을 열고 작동 중인 아크릴을 확인합니다.

WinUI에는 앱의 테마를 존중하고 필요에 따라 단색으로 대체되는 브러시 테마 리소스 컬렉션이 포함되어 있습니다. 특정 surface 그리려면 다른 브러시 리소스를 적용하는 것처럼 테마 리소스 중 하나를 요소 배경에 적용합니다.

<Grid Background="{ThemeResource AcrylicInAppFillColorDefaultBrush}">

비고

이러한 리소스는 microsoft-ui-xaml GitHub 리포지토리의 AcrylicBrush 테마 리소스 파일 볼 수 있습니다.

사용자 지정 아크릴 브러시

앱의 아크릴에 색 색조를 추가하여 브랜딩을 표시하거나 페이지의 다른 요소와 시각적 균형을 제공할 수 있습니다. 회색조가 아닌 색을 표시하려면 다음 속성을 사용하여 고유한 아크릴 브러시를 정의해야 합니다.

  • TintColor: 색/색조 오버레이 계층입니다.
  • TintOpacity: 색조 계층의 불투명도입니다.
  • TintLuminosityOpacity: 아크릴 표면을 통해 백그라운드에서 허용되는 채도의 양을 제어합니다.
  • FallbackColor: 배터리 절약 모드에서 아크릴을 대체하는 단색입니다. 배경 아크릴의 경우 앱이 활성 데스크톱 창에 없을 때 대체 색도 아크릴을 바꿉니다.

밝은 테마 아크릴 견본

어두운 테마 아크릴 견본

광도 불투명도와 색조 불투명도의 비교

아크릴 브러시를 추가하려면 어둡고 밝은 테마와 고대비 테마에 대한 세 가지 리소스를 정의합니다. 고대비 모드에서는 어둡고 밝은 AcrylicBrush와 동일한 SolidColorBrushx:Key를 사용하는 것이 좋습니다.

비고

TintLuminosityOpacity 값을 지정하지 않으면 시스템이 TintColor 및 TintOpacity에 따라 값을 자동으로 조정합니다.

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">
        <AcrylicBrush x:Key="MyAcrylicBrush"
            TintColor="#FFFF0000"
            TintOpacity="0.8"
            TintLuminosityOpacity="0.5"
            FallbackColor="#FF7F0000"/>
    </ResourceDictionary>

    <ResourceDictionary x:Key="HighContrast">
        <SolidColorBrush x:Key="MyAcrylicBrush"
            Color="{ThemeResource SystemColorWindowColor}"/>
    </ResourceDictionary>

    <ResourceDictionary x:Key="Light">
        <AcrylicBrush x:Key="MyAcrylicBrush"
            TintColor="#FFFF0000"
            TintOpacity="0.8"
            TintLuminosityOpacity="0.5"
            FallbackColor="#FFFF7F7F"/>
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

다음 샘플에서는 코드에서 AcrylicBrush를 선언하는 방법을 보여줍니다.

AcrylicBrush myBrush = new AcrylicBrush();
myBrush.TintColor = Color.FromArgb(255, 202, 24, 37);
myBrush.FallbackColor = Color.FromArgb(255, 202, 24, 37);
myBrush.TintOpacity = 0.6;

grid.Fill = myBrush;
  • Last updated on