ألوان النظام الأساسي الافتراضية
عندما لا تقوم بتعيين الأنماط أو الألوان ، فإن واجهة المستخدم الخاصة بك ستتحول افتراضيًا إلى السمة الأصلية للنظام الأساسي الذي يعمل عليه التطبيق. على سبيل المثال ، إليك ما يبدو عليه نموذج التطبيق الفارغ الجديد هذا على نظام iOS:
<StackLayout>
<Frame BackgroundColor="#2196F3" Padding="36,48,36,36" CornerRadius="0">
<Label Text="Welcome to Xamarin.Forms!" HorizontalTextAlignment="Center" TextColor="White" FontSize="36" />
</Frame>
<Label Text="Start developing now" FontSize="Title" Padding="30,10,30,10" />
<Label Text="Make changes to your XAML file and save to see your UI update in the running app with XAML Hot Reload. Give it a try!" FontSize="16" Padding="30,0,30,0" />
<Label FontSize="16" Padding="30,24,30,0">
<Label.FormattedText>
<FormattedString>
<FormattedString.Spans>
<Span Text="Learn more at " />
<Span Text="https://aka.ms/xamarin-quickstart" FontAttributes="Bold" />
</FormattedString.Spans>
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>
عند تبديل محاكي iOS بين الوضع الداكن والفاتح (CMD + SHFT + A) ، يمكنك رؤية خلفية ContentPage تتغير من الأبيض إلى الأسود والنص من الأسود إلى الأبيض. هذه هي ألوان النظام الأساسي الافتراضية. قارن هذا بالعنوان الذي يظل باللون الأزرق ونص العنوان الذي يظل أبيضًا. هذه هي الألوان الصريحة المحددة في الكود.
السيطرة على الأسود
للتحكم الآن في ألوان العنوان والنص الغامق والخفيف ، يمكنك استبدال الألوان الثابتة بـ AppThemeBinding ، والتي ستتفاعل في وقت التشغيل مع إعدادات سمة نظام التشغيل لديك. قم أولاً بتمكين هذه الميزة عن طريق إضافة علامة إلى App.xaml.cs:
public App()
{
Device.SetFlags(new string[]{ "AppTheme_Experimental" });
InitializeComponent();
}تحديث الرأس فقط ، يبدو كالتالي:
<Frame BackgroundColor="{AppThemeBinding Dark=#2196F3, Light=#2196F3}" Padding="36,48,36,36" CornerRadius="0">
<Label Text="Welcome to Xamarin.Forms!" HorizontalTextAlignment="Center" TextColor="{AppThemeBinding Dark=DarkBlue, Light=White}" FontSize="36" />
</Frame>
يمكنك بالطبع تغيير الأنماط مثل هنا:
<ContentPage.Resources>
<Style x:Key="HeaderBg" TargetType="Frame">
<Setter Property="BackgroundColor" Value="{AppThemeBinding Dark=#1d1d1d, Light=#2196F3}"/>
<Setter Property="Padding" Value="36,48,36,36"/>
<Setter Property="CornerRadius" Value="0"/>
</Style>
<Style x:Key="HeaderTitle" TargetType="Label">
<Setter Property="TextColor" Value="{AppThemeBinding Dark=#F1F1F1, Light=White}"/>
<Setter Property="HorizontalTextAlignment" Value="Center"/>
<Setter Property="FontSize" Value="36"/>
</Style>
</ContentPage.Resources>
<Frame Style="{StaticResource HeaderBg}">
<Label
Style="{StaticResource HeaderTitle}"
Text="Welcome to Xamarin.Forms!" />
</Frame>وإذا كنت تريد استخدام أنماط ألوان محددة مسبقًا ، فقد تبدو كما يلي:
<Color x:Key="Background_Dark">#1d1d1d</Color>
<Color x:Key="Background_Light">#1d1d1d</Color>
<Style x:Key="HeaderBg" TargetType="Frame">
<Setter Property="BackgroundColor" Value="{AppThemeBinding Dark={StaticResource Background_Dark}, Light={StaticResource Background_Light}}"/>إعطاء المستخدم الاختيار
في بعض الأحيان ، قد ترغب في منح المستخدم التحكم في السمة بدلاً من الاعتماد على سمة نظام التشغيل. للقيام بذلك ، ما عليك سوى توفير طريقة لتثبيت App.Current.UserAppTheme مثل هذا:
App.Current.UserAppTheme = OSAppTheme.Dark;
بعد ذلك ، لإعادة تعيين التطبيق بحيث يستجيب تلقائيًا لتغييرات سمة نظام التشغيل ، يمكنك تعيينه على "غير محدد":
App.Current.UserAppTheme = OSAppTheme.Unspecified;أنشئ الآن التجربة الموضحة أعلاه وأضف ثلاثة مربعات اختيار إلى واجهتك: "افتراضي" و "داكن" و "فاتح".
<StackLayout Orientation="Horizontal" Spacing="10">
<CheckBox IsChecked="{Binding UseDeviceThemeSettings}" VerticalOptions="Center" />
<Label Text="Use device settings"
VerticalOptions="Center"/>
</StackLayout>
<StackLayout
IsVisible="{Binding UseDeviceThemeSettings, Converter={StaticResource InvertedBoolConverter}}"
Orientation="Horizontal"
Spacing="10">
<CheckBox IsChecked="{Binding UseDarkMode}" VerticalOptions="Center"/>
<Label Text="Dark Theme"
VerticalOptions="Center"/>
</StackLayout>
<StackLayout
IsVisible="{Binding UseDeviceThemeSettings, Converter={StaticResource InvertedBoolConverter}}"
Orientation="Horizontal"
Spacing="10">
<CheckBox IsChecked="{Binding UseLightMode}" VerticalOptions="Center"/>
<Label Text="Light Theme"
VerticalOptions="Center"/>
</StackLayout>ثم أضف الخصائص العامة إلى BindingContext للصفحة ، وفي هذه الحالة تتعامل الصفحة مع حالتها الخاصة.
public MainPage()
{
BindingContext = this;
InitializeComponent();
}
private bool _useDarkMode;
public bool UseDarkMode {
get {
return _useDarkMode;
}
set {
_useDarkMode = value;
if(_useDarkMode)
{
UseLightMode = UseDeviceThemeSettings = false;
App.Current.UserAppTheme = OSAppTheme.Dark;
}
}
}
private bool _useLightMode;
public bool UseLightMode
{
get
{
return _useLightMode;
}
set
{
_useLightMode = value;
if (_useLightMode)
{
UseDarkMode = UseDeviceThemeSettings = false;
App.Current.UserAppTheme = OSAppTheme.Light;
}
}
}
private bool _useDeviceThemeSettings = true;
public bool UseDeviceThemeSettings
{
get
{
return _useDeviceThemeSettings;
}
set
{
_useDeviceThemeSettings = value;
if(_useDeviceThemeSettings)
{
App.Current.UserAppTheme = OSAppTheme.Unspecified;
}
}
}يقوم الرمز أعلاه بالتبديل بين الظلام والضوء وفقًا لتفضيلات المستخدم في التطبيق ، ثم التبديل بين تفضيل المستخدم وتفضيل سمة نظام التشغيل.
غلاف!
هذا التطبيق الجديد AppThemeBinding light / dark mode المساعد ، جنبًا إلى جنب مع UserAppTheme ، يجعل من السهل العمل مع الأوضاع المظلمة في تطبيقات Xamarin.Forms. هذا لا يعمل فقط مع الألوان ، ولكن أيضًا للصور والموارد الأخرى. كما هو موضح سابقًا ، فهو يعمل حتى مع الأشكال والمسارات الجديدة المضافة في Xamarin.Forms 4.7!
لمزيد من المعلومات حول سمات التطبيق ، تحقق من وثائق تغييرات سمات النظام. إذا كنت تريد الذهاب إلى أبعد من المظاهر الداكنة والفاتحة ، فحاول استخدام الموارد الديناميكية وحتى تحميل السمات في وقت التشغيل لإنشاء سمات في تطبيقاتك.