fluent xaml theme editor 다운로드 - fluent xaml theme editor 소스 코드 다운로드

page_type

이름

언어

제품

설명

견본

유창한 XAML 테마 편집기

csharp

XAML

창	Windows-UWP

앱을 쉽게 테마하는 방법을 보여주는 도구 및 샘플 앱입니다. 앱에서 사용자 정의 테마가 생겨나는 것을 볼 수있는 가벼운 도구를 제공함으로써 이것을 시작합니다.

유창한 XAML 테마 편집기

구성 요소를 사용하여 재정의합니다

이 repo에는 유창한 XAML 테마 편집기에 대한 전체 솔루션 및 소스 코드가 포함되어 있습니다. 유창한 설계 시스템의 유연성을 보여주고 UWP (Universal Wind

이 repo에 위치한 소스 코드는 Visual Studio에서 사용 가능한 범용 Windows 플랫폼으로 만들어졌으며 Universal Windows 플랫폼을 지원하는 데스크탑, 모바일 및 미래 장치에서 실행되도록 설계되었습니다.

참고 : Universal Windows 플랫폼, 유창한 디자인 또는 리소스 및 자원 성인 인 XAML에 익숙하지 않은 경우 Design Universal Windows 플랫폼 사이트를 방문 하여이 도구가 의도 한 언어 및 프레임 워크에 익숙해지는 것이 좋습니다.

범용 Windows 플랫폼 개발

이 응용 프로그램에는 Windows 10의 경우 Visual Studio 2017 업데이트 4 이상과 SDK (Windows Software Development Kit) 버전 17763 이상이 필요합니다.

Universal Windows 플랫폼 앱 구축을 지원하는 Visual Studio 2017 커뮤니티 에디션 무료 사본 받기

또한 Windows 및 개발 도구에 대한 최신 업데이트를 유지하려면 Windows Insider 프로그램에 가입하여 Windows 내부자가됩니다.

Windows 내부자가 되십시오

도구의 저장 버전

이 오픈 소스 프로젝트와 떨어져 있지 않고 대신 앱 자체를 사용하고 싶다면이 도구의 Microsoft Store 버전으로 이동하여 다운로드하십시오.

도구를 사용하는 방법

미리보기 빌드를 사용하면 오른쪽 속성과 어두운 테마에 대한 세 가지 주요 색상을 선택할 수 있습니다.

색상 특성 창

지역 - 모든 컨트롤이 앉아있는 배경, 이는 프레임 워크에 존재하지 않는 별도의 리소스입니다.
기본 - 모든 컨트롤의 백 플레이트와 호버 또는 프레스와 같은 임시 상태 비주얼을 나타냅니다. 일반적으로베이스는 테마의 배경 (또는 영역 색상)과 검은 색 텍스트 (가벼운 테마 인 경우)와 흰색 텍스트 (어두운 테마 인 경우)와 대조적이어야합니다.
기본 - 이것은 본질적으로 악센트 색상이며 주로 흰색 텍스트와 대조해야합니다. 또한 더 많은 선택 위치에서 목록 선택, 체크 박스 또는 Radiobutton 확인 상태, 슬라이더 채우기 값 및 일단 상호 작용 한 기본 휴식 상태와 다른 것으로 표시되는 기타 제어 부품과 같은 토글 컨트롤에 대한 대체 휴식 상태를 보여주기 위해 사용됩니다.

색상을 정제합니다

각 테마의 세 가지 주요 색상 외에도 주요 색상 중 하나를 확장하여 특정 제어 부품의 모양을 변경하는 사소한 색상 목록을 볼 수 있습니다. 이는 기본적으로 상태에 대한 색상 선택에 더 자세히 설명 할 수 있습니다.

색상 속성 창 세부 사항

색상의 자세한보기에 액세스하려면 주요 색상 버튼 견본 옆의 쉐브론을 클릭하십시오.

사전 설정을 작성, 저장 및로드합니다

편집자는 앱에서 테마가 어떻게 보이는지에 대한 아이디어를 얻기 위해 일부 사전 설정과 함께 배송됩니다. 사전 설정 드롭 다운은 Color Dictionary Properties 패널의 상단에 있습니다.

처음 부팅하면 항상 기본값으로 설정됩니다. 모든 컨트롤에 대한 밝고 어두운 테마 스타일 기본값입니다. 라벤더 및 야간과 같은 다른 테마를 선택하여 도구가 우리의 컨트롤을 테마하는 방법에 대한 아이디어를 얻을 수 있습니다.

나만의 테마를 만들 준비가되면 색상 편집을 시작하십시오! 조정을 시작하면 사전 설정 콤보 박스가 사전 설정의 이름에서 "사용자 정의"로갑니다.

이것은 당신이“Custom”인 새로운 임시 테마를 시작했음을 의미합니다. 변경 사항은 해당 상자의 다른 사전 설정에 영향을 미치지 않습니다.

변경 사항에 만족하면 "저장"버튼을 클릭하고 원하는 저장 지점을 찾아보십시오.
마찬가지로 "로드"버튼을 클릭하고 저장된 테마의 파일 위치로 브라우징을 통해 저장된 JSON 테마를 열 수 있습니다.

대비 비율 확인

테마 편집기의 마지막 부분은 아마도 테마를 만드는 것의 가장 중요한 부분 중 하나 일 것입니다. 즉, 각 테마에서는 대비를 준수하는 것입니다. 이 도구는 색상을 선택할 때 색상 선택 창의 왼쪽에 작은 대비 정보 목록을 제공합니다.

대비 패널 예제

이 창에서는 편집하기로 선택한 테마에서 가장 널리 퍼진 텍스트 색상과의 대비를 볼 수 있습니다.

4.5 : 1 의 표준 대비 비율 아래로 떨어지는 색상을 선택하면 대비 값 옆에 빨간색 텍스트가 표시됩니다.

대비 패널 나쁜 예

대비 비율과 그 중요성에 대해 자세히 알아볼 수 있습니다.

UWP 앱에서 테마를 내보내고 사용합니다

모든 것을 테마로 한 후에는 앱에서 사용하고 싶을 것입니다! 그렇게하려면 Color Dictionary Properties 패널의 하단에서 "내보내기"버튼을 클릭해야합니다.

내보내기 테마

이 버튼은 일반적이고 이름이없는 자원이없는 스텁이있는 팝업 창이 열립니다 (아래 참조).

내보내기 테마 팝업

이 창은 최종적으로 아무 것도 만들지 않지만 테마를 약간 변경하고 내보내기 창으로 다시 수출하려면 변경된 색상 값으로 새로 고침됩니다.

그러나 앱에서 사용할 준비가되면 오른쪽 하단의 "클립 보드로 복사"버튼을 클릭하고 UWP Visual Studio 솔루션으로 이동하십시오.

Visual Studio에 있으면 Solution Explorer에있는 프로젝트 솔루션을 마우스 오른쪽 단추로 클릭하십시오.

리소스 사전 비주얼 스튜디오 만들기

> 새 항목을 추가 한 다음 리소스 사전을 선택하십시오.

리소스 사전 비주얼 스튜디오 만들기

당신에게 의미가있는 사전 이름을 지정하고 완료되면 추가를 클릭하십시오.

리소스 사전 비주얼 스튜디오 만들기

이는 다음과 같은 빈 자원질을 생성해야합니다.

< ResourceDictionary
    xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
    xmlns : x = " http://schemas.microsoft.com/winfx/2006/xaml "
    xmlns : local = " using:MyAppName " >
    
</ ResourceDictionary >

이제 편집기의 내보내기 테마 코드를 해당 Resourcedictionary에 붙여 넣을 수 있습니다.

< ResourceDictionary
    xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
    xmlns : x = " http://schemas.microsoft.com/winfx/2006/xaml "
    xmlns : local = " using:MyAppName " >
    
    <!-- Free Public License 1.0.0 Permission to use, copy, modify, and/or distribute this code for any purpose with or without fee is hereby granted. -->
    < ResourceDictionary .ThemeDictionaries>
        < ResourceDictionary x : Key = " Default " >
            < ResourceDictionary .MergedDictionaries>
                < ColorPaletteResources Accent = " #FF0073CF " AltHigh = " #FF000000 " AltLow = " #FF000000 " AltMedium = " #FF000000 " AltMediumHigh = " #FF000000 " AltMediumLow = " #FF000000 " BaseHigh = " #FFFFFFFF " BaseLow = " #FF333333 " BaseMedium = " #FF9A9A9A " BaseMediumHigh = " #FFB4B4B4 " BaseMediumLow = " #FF676767 " ChromeAltLow = " #FFB4B4B4 " ChromeBlackHigh = " #FF000000 " ChromeBlackLow = " #FFB4B4B4 " ChromeBlackMedium = " #FF000000 " ChromeBlackMediumLow = " #FF000000 " ChromeDisabledHigh = " #FF333333 " ChromeDisabledLow = " #FF9A9A9A " ChromeGray = " #FF808080 " ChromeHigh = " #FF808080 " ChromeLow = " #FF151515 " ChromeMedium = " #FF1D1D1D " ChromeMediumLow = " #FF2C2C2C " ChromeWhite = " #FFFFFFFF " ListLow = " #FF1D1D1D " ListMedium = " #FF333333 " />
                < ResourceDictionary >
                    < Color x : Key = " SystemChromeAltMediumHighColor " >#CC000000</ Color >
                    < Color x : Key = " SystemChromeAltHighColor " >#FF000000</ Color >
                    < Color x : Key = " SystemRevealListLowColor " >#FF1D1D1D</ Color >
                    < Color x : Key = " SystemRevealListMediumColor " >#FF333333</ Color >
                    < Color x : Key = " RegionColor " >#FF000000</ Color >
                    < SolidColorBrush x : Key = " RegionBrush " Color = " {StaticResource RegionColor} " />
                </ ResourceDictionary >
            </ ResourceDictionary .MergedDictionaries>
        </ ResourceDictionary >
        < ResourceDictionary x : Key = " Light " >
            < ResourceDictionary .MergedDictionaries>
                < ColorPaletteResources Accent = " #FF0073CF " AltHigh = " #FFFFFFFF " AltLow = " #FFFFFFFF " AltMedium = " #FFFFFFFF " AltMediumHigh = " #FFFFFFFF " AltMediumLow = " #FFFFFFFF " BaseHigh = " #FF000000 " BaseLow = " #FFCCCCCC " BaseMedium = " #FF898989 " BaseMediumHigh = " #FF5D5D5D " BaseMediumLow = " #FF737373 " ChromeAltLow = " #FF5D5D5D " ChromeBlackHigh = " #FF000000 " ChromeBlackLow = " #FFCCCCCC " ChromeBlackMedium = " #FF5D5D5D " ChromeBlackMediumLow = " #FF898989 " ChromeDisabledHigh = " #FFCCCCCC " ChromeDisabledLow = " #FF898989 " ChromeGray = " #FF737373 " ChromeHigh = " #FFCCCCCC " ChromeLow = " #FFECECEC " ChromeMedium = " #FFE6E6E6 " ChromeMediumLow = " #FFECECEC " ChromeWhite = " #FFFFFFFF " ListLow = " #FFE6E6E6 " ListMedium = " #FFCCCCCC " />
                < ResourceDictionary >
                    < Color x : Key = " SystemChromeAltMediumHighColor " >#CCFFFFFF</ Color >
                    < Color x : Key = " SystemChromeAltHighColor " >#FFFFFFFF</ Color >
                    < Color x : Key = " SystemRevealListLowColor " >#FFE6E6E6</ Color >
                    < Color x : Key = " SystemRevealListMediumColor " >#FFCCCCCC</ Color >
                    < RevealBackgroundBrush x : Key = " SystemControlHighlightListLowRevealBackgroundBrush " TargetTheme = " Light " Color = " {ThemeResource SystemRevealListMediumColor} " FallbackColor = " { StaticResource SystemListMediumColor} " />
                    < Color x : Key = " RegionColor " >#FFFFFFFF</ Color >
                    < SolidColorBrush x : Key = " RegionBrush " Color = " {StaticResource RegionColor} " />
                </ ResourceDictionary >
            </ ResourceDictionary .MergedDictionaries>
        </ ResourceDictionary >
        < ResourceDictionary x : Key = " HighContrast " >
            < StaticResource x : Key = " RegionColor " ResourceKey = " SystemColorWindowColor " />
            < SolidColorBrush x : Key = " RegionBrush " Color = " {StaticResource RegionColor} " />
        </ ResourceDictionary >
    </ ResourceDictionary .ThemeDictionaries>
    
</ ResourceDictionary >

이제 완전히 사용자 정의 된 색상 테마가 사용되기를 기다리고 있으므로 적용해 봅시다!

그렇게하려면 페이지 또는 app.xaml로 이동하여 테마를 적용하려는 앱의 양에 따라 테마 사전을 해당 페이지 나 앱의 리소스로 병합합니다.

< Page .Resources>
   < ResourceDictionary >
      < ResourceDictionary .MergedDictionaries>
         < ResourceDictionary Source = " PurpleGreenTheme.xaml " />
      </ ResourceDictionary .MergedDictionaries>
   </ ResourceDictionary >
</ Page .Resources>

마지막으로, 페이지의 배경색을 테마를 위해 선택한 지역 콜러로 설정하는 것을 잊지 마십시오. 자동으로 설정되지 않는 유일한 브러시입니다.

< Grid Background = " {ThemeResource RegionBrush} " >
   <!-- Your page layout/content here -->
</ Grid >

일단 들어가면 끝났어! 테마 색상은 이제 앱이나 페이지에 따라 널리 퍼져 있습니다.

Code-Behind에서 ColorPaletteresources 사용

ColorPaletterESources API에 코드 뒤에 액세스하고 런타임에 색상 속성을 변경하고 App.xaml의 병합 사전 (또는 테마를 병합 한 스코프)을 통해 루프하고 ColorPaletEresource 인스턴스로 현재 사용되는 ResourcedDictionary에 대한 참조를 가져옵니다.

다음은 C#에서 ColorPaletteresources의 속성을 잡고 편집하는 방법의 예입니다.

 public MainPage ( )
{
    this . InitializeComponent ( ) ;

    ColorPaletteResources cpr = FindColorPaletteResourcesForTheme ( "Light" ) ;
    cpr . Accent = Colors . Red ;

    ReloadPageTheme ( this . RequestedTheme ) ;
}

private void ReloadPageTheme ( ElementTheme startTheme )
{
    if ( this . RequestedTheme == ElementTheme . Dark )
        this . RequestedTheme = ElementTheme . Light ;
    else if ( this . RequestedTheme == ElementTheme . Light )
        this . RequestedTheme = ElementTheme . Default ;
    else if ( this . RequestedTheme == ElementTheme . Default )
        this . RequestedTheme = ElementTheme . Dark ;

    if ( this . RequestedTheme != startTheme )
        ReloadPageTheme ( startTheme ) ;
}

private ColorPaletteResources FindColorPaletteResourcesForTheme ( string theme )
{
    foreach ( var themeDictionary in Application . Current . Resources . ThemeDictionaries )
    {
        if ( themeDictionary . Key . ToString ( ) == theme )
        {
            if ( themeDictionary . Value is ColorPaletteResources )
            {
                return themeDictionary . Value as ColorPaletteResources ;
            }
            else if ( themeDictionary . Value is ResourceDictionary targetDictionary )
            {
                foreach ( var mergedDictionary in targetDictionary . MergedDictionaries )
                {
                    if ( mergedDictionary is ColorPaletteResources )
                    {
                        return mergedDictionary as ColorPaletteResources ;
                    }
                }
            }
        }
    }
    return null ;
}

성능 문제를 경험할 수 있으므로 런타임에 너무 자주 수행하지는 않지만 설정 페이지 나 사용자가 자주 전환 할 것으로 기대하지 않는 영역에 배치되면 성능이 나쁘지 않아야합니다.

팁! 리소스 내부의 새로운 색상 변경을 얻으려면 리소스를 다시로드해야합니다. 요청 제발을 다른 테마로 뒤집고 다시 돌아가서 다시 할 수 있습니다. 이것이 바로 ReloadPagetheme 기능이 수행하는 일입니다.

다운 레벨 테마

이 도구의 내보내기 코드에 사용 된 API는 버전 17744 이상이지만 테마가 이전 SDK 버전에서 작동하도록하는 것은 너무 복잡하지 않습니다.

테마를 내보내면 다음과 유사한 ColorPaletterESources 정의가있는 Resourcedictionary Markup이 표시됩니다.

< ResourceDictionary .ThemeDictionaries>
    < ResourceDictionary x : Key = " Default " >
        < ResourceDictionary .MergedDictionaries>
            < ColorPaletteResources Accent = " #FF8961CC " AltHigh = " #FF000000 " AltLow = " #FF000000 " AltMedium = " #FF000000 " AltMediumHigh = " #FF000000 " AltMediumLow = " #FF000000 " BaseHigh = " #FFFFFFFF " BaseLow = " #FF64576B " BaseMedium = " #FFB6AABC " BaseMediumHigh = " #FFCBBFD0 " BaseMediumLow = " #FF8D8193 " ChromeAltLow = " #FFCBBFD0 " ChromeBlackHigh = " #FF000000 " ChromeBlackLow = " #FFCBBFD0 " ChromeBlackMedium = " #FF000000 " ChromeBlackMediumLow = " #FF000000 " ChromeDisabledHigh = " #FF64576B " ChromeDisabledLow = " #FFB6AABC " ChromeGray = " #FFA295A8 " ChromeHigh = " #FFA295A8 " ChromeLow = " #FF332041 " ChromeMedium = " #FF3F2E4B " ChromeMediumLow = " #FF584960 " ChromeWhite = " #FFFFFFFF " ListLow = " #FF3F2E4B " ListMedium = " #FF64576B " />
        < ResourceDictionary >
            < Color x : Key = " RegionColor " >#FF262738</ Color >
            < SolidColorBrush x : Key = " RegionBrush " Color = " {StaticResource RegionColor} " />
        </ ResourceDictionary >
    </ ResourceDictionary .MergedDictionaries>
</ ResourceDictionary >

ColorPaletterESources는 Generic.xaml 내에 앉아있는 시스템 콜러에 대한 친숙한 API이며 해당 시스템 콜러가 어느 수준에서나 범위를 지정할 수 있습니다.

이 동일한 테마를 활성화하려면 다운 레벨이 작동하려면 테마의 각 색상으로 각 시스템 검색을 개별적으로 정의해야합니다.

< ResourceDictionary >
    < ResourceDictionary .ThemeDictionaries>
        < ResourceDictionary x : Key = " Default " >
            < Color x : Key = " SystemAltHighColor " >#FF000000</ Color >
            < Color x : Key = " SystemAltLowColor " >#FF000000</ Color >
            < Color x : Key = " SystemAltMediumColor " >#FF000000</ Color >
            < Color x : Key = " SystemAltMediumHighColor " >#FF000000</ Color >
            < Color x : Key = " SystemAltMediumLowColor " >#FF000000</ Color >
            < Color x : Key = " SystemBaseHighColor " >#FFFFFFFF</ Color >
            < Color x : Key = " SystemBaseLowColor " >#FF64576B</ Color >
            < Color x : Key = " SystemBaseMediumColor " >#FFB6AABC</ Color >
            < Color x : Key = " SystemBaseMediumHighColor " >#FFCBBFD0</ Color >
            < Color x : Key = " SystemBaseMediumLowColor " >#FF8D8193</ Color >
            < Color x : Key = " SystemChromeAltLowColor " >#FFCBBFD0</ Color >
            < Color x : Key = " SystemChromeBlackHighColor " >#FF000000</ Color >
            < Color x : Key = " SystemChromeBlackLowColor " >#FFCBBFD0</ Color >
            < Color x : Key = " SystemChromeBlackMediumLowColor " >#FF000000</ Color >
            < Color x : Key = " SystemChromeBlackMediumColor " >#FF000000</ Color >
            < Color x : Key = " SystemChromeDisabledHighColor " >#FF64576B</ Color >
            < Color x : Key = " SystemChromeDisabledLowColor " >#FFB6AABC</ Color >
            < Color x : Key = " SystemChromeHighColor " >#FFA295A8</ Color >
            < Color x : Key = " SystemChromeLowColor " >#FF332041</ Color >
            < Color x : Key = " SystemChromeMediumColor " >#FF3F2E4B</ Color >
            < Color x : Key = " SystemChromeMediumLowColor " >#FF584960</ Color >
            < Color x : Key = " SystemChromeWhiteColor " >#FFFFFFFF</ Color >
            < Color x : Key = " SystemChromeGrayColor " >#FFA295A8</ Color >
            < Color x : Key = " SystemListLowColor " >#FF3F2E4B</ Color >
            < Color x : Key = " SystemListMediumColor " >#FF64576B</ Color >                
            < Color x : Key = " SystemAccentColor " >#FF8961CC</ Color >
            
            < Color x : Key = " RegionColor " >#FF262738</ Color >
            < SolidColorBrush x : Key = " RegionBrush " Color = " {StaticResource RegionColor} " />
         </ ResourceDictionary >
    </ ResourceDictionary .ThemeDictionaries>
</ ResourceDictionary >

이 경우 우리는 Lavendar 테마를 사용 하여이 다운 레벨 전환을 보여줍니다.

경고 : 이 마크 업 형식 변경을 통해 이전 SDK 버전의 컨트롤에 걸쳐 테마를 적용 할 수 있지만 페이지, 컨테이너 또는 제어 범위 레벨에서는 작동 하지 않습니다 . ColorPaletterESources는 범위 행동을 허용하는 API입니다. 이 마크 업 형식은 이전 SDK의 app.xaml 레벨에서만 작동합니다.

기여

이 도구는 기능 팀에서 직접 만들어졌으며 도구 개선에 대한 의견과 제안을 환영하지만 현재 대중의 기능이나 변경 사항을 수락하지는 않습니다. 앞으로 기여 모델을 발전시킬 수 있으므로 정기적으로 다시 확인하십시오.

이 프로젝트는 Microsoft 오픈 소스 행동 강령을 채택했습니다. 자세한 내용은 추가 질문이나 의견이 있으면 행동 강령 FAQ 또는 [email protected]에 문의하십시오.

참조하십시오

추가 Windows 소스 코드, 도구 및 샘플은 Github의 Windows를 참조하십시오.

확장하다

fluent xaml theme editor

유창한 XAML 테마 편집기

범용 Windows 플랫폼 개발

도구의 저장 버전

도구를 사용하는 방법

색상을 정제합니다

사전 설정을 작성, 저장 및로드합니다

대비 비율 확인

UWP 앱에서 테마를 내보내고 사용합니다

Code-Behind에서 ColorPaletteresources 사용

다운 레벨 테마

기여

참조하십시오

filament simple theme

editor app

fluent package builder

authentic theme

WhiteSur gtk theme

fluent bit

chat.petals.dev

GPT Prompt Templates

GPTyped

Google Dorks

shepherd

mongo express

Google Dorks

shepherd

mongo express