Переопределение цветов в теме - ecvento/Material.Avalonia-Wiki GitHub Wiki
Существует несколько точек входа для начала работы с темами Material для вашего приложения. Все они основаны на том, что вы должны добавить элемент в свой файл в разделе App.axaml
и Application.Resources
MaterialTheme
- Если вы не планируете менять тему и просто хотите установить цвета.
MaterialThemeBase
- Если вы хотите контролировать свою тему и загружать ее самостоятельно.
MaterialTheme - на самом деле это оболочка, которая поможет вам настроить вашу тему с помощью свойств.
Вы все еще можете использовать свойства, но не рекомендуется изменять ее свойства (MaterialThemeBase
, BaseTheme
, PrimaryColor
, SecondaryColor
, CurrentTheme
), так как они влияют на CurrentTheme, если вам необходимо создать свою ITheme используйте MaterialThemeBase
MaterialThemeBase - точка входа в новую систему тем и стилей Material.Avalonia
. Темой приложения можно управлять, задав значение свойства.
ПРИМЕЧАНИЕ: Установка значения для свойства внутренне преобразует ваше новое значение в структуру этого реализующего интерфейса. Это делается для того, чтобы внутреннее состояние объекта темы было неизменным. Поэтому, если вы получите и используете значение свойства (или подписываетесь, например), то вы получите структуру: CurrentTheme ITheme CurrentThemeChanged
Вы можете создать новый пустой объект с помощью ctor или использовать вспомогательный метод для создания предварительно заполненной темы:
Theme.Create
using Avalonia.Media;
using Material.Colors;
using Material.Styles.Themes;
using Material.Styles.Themes.Base;
...
PrimaryColor primary = PrimaryColor.DeepPurple;
Color primaryColor = SwatchHelper.Lookup[(MaterialColor)primary];
SecondaryColor secondary = SecondaryColor.Teal;
Color secondaryColor = SwatchHelper.Lookup[(MaterialColor)secondary];
// For dark theme use Theme.Dark;
IBaseTheme baseTheme = Theme.Light;
ITheme theme = Theme.Create(baseTheme, primaryColor, secondaryColor);
При желании можно использовать любые произвольные цвета:
Color primaryColor = global::Avalonia.Media.Colors.Purple;
Color secondaryColor = global::Avalonia.Media.Colors.Lime;
IBaseTheme baseTheme = Theme.Light;
ITheme theme = Theme.Create(baseTheme, primaryColor, secondaryColor);
Для изменения основных основных/акцентных цветов или базового режима используйте на любом экземпляре: SetBaseTheme
SetPrimaryColor
SetSecondaryColor
ITheme
Вы можете использовать метод расширений для быстрого поиска экземпляров MaterialTheme (или MaterialThemeBase) в вашем приложении. Пример использования: ThemeExtensions.LocateMaterialTheme
var materialTheme = Application.Current.LocateMaterialTheme<MaterialTheme>();
Если вы хотите настроить тему вручную, то приложение запускается (например, чтобы позволить пользователю изменять и сохранять темы), вы можете использовать следующий подход:
- Откройте свой код
app.axaml.cs
и в OnFrameworkInitializationCompleted начните редактировать код (делайте что хотите) Например, я создам темную тему с голубым цветом в качестве основного цвета и оранжевым вторичным цветом и установлю его для своего приложения:
public override void OnFrameworkInitializationCompleted() {
base.OnFrameworkInitializationCompleted();
var primary = PrimaryColor.Cyan;
var primaryColor = SwatchHelper.Lookup[(MaterialColor)primary];
var secondary = SecondaryColor.Orange;
var secondaryColor = SwatchHelper.Lookup[(MaterialColor)secondary];
var theme = Theme.Create(Theme.Dark, primaryColor, secondaryColor);
var themeBootstrap = this.LocateMaterialTheme<MaterialThemeBase>();
themeBootstrap.CurrentTheme = theme;
}
ПРИМЕЧАНИЕ: Если вы всегда устанавливаете тему из кода, используйте переопределение в Application.Styles. Потому что создадутся дополнительные накладные расходы на применение исходных стилей (написанных на xaml), которые вы все равно переопределите в MaterialThemeBase
MaterialTheme
Кроме того, вы можете отреагировать на изменение (например, сохранить новую тему в конфигурации), подписавшись на (или подписавшись на изменение через систему свойств Avalonia по умолчанию).
Вот пример сохранения и загрузки темы в файл (не предпочтительный способ сохранения/загрузки темы, а просто пример): CurrentTheme
CurrentThemeChanged
CurrentThemeProperty
public override void OnFrameworkInitializationCompleted() {
base.OnFrameworkInitializationCompleted();
var themeBootstrap = this.LocateMaterialTheme<MaterialThemeBase>();
themeBootstrap.CurrentTheme = LoadOrCreateDefaultTheme();
themeBootstrap.CurrentThemeChanged.Subscribe(newTheme => {
var configText = JsonConvert.SerializeObject(newTheme);
File.WriteAllText("themeconfig.json", configText);
});
}
private ITheme LoadOrCreateDefaultTheme() {
try {
var text = File.ReadAllText("themeconfig.json");
return JsonConvert.DeserializeObject<Theme>(text);
}
catch (Exception) {
// In case of any exception or file missing, etc
// Fallback to creating default theme
var primary = PrimaryColor.Cyan;
var primaryColor = SwatchHelper.Lookup[(MaterialColor)primary];
var secondary = SecondaryColor.Orange;
var secondaryColor = SwatchHelper.Lookup[(MaterialColor)secondary];
return Theme.Create(Theme.Dark, primaryColor, secondaryColor);
}
}
Вы можете задать нужные цвета непосредственно для объекта ITheme, который затем используется для установки значения, но есть способ проще - нужно добавить новый ресурс в app.axaml (CurrentTheme => MaterialThemeBase => Application.Resources) в вашем следующем виде:
<Application.Styles>
...
<themes:MaterialTheme BaseTheme="Light" PrimaryColor="Purple" SecondaryColor="Lime" />
<Application.Resources>
<SolidColorBrush x:Key="PrimaryHueLightBrush" Color="Red"></SolidColorBrush>
</Application.Resources>
Или через новый стиль:
<Application.Styles>
...
<themes:MaterialTheme BaseTheme="Light" PrimaryColor="Purple" SecondaryColor="Lime" />
<Style>
<Style.Resources>
<SolidColorBrush x:Key="PrimaryHueLightBrush" Color="Red"></SolidColorBrush>
</Style.Resources>
</Style>
</Application.Styles>
- PrimaryHueLightBrush
- PrimaryHueLightForegroundBrush
- PrimaryHueMidBrush
- PrimaryHueMidForegroundBrush
- PrimaryHueDarkBrush
- PrimaryHueDarkForegroundBrush
- SecondaryHueLightBrush
- SecondaryHueLightForegroundBrush
- SecondaryHueMidBrush
- SecondaryHueMidForegroundBrush
- SecondaryHueDarkBrush
- SecondaryHueDarkForegroundBrush
- ValidationErrorBrush
- MaterialDesignBackground
- MaterialDesignPaper
- MaterialDesignCardBackground
- MaterialDesignToolBarBackground
- MaterialDesignBody
- MaterialDesignBodyLight
- MaterialDesignColumnHeader
- MaterialDesignCheckBoxOff
- MaterialDesignCheckBoxDisabled
- MaterialDesignTextBoxBorder
- MaterialDesignDivider
- MaterialDesignSelection
- MaterialDesignToolForeground
- MaterialDesignToolBackground
- MaterialDesignFlatButtonClick
- MaterialDesignFlatButtonRipple
- MaterialDesignToolTipBackground
- MaterialDesignChipBackground
- MaterialDesignSnackbarBackground
- MaterialDesignSnackbarMouseOver
- MaterialDesignSnackbarRipple
- MaterialDesignTextFieldBoxBackground
- MaterialDesignTextFieldBoxHoverBackground
- MaterialDesignTextFieldBoxDisabledBackground
- MaterialDesignTextAreaBorder
- MaterialDesignTextAreaInactiveBorder
- MaterialDesignDataGridRowHoverBackground