Skip to content

[NRTM](GH-3088) Add colors and styles from ModernUI for official controls #3561

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 36 commits into
base: develop
Choose a base branch
from
Open

[NRTM](GH-3088) Add colors and styles from ModernUI for official controls #3561

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
bdd289d
MUI colors and brushes
Evangelink Jul 23, 2019
b1d0cfa
MUI fonts, sizes and shared content
Evangelink Jul 23, 2019
3866fdb
MUI Buttons
Evangelink Jul 23, 2019
8a4615d
MUI RadioButton
Evangelink Jul 24, 2019
65fb805
MUI CheckBox
Evangelink Jul 23, 2019
c965870
Add button, checkbox and radiobutton examples
Evangelink Jul 24, 2019
c412e72
MUI ComboBox
Evangelink Jul 23, 2019
774938f
MUI ContextMenu
Evangelink Jul 24, 2019
cc94e43
MUI DataGrid
Evangelink Jul 24, 2019
b92c08a
MUI calendar
Evangelink Jul 23, 2019
544bb5a
MUI DatePicker
Evangelink Jul 24, 2019
dd194b4
MUI Date
Evangelink Jul 24, 2019
aeb579d
MUI Label
Evangelink Jul 24, 2019
269acdf
MUI ListBox
Evangelink Jul 24, 2019
72c1301
MUI ListView
Evangelink Jul 24, 2019
14b664c
MUI GridSplitter
Evangelink Jul 24, 2019
42ee908
MUI Hyperlink
Evangelink Jul 24, 2019
3c25f19
MUI TreeView
Evangelink Jul 24, 2019
14d1647
MUI ToolTip
Evangelink Jul 24, 2019
4031c55
MUI TextBox
Evangelink Jul 24, 2019
bbd3b29
MUI TextBlock
Evangelink Jul 24, 2019
6174634
MUI PasswordBox
Evangelink Jul 24, 2019
c1c66e9
MUI ProgressBar
Evangelink Jul 24, 2019
dc59592
MUI ScrollBar
Evangelink Jul 24, 2019
2416409
MUI Slider
Evangelink Jul 24, 2019
c5a4b4b
MUI MenuItem
Evangelink Jul 24, 2019
3eea30a
Merge new resource dictionaries
Evangelink Jul 24, 2019
bab3d98
Update size, font and shared names
Evangelink Jul 24, 2019
9a4c115
Fix some mui style keys
Evangelink Jul 29, 2019
8835729
Move MUI controls to Styles/MUI
punker76 Nov 16, 2019
5cee4fa
Fix generated MUI brushes and colors
punker76 Nov 16, 2019
88c7820
Revert MUI samples
punker76 Nov 16, 2019
5077542
Rename Scrollbars -> Scrollbar
punker76 Nov 16, 2019
05492c6
MahApps.Fonts.Default.Mui -> MahApps.Fonts.Family.Default.Mui
punker76 Nov 17, 2019
089d4ae
MahApps.Fonts.Fixed.Mui -> MahApps.Fonts.Family.Fixed.Mui
punker76 Nov 17, 2019
0e111cf
MahApps.Sizes.Font -> MahApps.Font.Size
punker76 Nov 17, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 46 additions & 0 deletions src/MahApps.Metro/Styles/Controls.MUI.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">

<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/MUI/Controls.xaml" />
</ResourceDictionary.MergedDictionaries>

<Style BasedOn="{StaticResource MahApps.Styles.Button.Mui}" TargetType="Button" />
<Style BasedOn="{StaticResource MahApps.Styles.Calendar.Mui}" TargetType="Calendar" />
<Style BasedOn="{StaticResource MahApps.Styles.CheckBox.Mui}" TargetType="CheckBox" />
<Style BasedOn="{StaticResource MahApps.Styles.ComboBox.Mui}" TargetType="ComboBox" />
<Style BasedOn="{StaticResource MahApps.Styles.ComboBoxItem.Mui}" TargetType="ComboBoxItem" />
<Style BasedOn="{StaticResource MahApps.Styles.ContextMenu.Mui}" TargetType="ContextMenu" />
<Style BasedOn="{StaticResource MahApps.Styles.DataGrid.Mui}" TargetType="DataGrid" />
<Style BasedOn="{StaticResource MahApps.Styles.DatePicker.Mui}" TargetType="DatePicker" />
<Style BasedOn="{StaticResource MahApps.Styles.DatePickerTextBox.Mui}" TargetType="DatePickerTextBox" />
<!-- <Style BasedOn="{StaticResource MahApps.Styles.Expander}" TargetType="Expander" /> -->
<Style BasedOn="{StaticResource MahApps.Styles.GridSplitter.Mui}" TargetType="GridSplitter" />
<Style BasedOn="{StaticResource MahApps.Styles.GridViewColumnHeader.Mui}" TargetType="GridViewColumnHeader" />
<!-- <Style BasedOn="{StaticResource MahApps.Styles.GroupBox}" TargetType="GroupBox" /> -->
<Style BasedOn="{StaticResource MahApps.Styles.Hyperlink.Mui}" TargetType="Hyperlink" />
<Style BasedOn="{StaticResource MahApps.Styles.Label.Mui}" TargetType="Label" />
<Style BasedOn="{StaticResource MahApps.Styles.ListBoxItem.Flat.Mui}" TargetType="ListBoxItem" />
<Style BasedOn="{StaticResource MahApps.Styles.ListBox.Mui}" TargetType="ListBox" />
<Style BasedOn="{StaticResource MahApps.Styles.ListViewItem.Mui}" TargetType="ListViewItem" />
<Style BasedOn="{StaticResource MahApps.Styles.ListView.Mui}" TargetType="ListView" />
<Style BasedOn="{StaticResource MahApps.Styles.MenuItem.Mui}" TargetType="MenuItem" />
<!-- <Style BasedOn="{StaticResource MahApps.Styles.Menu}" TargetType="Menu" /> -->
<Style BasedOn="{StaticResource MahApps.Styles.PasswordBox.Mui}" TargetType="PasswordBox" />
<Style BasedOn="{StaticResource MahApps.Styles.ProgressBar.Mui}" TargetType="ProgressBar" />
<Style BasedOn="{StaticResource MahApps.Styles.RadioButton.Mui}" TargetType="RadioButton" />
<Style BasedOn="{StaticResource MahApps.Styles.RepeatButton.Mui}" TargetType="RepeatButton" />
<Style BasedOn="{StaticResource MahApps.Styles.RichTextBox.Mui}" TargetType="RichTextBox" />
<Style BasedOn="{StaticResource MahApps.Styles.ScrollBar.Mui}" TargetType="ScrollBar" />
<Style BasedOn="{StaticResource MahApps.Styles.ScrollViewer.Mui}" TargetType="ScrollViewer" />
<Style BasedOn="{StaticResource MahApps.Styles.Slider.Mui}" TargetType="Slider" />
<!-- <Style BasedOn="{StaticResource MahApps.Styles.StatusBarItem}" TargetType="StatusBarItem" /> -->
<!-- <Style BasedOn="{StaticResource MahApps.Styles.StatusBar}" TargetType="StatusBar" /> -->
<!-- <Style BasedOn="{StaticResource MahApps.Styles.TabControl}" TargetType="TabControl" /> -->
<!-- <Style BasedOn="{StaticResource MahApps.Styles.TabItem}" TargetType="TabItem" /> -->
<Style BasedOn="{StaticResource MahApps.Styles.TextBox.Mui}" TargetType="TextBox" />
<Style BasedOn="{StaticResource MahApps.Styles.ToggleButton.Mui}" TargetType="ToggleButton" />
<Style BasedOn="{StaticResource MahApps.Styles.ToolTip.Mui}" TargetType="ToolTip" />
<Style BasedOn="{StaticResource MahApps.Styles.TreeViewItem.Mui}" TargetType="TreeViewItem" />
<Style BasedOn="{StaticResource MahApps.Styles.TreeView.Mui}" TargetType="TreeView" />

</ResourceDictionary>
9 changes: 9 additions & 0 deletions src/MahApps.Metro/Styles/Fonts.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,4 +37,13 @@
<System:Double x:Key="MahApps.Font.Size.ToggleSwitch.Win10">15</System:Double>
<System:Double x:Key="MahApps.Font.Size.ToggleSwitch.Header.Win10">15</System:Double>

<!-- MUI -->

<FontFamily x:Key="MahApps.Fonts.Family.Default.Mui">Segoe UI</FontFamily>
<FontFamily x:Key="MahApps.Fonts.Family.Fixed.Mui">Consolas</FontFamily>

<System:Double x:Key="MahApps.Font.Size.Default.Mui">13</System:Double>
<System:Double x:Key="MahApps.Font.Size.Fixed.Mui">13.333</System:Double>
<System:Double x:Key="MahApps.Font.Size.Small.Mui">11</System:Double>

</ResourceDictionary>
172 changes: 172 additions & 0 deletions src/MahApps.Metro/Styles/MUI/Button.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:converters="clr-namespace:MahApps.Metro.Converters">

<Style x:Key="MahApps.Styles.Button.System.Base.Mui" TargetType="ButtonBase">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ButtonBase}">
<Border Name="Chrome"
Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
SnapsToDevicePixels="true">
<ContentPresenter Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<Style x:Key="MahApps.Styles.Button.System.Alert.Mui" TargetType="ButtonBase" BasedOn="{StaticResource MahApps.Styles.Button.System.Base.Mui}">
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Margin" Value="8"/>
<Setter Property="Padding" Value="4"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" Value=".7" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Opacity" Value=".4" />
</Trigger>
</Style.Triggers>
</Style>

<Style x:Key="MahApps.Styles.Button.System.Mui" TargetType="ButtonBase" BasedOn="{StaticResource MahApps.Styles.Button.System.Base.Mui}">
<Setter Property="Width" Value="{DynamicResource MahApps.Sizes.Button.System.Width.Mui}" />
<Setter Property="Height" Value="{DynamicResource MahApps.Sizes.Button.System.Height.Mui}" />
<Setter Property="Foreground" Value="{DynamicResource MahApps.Brushes.ButtonText.Mui}"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{DynamicResource MahApps.Brushes.SystemButtonBackgroundOnMoseOver.Mui}" />
<Setter Property="Foreground" Value="{DynamicResource MahApps.Brushes.SystemButtonForegroundOnMoseOver.Mui}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{DynamicResource MahApps.Brushes.SystemButtonBackgroundIsPressed.Mui}" />
<Setter Property="Foreground" Value="{DynamicResource MahApps.Brushes.SystemButtonForegroundIsPressed.Mui}" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource MahApps.Brushes.ButtonTextDisabled.Mui}" />
</Trigger>
</Style.Triggers>
</Style>

<Style x:Key="MahApps.Styles.Button.System.Close.Mui" TargetType="ButtonBase" BasedOn="{StaticResource MahApps.Styles.Button.System.Mui}">
<Setter Property="Width" Value="{DynamicResource MahApps.Sizes.Button.Close.Width.Mui}" />
<Setter Property="Background" Value="{DynamicResource MahApps.Brushes.CloseButtonBackground.Mui}" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{DynamicResource MahApps.Brushes.CloseButtonBackgroundOnMoseOver.Mui}" />
<Setter Property="Foreground" Value="{DynamicResource MahApps.Brushes.CloseButtonForegroundOnMoseOver.Mui}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{DynamicResource MahApps.Brushes.CloseButtonBackgroundIsPressed.Mui}" />
<Setter Property="Foreground" Value="{DynamicResource MahApps.Brushes.CloseButtonForegroundIsPressed.Mui}" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource MahApps.Brushes.ButtonTextDisabled.Mui}" />
</Trigger>
</Style.Triggers>
</Style>

<Style x:Key="MahApps.Styles.Button.System.Link.Mui" TargetType="ButtonBase" BasedOn="{StaticResource MahApps.Styles.Button.System.Base.Mui}" >
<Setter Property="Foreground" Value="{DynamicResource MahApps.Brushes.LinkButtonText.Mui}"/>
<Setter Property="Width" Value="NaN" />
<Setter Property="Height" Value="NaN" />
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="FontSize" Value="11" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ButtonBase}">
<Border Name="Chrome"
Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
SnapsToDevicePixels="true">
<TextBlock DataContext="{TemplateBinding Content}"
Text="{Binding Converter={converters:ToUpperConverter}}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="{DynamicResource MahApps.Brushes.LinkButtonTextHover.Mui}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Foreground" Value="{DynamicResource MahApps.Brushes.LinkButtonTextPressed.Mui}" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource MahApps.Brushes.LinkButtonTextDisabled.Mui}" />
</Trigger>
</Style.Triggers>
</Style>

<Style x:Key="MahApps.Styles.Button.Base.Mui" TargetType="{x:Type ButtonBase}">
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Background" Value="{DynamicResource MahApps.Brushes.ButtonBackground.Mui}"/>
<Setter Property="BorderBrush" Value="{DynamicResource MahApps.Brushes.ButtonBorder.Mui}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource MahApps.Brushes.ButtonText.Mui}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="16,3,16,5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ButtonBase}">
<Border Name="Chrome"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="true">
<ContentPresenter Name="Presenter" Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource MahApps.Brushes.ButtonTextDisabled.Mui}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{DynamicResource MahApps.Brushes.ButtonBackgroundHover.Mui}" />
<Setter Property="BorderBrush" Value="{DynamicResource MahApps.Brushes.ButtonBorderHover.Mui}"/>
<Setter Property="Foreground" Value="{DynamicResource MahApps.Brushes.ButtonTextHover.Mui}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{DynamicResource MahApps.Brushes.ButtonBackgroundPressed.Mui}" />
<Setter Property="BorderBrush" Value="{DynamicResource MahApps.Brushes.ButtonBorderPressed.Mui}"/>
<Setter Property="Foreground" Value="{DynamicResource MahApps.Brushes.ButtonTextPressed.Mui}"/>
</Trigger>
<Trigger Property="IsFocused" Value="true">
<Setter TargetName="Chrome" Property="BorderBrush" Value="{DynamicResource MahApps.Brushes.Accent.Mui}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<Style x:Key="MahApps.Styles.ToggleButton.Mui" BasedOn="{StaticResource MahApps.Styles.Button.Base.Mui}" TargetType="{x:Type ToggleButton}"/>

<Style x:Key="MahApps.Styles.RepeatButton.Mui" BasedOn="{StaticResource MahApps.Styles.Button.Base.Mui}" TargetType="{x:Type RepeatButton}">
<Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
</Style>

<Style x:Key="MahApps.Styles.Button.Mui" BasedOn="{StaticResource MahApps.Styles.Button.Base.Mui}" TargetType="{x:Type Button}"/>

</ResourceDictionary>
Loading