Переопределение цветов в теме - 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