microsoft / fluent-xaml-theme-editor Goto Github PK
View Code? Open in Web Editor NEWThe Fluent Design XAML theme editor.
License: MIT License
The Fluent Design XAML theme editor.
License: MIT License
I download this app from Microsoft Store.
In this week, I find the app can not launch anymore, either on pc or tablet, just stuck in the Logo page.
It used to be work well. I don't know the reason.
My Pc OS version: 19041.264
My Tablet OS version: 18363.836
If you need more information, please let me know.
Support for built in ThemeResources based AcrylicBrush, both the in-app acrylic and the window-acrylic ( when you window of your app is transparent to other apps ). Since the theme editor only deals with dark and light theme resources, I think custom acrylic doesn't make any sense here ( correct me if I am wrong ).
The Border control does not follow the theme. If I set
BorderBrush="{ThemeResource ComboBoxBorderThemeBrush}"
I get light and dark colors but they don't match the Combo Box Border colors?
What is the best way to apply the theme to a Border?
I've been testing the Fluent XAML Theme Editor and changed a few colours for the dark theme, as you can see some controls don't inherit the theme colours, the combobox, textbox and datepicker amongst others are black rather than a theme colour.
It's not really viable to use as a theme editor if each control has to be themed individually. Is this a bug and/or will it be fixed in final version?
It would be helpful to have a description for the color headings (Region, Base, Primary) to better explain their function. A "more information" button could be an example.
So I made a custom combo box style where the border wraps around the header as well as combobox content itself., it was working fine as expected and header was showing up fine, but then I opened "Fluent xaml theme editor" (uwp theme generator from store) and left it on default and exported the theme into my "app.xaml" and now header has disappeared. Below is the link to reproduce the issue, just open the project and run it and u will see on both light and dark theme there is no header on the combobox.
reproduce issue project : https://github.com/touseefbsb/ComboBoxThemeIssue
min target : 1803
target sdk : 1809/1903 ( 1809 shows header only in dark theme, 1903 doesnt show header in both themes )
Output
Code
MainPage
<Pivot>
<PivotItem Header="Dropdowns">
<PivotItem.Resources>
<DataTemplate x:Key="dropdowns">
<StackPanel Background="{ThemeResource SystemAltHighColor}">
<ComboBox Header="Header">
<ComboBoxItem>123</ComboBoxItem>
<ComboBoxItem>456</ComboBoxItem>
<ComboBoxItem>789</ComboBoxItem>
</ComboBox>
</StackPanel>
</DataTemplate>
</PivotItem.Resources>
<Pivot>
<PivotItem Header="Light" RequestedTheme="Light">
<ContentControl ContentTemplate="{StaticResource dropdowns}" />
</PivotItem>
<PivotItem Header="Dark" RequestedTheme="Dark">
<ContentControl ContentTemplate="{StaticResource dropdowns}" />
</PivotItem>
</Pivot>
</PivotItem>
</Pivot>
App.xaml
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<!-- 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
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:BelowWindows10version1809="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractNotPresent(Windows.Foundation.UniversalApiContract, 7)"
xmlns:Windows10version1809="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract, 7)">
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<ResourceDictionary.MergedDictionaries>
<Windows10version1809: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>
<BelowWindows10version1809:Color x:Key="SystemAccentColor">#FF0073CF</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemAltHighColor">#FF000000</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemAltLowColor">#FF000000</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemAltMediumColor">#FF000000</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemAltMediumHighColor">#FF000000</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemAltMediumLowColor">#FF000000</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemBaseHighColor">#FFFFFFFF</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemBaseLowColor">#FF333333</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemBaseMediumColor">#FF9A9A9A</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemBaseMediumHighColor">#FFB4B4B4</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemBaseMediumLowColor">#FF676767</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemChromeAltLowColor">#FFB4B4B4</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemChromeBlackHighColor">#FF000000</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemChromeBlackLowColor">#FFB4B4B4</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemChromeBlackMediumColor">#FF000000</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemChromeBlackMediumLowColor">#FF000000</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemChromeDisabledHighColor">#FF333333</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemChromeDisabledLowColor">#FF9A9A9A</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemChromeGrayColor">#FF808080</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemChromeHighColor">#FF808080</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemChromeLowColor">#FF151515</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemChromeMediumColor">#FF1D1D1D</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemChromeMediumLowColor">#FF2C2C2C</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemChromeWhiteColor">#FFFFFFFF</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemListLowColor">#FF1D1D1D</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemListMediumColor">#FF333333</BelowWindows10version1809:Color>
<Color x:Key="SystemChromeAltMediumHighColor">#CC000000</Color>
<Color x:Key="SystemChromeAltHighColor">#FF333333</Color>
<Color x:Key="SystemRevealListLowColor">#FF1D1D1D</Color>
<Color x:Key="SystemRevealListMediumColor">#FF333333</Color>
<!-- Override system shape defaults -->
<CornerRadius x:Key="ControlCornerRadius">2,2,2,2</CornerRadius>
<CornerRadius x:Key="OverlayCornerRadius">4,4,4,4</CornerRadius>
<!-- Override system borders -->
<Thickness x:Key="MenuBarItemBorderThickness">1,1,1,1</Thickness>
<Thickness x:Key="GridViewItemMultiselectBorderThickness">1,1,1,1</Thickness>
<Thickness x:Key="CheckBoxBorderThemeThickness">1</Thickness>
<x:Double x:Key="GridViewItemSelectedBorderThemeThickness">1</x:Double>
<x:Double x:Key="RadioButtonBorderThemeThickness">1</x:Double>
<Thickness x:Key="ButtonBorderThemeThickness">1,1,1,1</Thickness>
<Thickness x:Key="CalendarDatePickerBorderThemeThickness">1,1,1,1</Thickness>
<Thickness x:Key="TimePickerBorderThemeThickness">1,1,1,1</Thickness>
<Thickness x:Key="DatePickerBorderThemeThickness">1,1,1,1</Thickness>
<Thickness x:Key="ToggleSwitchOuterBorderStrokeThickness">1,1,1,1</Thickness>
<Thickness x:Key="RepeatButtonBorderThemeThickness">1,1,1,1</Thickness>
<Thickness x:Key="SearchBoxBorderThemeThickness">1,1,1,1</Thickness>
<Thickness x:Key="ToggleButtonBorderThemeThickness">1,1,1,1</Thickness>
<Thickness x:Key="TextControlBorderThemeThickness">1,1,1,1</Thickness>
<Thickness x:Key="ButtonRevealBorderThemeThickness">1,1,1,1</Thickness>
<Thickness x:Key="RepeatButtonRevealBorderThemeThickness">1,1,1,1</Thickness>
<Thickness x:Key="ToggleButtonRevealBorderThemeThickness">1,1,1,1</Thickness>
<Thickness x:Key="AppBarEllipsisButtonRevealBorderThemeThickness">1,1,1,1</Thickness>
<Thickness x:Key="AppBarButtonRevealBorderThemeThickness">1,1,1,1</Thickness>
<Thickness x:Key="AppBarToggleButtonRevealBorderThemeThickness">1,1,1,1</Thickness>
<Thickness x:Key="ListViewItemRevealBorderThemeThickness">1,1,1,1</Thickness>
<Thickness x:Key="GridViewItemRevealBorderThemeThickness">1,1,1,1</Thickness>
<Thickness x:Key="ComboBoxItemRevealBorderThemeThickness">1,1,1,1</Thickness>
<x:Double x:Key="PersonPictureEllipseBadgeStrokeThickness">1</x:Double>
<!-- Override system generated accent colors -->
<Color x:Key="SystemAccentColorDark1">#FF1D85D7</Color>
<Color x:Key="SystemAccentColorDark2">#FF3B97DF</Color>
<Color x:Key="SystemAccentColorDark3">#FF58A8E8</Color>
<Color x:Key="SystemAccentColorLight1">#FF0064BE</Color>
<Color x:Key="SystemAccentColorLight2">#FF0055AD</Color>
<Color x:Key="SystemAccentColorLight3">#FF00459D</Color>
<Color x:Key="RegionColor">#FF000000</Color>
<SolidColorBrush x:Key="RegionBrush" Color="{StaticResource RegionColor}" />
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
<ResourceDictionary.MergedDictionaries>
<Windows10version1809: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>
<BelowWindows10version1809:Color x:Key="SystemAccentColor">#FF0073CF</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemAltHighColor">#FFFFFFFF</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemAltLowColor">#FFFFFFFF</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemAltMediumColor">#FFFFFFFF</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemAltMediumHighColor">#FFFFFFFF</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemAltMediumLowColor">#FFFFFFFF</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemBaseHighColor">#FF000000</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemBaseLowColor">#FFCCCCCC</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemBaseMediumColor">#FF898989</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemBaseMediumHighColor">#FF5D5D5D</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemBaseMediumLowColor">#FF737373</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemChromeAltLowColor">#FF5D5D5D</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemChromeBlackHighColor">#FF000000</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemChromeBlackLowColor">#FFCCCCCC</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemChromeBlackMediumColor">#FF5D5D5D</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemChromeBlackMediumLowColor">#FF898989</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemChromeDisabledHighColor">#FFCCCCCC</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemChromeDisabledLowColor">#FF898989</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemChromeGrayColor">#FF737373</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemChromeHighColor">#FFCCCCCC</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemChromeLowColor">#FFECECEC</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemChromeMediumColor">#FFE6E6E6</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemChromeMediumLowColor">#FFECECEC</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemChromeWhiteColor">#FFFFFFFF</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemListLowColor">#FFE6E6E6</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemListMediumColor">#FFCCCCCC</BelowWindows10version1809:Color>
<Color x:Key="SystemChromeAltMediumHighColor">#CCFFFFFF</Color>
<Color x:Key="SystemChromeAltHighColor">#FFCCCCCC</Color>
<Color x:Key="SystemRevealListLowColor">#FFE6E6E6</Color>
<Color x:Key="SystemRevealListMediumColor">#FFCCCCCC</Color>
<!-- Override system shape defaults -->
<CornerRadius x:Key="ControlCornerRadius">2,2,2,2</CornerRadius>
<CornerRadius x:Key="OverlayCornerRadius">4,4,4,4</CornerRadius>
<!-- Override system borders -->
<Thickness x:Key="MenuBarItemBorderThickness">1,1,1,1</Thickness>
<Thickness x:Key="GridViewItemMultiselectBorderThickness">1,1,1,1</Thickness>
<Thickness x:Key="CheckBoxBorderThemeThickness">1</Thickness>
<x:Double x:Key="GridViewItemSelectedBorderThemeThickness">1</x:Double>
<x:Double x:Key="RadioButtonBorderThemeThickness">1</x:Double>
<Thickness x:Key="ButtonBorderThemeThickness">1,1,1,1</Thickness>
<Thickness x:Key="CalendarDatePickerBorderThemeThickness">1,1,1,1</Thickness>
<Thickness x:Key="TimePickerBorderThemeThickness">1,1,1,1</Thickness>
<Thickness x:Key="DatePickerBorderThemeThickness">1,1,1,1</Thickness>
<Thickness x:Key="ToggleSwitchOuterBorderStrokeThickness">1,1,1,1</Thickness>
<Thickness x:Key="RepeatButtonBorderThemeThickness">1,1,1,1</Thickness>
<Thickness x:Key="SearchBoxBorderThemeThickness">1,1,1,1</Thickness>
<Thickness x:Key="ToggleButtonBorderThemeThickness">1,1,1,1</Thickness>
<Thickness x:Key="TextControlBorderThemeThickness">1,1,1,1</Thickness>
<Thickness x:Key="ButtonRevealBorderThemeThickness">1,1,1,1</Thickness>
<Thickness x:Key="RepeatButtonRevealBorderThemeThickness">1,1,1,1</Thickness>
<Thickness x:Key="ToggleButtonRevealBorderThemeThickness">1,1,1,1</Thickness>
<Thickness x:Key="AppBarEllipsisButtonRevealBorderThemeThickness">1,1,1,1</Thickness>
<Thickness x:Key="AppBarButtonRevealBorderThemeThickness">1,1,1,1</Thickness>
<Thickness x:Key="AppBarToggleButtonRevealBorderThemeThickness">1,1,1,1</Thickness>
<Thickness x:Key="ListViewItemRevealBorderThemeThickness">1,1,1,1</Thickness>
<Thickness x:Key="GridViewItemRevealBorderThemeThickness">1,1,1,1</Thickness>
<Thickness x:Key="ComboBoxItemRevealBorderThemeThickness">1,1,1,1</Thickness>
<x:Double x:Key="PersonPictureEllipseBadgeStrokeThickness">1</x:Double>
<!-- Override system generated accent colors -->
<Color x:Key="SystemAccentColorLight1">#FF1D85D7</Color>
<Color x:Key="SystemAccentColorLight2">#FF3B97DF</Color>
<Color x:Key="SystemAccentColorLight3">#FF58A8E8</Color>
<Color x:Key="SystemAccentColorDark1">#FF0064BE</Color>
<Color x:Key="SystemAccentColorDark2">#FF0055AD</Color>
<Color x:Key="SystemAccentColorDark3">#FF00459D</Color>
<RevealBackgroundBrush
x:Key="SystemControlHighlightListLowRevealBackgroundBrush"
FallbackColor="{StaticResource SystemListMediumColor}"
TargetTheme="Light"
Color="{ThemeResource SystemRevealListMediumColor}" />
<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>
<ResourceDictionary>
<Thickness x:Key="ComboBoxBorderThemeThickness">1</Thickness>
<!-- Default style for Windows.UI.Xaml.Controls.ComboBox -->
<Style x:Key="HeaderedComboBoxStyle" TargetType="ComboBox">
<Setter Property="Padding" Value="12,5,0,7" />
<Setter Property="MinWidth" Value="{ThemeResource ComboBoxThemeMinWidth}" />
<Setter Property="Foreground" Value="{ThemeResource ComboBoxForeground}" />
<Setter Property="Background" Value="{ThemeResource ComboBoxBackground}" />
<Setter Property="BorderBrush" Value="{ThemeResource ComboBoxBorderBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource ComboBoxBorderThemeThickness}" />
<Setter Property="TabNavigation" Value="Once" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" />
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
<Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="True" />
<Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
<Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="UseSystemFocusVisuals" Value="{ThemeResource IsApplicationFocusVisualKindReveal}" />
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<CarouselPanel />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid x:Name="LayoutRoot">
<Grid.Resources>
<Storyboard x:Key="OverlayOpeningAnimation">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0.0" />
<SplineDoubleKeyFrame
KeySpline="0.1,0.9 0.2,1.0"
KeyTime="0:0:0.383"
Value="1.0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="OverlayClosingAnimation">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity">
<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1.0" />
<SplineDoubleKeyFrame
KeySpline="0.1,0.9 0.2,1.0"
KeyTime="0:0:0.216"
Value="0.0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="32" />
</Grid.ColumnDefinitions>
<ContentPresenter
x:Name="HeaderContentPresenter"
Margin="{ThemeResource ComboBoxHeaderThemeMargin}"
x:DeferLoadStrategy="Lazy"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
FlowDirection="{TemplateBinding FlowDirection}"
FontWeight="{ThemeResource ComboBoxHeaderThemeFontWeight}"
Visibility="Collapsed" />
<Border
x:Name="Background"
Grid.RowSpan="2"
Grid.ColumnSpan="2"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Control.IsTemplateFocusTarget="True" />
<Border
x:Name="HighlightBackground"
Grid.RowSpan="2"
Grid.ColumnSpan="2"
Background="{ThemeResource ComboBoxBackgroundUnfocused}"
BorderBrush="{ThemeResource ComboBoxBackgroundBorderBrushUnfocused}"
BorderThickness="{TemplateBinding BorderThickness}"
Opacity="0" />
<ContentPresenter
x:Name="ContentPresenter"
Grid.Row="1"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<TextBlock
x:Name="PlaceholderTextBlock"
Foreground="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource ComboBoxPlaceHolderForeground}}"
Text="{TemplateBinding PlaceholderText}" />
</ContentPresenter>
<FontIcon
x:Name="DropDownGlyph"
Grid.Row="1"
Grid.Column="1"
Margin="0,10,10,10"
HorizontalAlignment="Right"
VerticalAlignment="Center"
AutomationProperties.AccessibilityView="Raw"
FontFamily="{ThemeResource SymbolThemeFontFamily}"
FontSize="12"
Foreground="{ThemeResource ComboBoxDropDownGlyphForeground}"
Glyph=""
IsHitTestVisible="False" />
<Popup x:Name="Popup">
<Border
x:Name="PopupBorder"
Margin="0,-1,0,-1"
HorizontalAlignment="Stretch"
Background="{ThemeResource ComboBoxDropDownBackground}"
BorderBrush="{ThemeResource ComboBoxDropDownBorderBrush}"
BorderThickness="{ThemeResource ComboBoxDropdownBorderThickness}">
<ScrollViewer
x:Name="ScrollViewer"
MinWidth="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownContentMinWidth}"
AutomationProperties.AccessibilityView="Raw"
BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
Foreground="{ThemeResource ComboBoxDropDownForeground}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
VerticalSnapPointsAlignment="Near"
VerticalSnapPointsType="OptionalSingle"
ZoomMode="Disabled">
<ItemsPresenter Margin="{ThemeResource ComboBoxDropdownContentMargin}" />
</ScrollViewer>
</Border>
</Popup>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxBorderBrushPointerOver}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxBorderBrushPressed}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxBackgroundDisabled}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxBorderBrushDisabled}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxForegroundDisabled}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxForegroundDisabled}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextBlock" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource ComboBoxForegroundDisabled}}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownGlyph" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxDropDownGlyphForegroundDisabled}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="HighlightBackground"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HighlightBackground" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxBackgroundBorderBrushFocused}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxForegroundFocused}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextBlock" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource ComboBoxForegroundFocused}}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownGlyph" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxDropDownGlyphForegroundFocused}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="FocusedPressed">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="HighlightBackground"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxForegroundFocusedPressed}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextBlock" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource ComboBoxPlaceHolderForegroundFocusedPressed}}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownGlyph" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ComboBoxDropDownGlyphForegroundFocusedPressed}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused" />
<VisualState x:Name="PointerFocused" />
<VisualState x:Name="FocusedDropDown">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="PopupBorder"
Storyboard.TargetProperty="Visibility"
Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DropDownStates">
<VisualState x:Name="Opened">
<Storyboard>
<SplitOpenThemeAnimation
ClosedTargetName="ContentPresenter"
OffsetFromCenter="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownOffset}"
OpenedLength="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownOpenedHeight}"
OpenedTargetName="PopupBorder" />
</Storyboard>
</VisualState>
<VisualState x:Name="Closed">
<Storyboard>
<SplitCloseThemeAnimation
ClosedTargetName="ContentPresenter"
OffsetFromCenter="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownOffset}"
OpenedLength="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownOpenedHeight}"
OpenedTargetName="PopupBorder" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style BasedOn="{StaticResource HeaderedComboBoxStyle}" TargetType="ComboBox" />
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
There are a number of new controls in WinUI 3 that are not included in this app. To make it future proof and really useful I would add this two things to the wish list:
Hi,
It would be nice if this tool would generate the new WinUI 3 (and 2.8) resources which can be found in Figma.
Fons
The Fluent Xaml theme editor does not get past the SplashScreen.
It simply hangs - no error, no other change.
Installed via Microsoft Store on Windows Insider build 19025.1.
Just tried and exported the preset Forest theme into my app, and noticed that there is no hover effect, ( when I hover on the navigationviewitem there is no effect or color change whatsoever. Also same problem occurs with the back button of the NavigationView, but the menu toggle button gets the hover color change as expected.
In this image my pointer is actually on Library and you can see that library and home basically have same color.
When exporting the default theme RevealBackgroundSource
element is not found, as well as BackgroundSource
property on the AcrylicBrush
element is not found.
Environment:
<PropertyGroup>
<OutputType>WinExe</OutputType>
<TargetFramework>net5.0-windows10.0.19041.0</TargetFramework>
<TargetPlatformMinVersion>10.0.17763.0</TargetPlatformMinVersion>
<RootNamespace>Test.Application</RootNamespace>
<ApplicationManifest>app.manifest</ApplicationManifest>
<Platforms>x86;x64;arm64</Platforms>
<RuntimeIdentifiers>win10-x86;win10-x64;win10-arm64</RuntimeIdentifiers>
<UseWinUI>true</UseWinUI>
<SupportedOSPlatformVersion>10.0.17763.0</SupportedOSPlatformVersion>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="CommunityToolkit.Mvvm" Version="7.0.3" />
<PackageReference Include="CommunityToolkit.WinUI.UI.Controls" Version="7.0.3" />
<PackageReference Include="Microsoft.Extensions.DependencyInjection" Version="5.0.2" />
<PackageReference Include="Microsoft.ProjectReunion" Version="0.8.5" />
<PackageReference Include="Microsoft.ProjectReunion.Foundation" Version="0.8.5" />
<PackageReference Include="Microsoft.ProjectReunion.WinUI" Version="0.8.5" />
<Manifest Include="$(ApplicationManifest)" />
</ItemGroup>
Accent Color is working, but Dark/Light Accent colors not working. it still seems to follow Windows.
<StackPanel Padding="32">
<Rectangle Width="100" Height="100" Fill="{ThemeResource SystemAccentColorLight3}"/>
<Rectangle Width="100" Height="100" Fill="{ThemeResource SystemAccentColorLight2}"/>
<Rectangle Width="100" Height="100" Fill="{ThemeResource SystemAccentColorLight1}"/>
<Rectangle Width="100" Height="100" Fill="{ThemeResource SystemAccentColor}"/>
<Rectangle Width="100" Height="100" Fill="{ThemeResource SystemAccentColorDark1}"/>
<Rectangle Width="100" Height="100" Fill="{ThemeResource SystemAccentColorDark2}"/>
<Rectangle Width="100" Height="100" Fill="{ThemeResource SystemAccentColorDark3}"/>
</StackPanel>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<ResourceDictionary.MergedDictionaries>
<ColorPaletteResources Accent="#FF22D7BB" 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="#FF22D7BB" 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>
The exported XML doesn't contain ListAccent*
colors.
See https://docs.microsoft.com/en-us/windows/uwp/design/style/color#theme-brushes
All color values generated by the tool have an alpha value of 255, compared to the default system colors that are partially transparent. This creates issues for example for the NavigationView if transparency effects are disabled (the pointer over effect is not visible with a color scheme exported by the tool).
If I change the Windows 10 accent color, I can see this color (lime) come through instead of the in-app selected accent color (blue) in some cases (e.g. mouse hover over check box). See image.
Interestingly, this happens for mouse hover in both Light and Dark themes for check boxes, radio buttons and slider controls, but only in Dark theme for toggle switch control.
The Fluent XAML Theme Editor is clearly a tool to design user interfaces.
That's why I think that its functionality should be in the tool made for designers: Blend.
Yes, I'm aware that this issue is not directly releated to the Fluent XAML Theme Editor, but I think you should talk to the Blend team to figure out how to integrate this great and fantastic functionality of this tool into Blend.
As the Solution/Project is known in Blend, there are even more scenarios possible. Instead of copying/pasting ResourceDictionaries, Blend could create those files and elements directly in the opened project. Another idea is that Blend could show the changes for example live, if you're using XAML Edit/Continue.
Thanks,
Thomas
How will you manage localization of the app? Will it be translated by the community or by the team at Microsoft?
If you want I could open a pull request with the Spanish translation.
Not relevant.
We are developing and selling a UWP app for our client as per his requirement. He wants to change the theme easily, so found this theme changing functionality of 'fluent-xaml-theme-editor' interesting.
Can we bundle this along with our uwp app and sell (or) is this any license related issue?
Can anyone give clarity.
Currently theme editor offers 2 themes ( Light/Dark ) which basically overrides the System defined light and dark themes.
But what if another optional feature can be added to it, where the developer can basically generate a List of themes? Each theme with exactly the same editing features as dark and light but developer can create multiple flavors of their app, considering they dont have a fixed branding and they want the user to select theme according to their liking.
How it will work is that after the editor finishes generating and exporting themes, all of those themes can be put into app.xaml and then in settings of the user they can toggle between all those themes, this toggle functionality will be developed by the user obviously, theme editor cn maybe provide a helper class for switching between the themes i.e : ThemeSwitcher.
Windows Template Studio already has a theme switcher in setting which toggles between Light , Dark and Windows Default. following same method other themes can also be added to the list.
the min tricky part I noticed which might occur in this feature is that windows 10 has just 2 built in themes ( light/dark), so how will we include other themes to follow the same pattren of theme switching? I have a rough solution to that :
When the app is switched to light or dark, the app will look into respective resources present in app.xaml ( generated by theme editor ) and apply them to the system light or dark themes respectively. What we need to do in ThemeSwitcher is map other themes to light and dark. For-Example I have total 4 themes
now when the user selects Neon the ThemeSwitcher will take the Neon Resources and apply them to Light Theme and then change the ApplicationTheme to Light. And when Slate is selected its resources will be applied to Dark Theme and then App theme will be switched to Dark.
This is still just a rough idea, so I thought I should put it out there and make it open for discussion maybe with the community and see what they think about it? Apart from the open choice of themes, it will have another major benefit : above OCT 2018 update theme editor supports localized theme ( different theme at different parts of the app ) and if we have more than 2 themes it will just give a lot more flexibility to the developer on how they want to design the app.
we can always limit the number of themes the editor can generate at one time so that editor app itself remains fast or if too much resources in app.xaml has consequences or for any other reason possible. but for complexity sake it doesnt effect the process because, if we re able to create more than 2 themes then technically we should be able to toggle between infinite amount of themes.
Thanks for reading
When opened, Fluent XAML Theme Editor does not progress past the initial blue screen with the app logo in the center. App was obtained from Microsoft Store.
App is running on Windows 10 1909. System language is set to French.
So if you use:
#7f7f7f as your accent colour...
it generates:
<Color x:Key="SystemAccentColorDark1">#FF8F8F8F</Color>
<Color x:Key="SystemAccentColorDark2">#FF9F9F9F</Color>
<Color x:Key="SystemAccentColorDark3">#FFB0B0B0</Color>
<Color x:Key="SystemAccentColorLight1">#FF6E6E6E</Color>
<Color x:Key="SystemAccentColorLight2">#FF5D5D5D</Color>
<Color x:Key="SystemAccentColorLight3">#FF4B4B4B</Color>
If I am not mistakend. the light colors are getting darker, and the dark colors are getting lighter?
And it should be the other way around?
Lastly, don’t forget to set the background color of your page to the RegionColor that you picked for your theme. It’s the only brush that won’t get set automatically.
above statement in ReadMe, clearly indicates that RegionColor and I guess also RegionBrush are 2 resource which do not automatically applied to the app, which makes sense because these 2 names are not in SystemResources, I wanted to ask can this be fixed? I mean can the name be swapped with a resource name which i automatically applied from ThemeResource ? or more specifically what is the reason of this particular issue that this resource is named in such a way that it has to be manually applied?
The last update of this repo is 2 years ago. The bug of i18n which makes this app cannot launch still remain, but it should be a bug with the highest priority that will be fixed immediately after it was found. Issues here remain no assignees. The pull request which was made in 2020 still haven't been merged or blocked. Even in Microsoft Store it has a logo with low contrast ratio and cannot be seen at all.
But all apps like XAML Controls Gallery are still recommending this app. I don't know why.
please review the readme for usability
p.s.
how do you use this and what do you do with it.
I just want to know if there is any plan of taking this tool to the Microsoft Store, I think it will be a thing nice to have to improve discoverability and ease of use although there's no hurry.
What do you think?
Steps to replicate:
App.Xaml
add this: <Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Dictionary1.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
TextBlock
and Loaded
event to MainPage
ContentDialog
call to Loaded
event private async void Page_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
ContentDialog noWifiDialog = new ContentDialog
{
Title = "No wifi connection",
Content = "Check your connection and try again.",
CloseButtonText = "Ok"
};
_ = await noWifiDialog.ShowAsync();
}
ContentDialog
covers up the TextBlock
. If you remove the color theme this does not happen.in the sample app when I bring the pointer close to the listview it should show the reveal highlight on the borders, but it does not, however when I hover on the listviewitems, then I can see the reveal properly. However the issue does not exist when the theme is actually exported into a uwp app.
The code behind example is problematic because there is no "Dark" key in the dictionary.
Using pure XAML and setting RequestedTheme="Dark" in the page tag works fine.
Also setting this.RequestedTheme=ElementTheme.Dark; in the code behind works fine.
Can anyone explain or point to a reference for how the dark theme is actually created since the dictionary produced by the fluent-xaml-theme-editor does not have a "Dark" key.
The color picker(s) behave very erratically / incorrectly when system scaling is set to 125%, 175%, 225%, and probably some other uneven values.
The WinUI color picker doesn't exhibit this behavior in the XAML Controls Gallery, so I'm not sure if the issue is related to it being housed in a popup / flyout / overlay or something else.
The new editor is shown here at https://twitter.com/WindowsUI/status/1212483698131472384?s=20. But it seems, at least in australia, it is not available in microsoft store.
In order to show the developers how they can use acrylic with their custom themes and how exactly it will look like I suggest that there must be some sample controls on the sample app on both the light and dark sides which show the acrylic according to the theme selected. This will include both the window and the element acrylic ( hos acrylic and in-app acrylic ) and will also include multiple opacity's as shown in official docs of acrylic.
May I also suggest some comments on the exported resources, so that each color/resource can have a comment explaining the purpose of that specific resource, and in case of RegionColor, a commend can explain why exactly it needs to be manually applied, and where and in what cases it is needed
Cannot start at all
“DesignLab.exe”(Win32): 已加载“C:\Users\Shomn\source\repos\fluent-xaml-theme-editor\FluentEditor\bin\x64\Debug\AppX\DesignLab.exe”。
“DesignLab.exe”(Win32): 已加载“C:\Windows\System32\ntdll.dll”。
“DesignLab.exe”(Win32): 已加载“C:\Windows\System32\kernel32.dll”。
“DesignLab.exe”(Win32): 已加载“C:\Windows\System32\KernelBase.dll”。
“DesignLab.exe”(Win32): 已加载“C:\Windows\System32\ucrtbase.dll”。
线程 0x5f4 已退出,返回值为 3221225781 (0xc0000135)。
线程 0x17d0 已退出,返回值为 3221225781 (0xc0000135)。
程序“[11936] DesignLab.exe”已退出,返回值为 3221225781 (0xc0000135) '未找到依赖 dll'。
"DesignLab.exe" (Win32): "C:\Users\Shomn\source\repos\fluent-xaml-theme-editor\FluentEditor\bin\x64\Debug\AppX\DesignLab.exe" loaded.
"DesignLab.exe" (Win32): "C:\Windows\System32\ntdll.dll" loaded.
"DesignLab.exe" (Win32): "C:\Windows\System32\kernel32.dll" loaded.
"DesignLab.exe" (Win32): "C:\Windows\System32\KernelBase.dll" loaded.
"DesignLab.exe" (Win32): "C:\Windows\System32\ucrtbase.dll" loaded.
Thread 0x5f4 has exited with a return value of 3221225781 (0xc0000135).
Thread 0x17d0 has exited with a return value of 3221225781 (0xc0000135).
Program '[11936] DesignLab.exe' exited with return value 3221225781 (0xc0000135) 'The dependent dll was not found'.
Why is there a shared project and a main app project?
The code in the shared project seems very specific to the FXTE.
Also, it's not shared with anything else. Is this an indication that there may be other, related projects added to the solution or is it just a historical artifact?
If a historical artifact, would suggestions for simplifying/rationalizing the code be welcome?
What changes would I need to do to run it on 1803?
Do you have any plans to produce WPF Xaml styles to for WPF apps?
Below are the generated Alt colors for the dark theme using the default pallete.
<BelowWindows10version1809:Color x:Key="SystemAltHighColor">#FF000000</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemAltLowColor">#FF000000</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemAltMediumColor">#FF000000</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemAltMediumHighColor">#FF000000</BelowWindows10version1809:Color>
<BelowWindows10version1809:Color x:Key="SystemAltMediumLowColor">#FF000000</BelowWindows10version1809:Color>
The selected color scheme is not applied to all elements, e.g. the selected combobox item always uses the system accent color.
There are important files that Microsoft projects should all have that are not present in this repository. A pull request has been opened to add the missing file(s). When the pr is merged this issue will be closed automatically.
Microsoft teams can learn more about this effort and share feedback within the open source guidance available internally.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.