fluent xaml theme editor
1.0.0
| page_type | اسم | اللغات | منتجات | وصف | ||||
|---|---|---|---|---|---|---|---|---|
عينة | محرر موضوع XAML بطلاقة |
|
| أداة وتطبيق عينة توضح لك كيفية تصهيز تطبيقك دون عناء. Jumpstarting هذا من خلال إعطائك أيضًا إمكانية أدوار خفيفة الوزن لرؤية موضوعك المخصص ينبض بالحياة في تطبيقك. |
يحتوي هذا الريبو على الحل الكامل والرمز المصدر لمحرر سمة XAML بطلاقة - وهي أداة تساعد في إظهار مرونة نظام التصميم بطلاقة وكذلك تدعم عملية تطوير التطبيق من خلال توليد علامة XAML لتطبيقات إطار عمل الموارد المستخدمة في تطبيقات Windows (UWP) العالمية.
تم إنشاء الكود المصدري الموجود في هذا الريبو مع نظام Windows Universal متوفر في Visual Studio وهو مصمم للتشغيل على سطح المكتب والهاتف المحمول والمستقبلي الذي يدعم نظام Windows Universal.
ملاحظة: إذا لم تكن معتادًا على XAML ، فإن نظام Windows Universal وتصميم أو موارد وموارد بطلاقة وموارد ، يوصى بشدة بزيارة موقع منصة Windows الشامل للتصميم وتعرف نفسك على اللغة والإطار الذي تهدف إليه هذه الأداة.
يتطلب هذا التطبيق تحديث Visual Studio 2017 4 أو أعلى وإصدار مجموعة Windows Development (SDK) أو أعلى لنظام التشغيل Windows 10.
احصل على نسخة مجانية من Visual Studio 2017 Community Edition مع دعم لبناء تطبيقات منصة Windows الشاملة
بالإضافة إلى ذلك ، للبقاء على رأس آخر التحديثات لنظام التشغيل Windows وأدوات التطوير ، تصبح من الداخل Windows من خلال الانضمام إلى برنامج Windows Insider.
تصبح من الداخل Windows
إذا كنت لا تتطلع إلى أن تكون بعيدًا عن مشروع مفتوح المصدر ، وبدلاً من ذلك ترغب في استخدام التطبيق نفسه ، فيرجى الذهاب إلى إصدار Microsoft Store من هذه الأداة وتنزيله هناك.
مع بناء المعاينة ، يمكنك تحديد ثلاثة ألوان رئيسية لكل من السمات الخفيفة والظلام في عرض الخصائص اليمنى المسمى "Color Dictionary".
بالإضافة إلى الألوان الثلاثة الرئيسية لكل سمة ، يمكنك أيضًا توسيع أي واحد من الألوان الرئيسية لرؤية قائمة بالألوان الثانوية التي تغير مظهر أجزاء تحكم معينة فقط - وهذا يتيح لك أساسًا الحصول على اختيارات الألوان الخاصة بك للحالات.
للوصول إلى العرض التفصيلي للألوان ، ما عليك سوى النقر فوق شيفرون بجوار حوامل زر اللون الرئيسية.
سوف يشحن المحرر بعض الإعدادات المسبقة لتنظر في الحصول على فكرة عما يبدو عليه السمة في التطبيق. يقع المنسدلة المسبقة في الجزء العلوي من لوحة خصائص قاموس الألوان.
عندما تقوم بالتمهيد لأول مرة ، سيتم ضبطه دائمًا على الافتراضي - وهو التصميم الخفيف والظلام الافتراضي لجميع عناصر التحكم لدينا. يمكنك تحديد موضوعات مختلفة مثل Lavender و Night Time للحصول على فكرة عن كيفية قيام الأداة بتعيين عناصر التحكم الخاصة بنا.
بمجرد أن تكون مستعدًا للبدء في صنع موضوعك الخاص ، ما عليك سوى بدء تحرير الألوان! بمجرد أن تبدأ في تعديلها ، ستلاحظ أن الإعدادات المسبقة Combobox تنتقل من اسم الإعداد المسبق إلى "Custom":
هذا يعني أنك بدأت موضوعًا مؤقتًا جديدًا "مخصص". لن تؤثر أي تغييرات تجريها على أي من الإعدادات المسبقة الأخرى في هذا المربع.
من المحتمل أن يكون الجزء الأخير من محرر السمة أحد أهم أجزاء إنشاء موضوعك ، وهذا هو التأكد من أنك في أي من الموضوعات المتوافقة مع النقيض. توفر لك الأداة قائمة صغيرة من معلومات التباين على الجانب الأيسر من نافذة اختيار اللون عند اختيار لونك.
في هذه النافذة ، يمكنك رؤية التباين الخاص بك مع لون النص الأكثر انتشارًا في السمة التي تختار تحريرها ، في النص الأسود أعلاه لأنك تقوم بتحرير قيمة لون موضوع الضوء.
عندما تختار لونًا يقل عن نسبة التباين القياسية البالغة 4.5: 1 ، سيتم تنبيهك بنص أحمر بجوار قيمة التباين الخاصة بك.
يمكنك معرفة المزيد حول نسب التباين وأهميتها هنا.
بمجرد أن تخطر كل شيء ، سترغب في استخدامه في تطبيقك! للقيام بذلك ، ستحتاج إلى النقر فوق الزر "تصدير" في أسفل لوحة خصائص قاموس الألوان.
سيفتح هذا الزر نافذة منبثقة مع كعب عام غير معروف بالموارد (كما هو موضح أدناه).
ومع ذلك ، لا تجعل هذه النافذة نهائية ، إذا كنت ترغب في إجراء بعض التغييرات على السمة وإعادة تصديرها إلى نافذة التصدير ، فسيتم تحديثها بقيم الألوان المتغيرة.
ومع ذلك ، بمجرد أن تكون جاهزًا لاستخدامه في التطبيق الخاص بك ، انقر فوق الزر "Copy to Shellboard" في الزاوية اليمنى السفلى وانتقل إلى حل 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 >بمجرد أن يكون ذلك ، انتهيت! ستكون ألوان السمة الخاصة بك الآن منتشرة عبر تطبيقك أو صفحتك حسب.
للوصول إلى ColorPaletteresources API في الكود ، ولتغيير أي من خصائص الألوان في وقت التشغيل ، فإن الحلقة من خلال القواميس المدمجة في 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 ;
}لا نوصي بالقيام بذلك في كثير من الأحيان في وقت التشغيل حيث يمكنك تجربة بعض مشكلات الأداء ، ولكن إذا تم وضعها في صفحة الإعدادات أو المناطق التي لا تتوقع من المستخدمين تبديلها في كثير من الأحيان ، فلن يكون الأداء سيئًا للغاية.
نصيحة! تحتاج إلى إعادة تحميل موارد الموارد من أجل الحصول على الموارد في الداخل للحصول على أي تغييرات ألوان جديدة قمت بتطبيقها. يمكنك القيام بذلك عن طريق التقليب المطلوبة إلى موضوع مختلف والعودة مرة أخرى. هذا هو ما تفعله وظيفة realoadpageTheme.
على الرغم من أن واجهة برمجة التطبيقات المستخدمة في الكود الذي تم تصديره لهذه الأداة مخصصة للإصدار 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 هي واجهة برمجة تطبيقات ودية لألعاب Systemcolors التي تجلس داخل generic.xaml وتتيح أن يتم تحديد هذه الصور في أي مستوى.
إذا كنت ترغب في تمكين هذا السمة نفسها من العمل على مستوى التسوق ، فسيتعين عليك تحديد كل ألوان نظام بشكل فردي مع كل لون من موضوعك:
< 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 هي واجهة برمجة التطبيقات التي تسمح بسلوك النطاق . لن يعمل تنسيق الترميز هذا إلا على مستوى App.xaml لـ SDKs السابقة.
تم إنشاء هذه الأداة مباشرة من فريق الميزات ، وعلى الرغم من أننا نرحب بالمدخلات والاقتراحات الخاصة بك لتحسين الأداة ، فإننا لا نقبل أي ميزات أو تغييرات من الجمهور في هذا الوقت. يرجى التحقق مرة أخرى بانتظام لأننا قد نطور نموذج مساهمتنا في المستقبل.
اعتمد هذا المشروع رمز سلوك المصدر المفتوح Microsoft. لمزيد من المعلومات ، راجع برنامج Code of Conducted أو اتصل بـ [email protected] مع أي أسئلة أو تعليقات إضافية.
للحصول على رمز مصدر Windows وأدوات وعينات إضافية ، يرجى الاطلاع على Windows على Github.
