fluent xaml theme editor
1.0.0
| page_type | ชื่อ | ภาษา | สินค้า | คำอธิบาย | ||||
|---|---|---|---|---|---|---|---|---|
ตัวอย่าง | ตัวแก้ไขธีม XAML คล่องแคล่ว |
|
| แอพเครื่องมือและตัวอย่างที่แสดงวิธีการธีมแอปของคุณได้อย่างง่ายดาย การเริ่มต้นสิ่งนี้โดยการให้ความสามารถในการใช้เครื่องมือที่มีน้ำหนักเบาเพื่อดูธีมที่กำหนดเองของคุณมีชีวิตอยู่ในแอพของคุณ |
repo นี้มีโซลูชันเต็มรูปแบบและซอร์สโค้ดไปยังตัวแก้ไขชุดรูปแบบ XAML ที่คล่องแคล่วซึ่งเป็นเครื่องมือที่ช่วยแสดงให้เห็นถึงความยืดหยุ่นของระบบการออกแบบที่คล่องแคล่วรวมทั้งรองรับกระบวนการพัฒนาแอพโดยการสร้างมาร์กอัป XAML สำหรับเฟรมเวิร์กทรัพยากรของเราที่ใช้ในแอปพลิเคชัน Windows Windows (UWP)
ซอร์สโค้ดที่อยู่ใน repo นี้ถูกสร้างขึ้นด้วยแพลตฟอร์ม Universal Windows ที่มีอยู่ใน Visual Studio และได้รับการออกแบบมาเพื่อทำงานบนเดสก์ท็อปอุปกรณ์พกพาและในอนาคตที่รองรับแพลตฟอร์ม Universal Windows
หมายเหตุ: หากคุณไม่คุ้นเคยกับ XAML แพลตฟอร์ม Universal Windows การออกแบบที่คล่องแคล่วหรือทรัพยากรและการจัดหาทรัพยากรขอแนะนำอย่างยิ่งให้คุณเยี่ยมชมไซต์แพลตฟอร์ม Windows Universal Design และทำความคุ้นเคยกับภาษาและกรอบงานที่เครื่องมือนี้มีไว้สำหรับ
แอปพลิเคชันนี้ต้องการ Visual Studio 2017 UPDATE 4 หรือสูงกว่าและ Windows Software Development Kit (SDK) เวอร์ชัน 17763 หรือสูงกว่าสำหรับ Windows 10
รับสำเนา Visual Studio 2017 Community Edition ฟรีพร้อมสนับสนุนการสร้างแอพแพลตฟอร์ม Windows Universal Windows
นอกจากนี้การอยู่ด้านบนของการอัปเดตล่าสุดของ Windows และเครื่องมือการพัฒนากลายเป็น Windows Insider โดยเข้าร่วมโปรแกรม Windows Insider
เป็นคนวงใน Windows
หากคุณไม่ได้มองหาโครงการโอเพ่นซอร์สนี้และต้องการใช้แอพเองโปรดไปที่ Microsoft Store เวอร์ชันของเครื่องมือนี้และดาวน์โหลดที่นั่น
ด้วยการสร้างตัวอย่างคุณสามารถเลือกสามสีที่สำคัญสำหรับทั้งธีมแสงและสีเข้มในมุมมองคุณสมบัติทางขวาที่มีป้ายกำกับว่า "พจนานุกรมสี"
นอกเหนือจากสามสีที่สำคัญสำหรับแต่ละธีมคุณยังสามารถขยายหนึ่งในสีหลักใด ๆ เพื่อดูรายการสีรองที่เปลี่ยนรูปลักษณ์ของชิ้นส่วนควบคุมบางส่วนเท่านั้น - โดยทั่วไปจะช่วยให้คุณได้รับรายละเอียดมากขึ้นด้วยตัวเลือกสีของคุณสำหรับรัฐ
ในการเข้าถึงมุมมองโดยละเอียดของสีเพียงคลิกที่เชฟรอนถัดจากปุ่มสีหลัก
บรรณาธิการจะจัดส่งด้วยสถานที่ตั้งล่วงหน้าเพื่อให้คุณดูเพื่อให้เข้าใจว่าธีมเป็นอย่างไรในแอพ แบบเลื่อนลงที่ตั้งไว้ล่วงหน้าตั้งอยู่ที่ด้านบนของแผงคุณสมบัติพจนานุกรมสี
เมื่อคุณบูตครั้งแรกมันจะถูกตั้งค่าเป็นค่าเริ่มต้นเสมอ - ซึ่งเป็นค่าเริ่มต้นของชุดรูปแบบแสงและความมืดสำหรับการควบคุมทั้งหมดของเรา คุณสามารถเลือกธีมที่แตกต่างกันเช่นลาเวนเดอร์และตอนกลางคืนเพื่อให้ทราบว่าเครื่องมือจะเป็นวิธีการควบคุมของเราอย่างไร
เมื่อคุณพร้อมที่จะเริ่มสร้างธีมของคุณเองเพียงเริ่มแก้ไขสี! เมื่อคุณเริ่มปรับแต่งพวกเขาคุณจะสังเกตเห็นว่าค่าที่ตั้งไว้ล่วงหน้า Combobox ไปจากชื่อของที่ตั้งไว้ล่วงหน้าเป็น "กำหนดเอง":
ซึ่งหมายความว่าคุณเริ่มต้นธีมชั่วคราวใหม่ที่“ กำหนดเอง” การเปลี่ยนแปลงใด ๆ ที่คุณทำจะไม่ส่งผลกระทบต่อค่าที่ตั้งไว้ล่วงหน้าอื่น ๆ ในกล่องนั้น
ส่วนสุดท้ายของตัวแก้ไขชุดรูปแบบอาจเป็นหนึ่งในส่วนที่สำคัญที่สุดในการสร้างธีมของคุณและนั่นคือเพื่อให้แน่ใจว่าในชุดรูปแบบที่เกี่ยวข้องคุณเป็นไปตามความคมชัด เครื่องมือนี้ให้ข้อมูลความคมชัดขนาดเล็กทางด้านซ้ายมือของหน้าต่างการเลือกสีเมื่อเลือกสีของคุณ
ในหน้าต่างนี้คุณสามารถเห็นความคมชัดของคุณด้วยสีข้อความที่แพร่หลายที่สุดในชุดรูปแบบที่คุณเลือกที่จะแก้ไขในข้อความกรณีสีดำด้านบนเพราะคุณกำลังแก้ไขค่าสีธีมแสง
เมื่อคุณเลือกสีที่อยู่ต่ำกว่าอัตราส่วนความคมชัดมาตรฐานที่ 4.5: 1 คุณจะได้รับการแจ้งเตือนด้วยข้อความสีแดงถัดจากค่าความคมชัดของคุณ
คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับอัตราส่วนความคมชัดและความสำคัญของพวกเขาที่นี่
เมื่อคุณมีธีมทุกอย่างแล้วคุณจะต้องใช้มันในแอพของคุณ! ในการทำเช่นนั้นคุณจะต้องคลิกปุ่ม "ส่งออก" ที่ด้านล่างของแผงคุณสมบัติพจนานุกรมสี
ปุ่มนั้นจะเปิดหน้าต่างป๊อปอัพที่มีต้นขั้วทรัพยากรทั่วไปที่ไม่มีชื่อ (เห็นด้านล่าง)
หน้าต่างนี้ไม่ได้ทำอะไรสุดท้ายหากคุณต้องการเปลี่ยนแปลงบางอย่างในธีมและส่งออกไปยังหน้าต่างส่งออกอีกครั้งมันจะรีเฟรชด้วยค่าสีที่เปลี่ยนแปลงของคุณ
อย่างไรก็ตามเมื่อคุณพร้อมที่จะใช้ในแอพของคุณให้คลิกปุ่ม“ คัดลอกไปยังคลิปบอร์ด” ที่มุมล่างขวาและไปที่โซลูชัน 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
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 >เมื่ออยู่ในนั้นคุณก็เสร็จแล้ว! ตอนนี้สีธีมของคุณจะแพร่หลายไปทั่วแอปหรือหน้าของคุณขึ้นอยู่กับ
ในการเข้าถึง API ColorPaletteresources ในรหัสด้านหลังและเพื่อเปลี่ยนคุณสมบัติสีใด ๆ ที่รันไทม์ลูปผ่านพจนานุกรมที่ผสานใน App.xaml (หรือในขอบเขตที่คุณรวมธีมของคุณ)
นี่คือตัวอย่างของวิธีการคว้าและแก้ไขคุณสมบัติของ ColorPaletteresources ใน C#:
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 ;
}เราไม่แนะนำให้ทำสิ่งนี้บ่อยเกินไปที่รันไทม์เพราะคุณอาจประสบปัญหาด้านประสิทธิภาพบางอย่าง แต่ถ้าอยู่ในหน้าการตั้งค่าหรือพื้นที่ที่คุณไม่คาดหวังให้ผู้ใช้สลับบ่อยครั้งประสิทธิภาพไม่ควรเลวร้ายเกินไป
เคล็ดลับ! คุณต้องโหลด Resourcedictionary ใหม่เพื่อให้ทรัพยากรภายในรับการเปลี่ยนแปลงสีใหม่ที่คุณใช้ คุณสามารถทำได้โดยการพลิกธีมอื่น ๆ และกลับมาอีกครั้ง นั่นคือสิ่งที่ฟังก์ชั่น ReloadPagetheme กำลังทำอยู่
แม้ว่า API ที่ใช้ในรหัสที่ส่งออกสำหรับเครื่องมือนี้ใช้สำหรับเวอร์ชัน 17744 หรือมากกว่า แต่ก็ไม่ซับซ้อนเกินไปที่จะให้ธีมของคุณทำงานกับเวอร์ชัน SDK ก่อนหน้านี้
เมื่อคุณส่งออกชุดรูปแบบของคุณคุณจะเห็นมาร์กอัปที่มีทรัพยากรด้วยคำจำกัดความของ ColorPaletteresources คล้ายกับสิ่งนี้:
< 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 เป็น API ที่เป็นมิตรสำหรับ SystemColors ของเราที่นั่งอยู่ใน generic.xaml และอนุญาตให้ SystemColors เหล่านั้นถูกกำหนดขอบเขตในทุกระดับ
หากคุณต้องการเปิดใช้งานชุดรูปแบบเดียวกันนี้เพื่อทำงานในระดับลงคุณจะต้องกำหนดแต่ละ SystemColor เป็นรายบุคคลด้วยแต่ละสีจากธีมของคุณ:
< 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 ที่อนุญาตให้ มีพฤติกรรมการกำหนดขอบเขต รูปแบบมาร์กอัปนี้จะทำงานได้ที่ระดับ App.xAML สำหรับ SDK ก่อนหน้าเท่านั้น
เครื่องมือนี้ถูกสร้างขึ้นโดยตรงจากทีมฟีเจอร์และแม้ว่าเราจะยินดีต้อนรับข้อมูลและคำแนะนำของคุณสำหรับการปรับปรุงเครื่องมือ แต่เราไม่ยอมรับคุณสมบัติหรือการเปลี่ยนแปลงใด ๆ จากสาธารณะในเวลานี้ โปรดกลับมาตรวจสอบกลับมาเป็นประจำเนื่องจากเราอาจพัฒนารูปแบบการบริจาคของเราในอนาคต
โครงการนี้ได้นำรหัสการดำเนินงานของ Microsoft โอเพ่นซอร์สมาใช้ สำหรับข้อมูลเพิ่มเติมโปรดดูจรรยาบรรณคำถามที่พบบ่อยหรือติดต่อ [email protected] พร้อมคำถามหรือความคิดเห็นเพิ่มเติมใด ๆ
สำหรับซอร์สโค้ดเครื่องมือและตัวอย่างของ Windows เพิ่มเติมโปรดดู Windows บน GitHub
