kinnara / modernwpf

Modern styles and controls for your WPF applications

ModernWPF UI Library

Modern styles and controls for your WPF applications.

Features

• Modern styles and new features for the majority of the stock WPF controls.

• Light and dark themes that can be easily customized. A high contrast theme is also included.

• Additional controls to help you build modern applications. Some are ported from the Windows UI Library.

• Targets .NET Framework 4.5+, .NET Core 3+, and .NET 5+. Runs on Windows Vista SP2 and above.

Quick start

1. Create a new WPF app.

2. Install from NuGet Install-Package ModernWpfUI.

3. Edit App.xaml to following:

<Application
    ...
    xmlns:ui="http://schemas.modernwpf.com/2019">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ui:ThemeResources />
                <ui:XamlControlsResources />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

4. Edit MainWindow.xaml to following:

<Window
    ...
    xmlns:ui="http://schemas.modernwpf.com/2019"
    ui:WindowHelper.UseModernWindowStyle="True">
    <ui:SimpleStackPanel Margin="12" Spacing="24">
        <TextBlock Text="My first ModernWPF app" Style="{StaticResource HeaderTextBlockStyle}" />
        <Button Content="I am a button" />
        <Button Content="I am an accent button" Style="{StaticResource AccentButtonStyle}" />
    </ui:SimpleStackPanel>
</Window>

5. See the wiki for more information.

Packages

NuGet Package	Latest Versions
ModernWpfUI
ModernWpfUI.MahApps

Screenshots

modernwpf's Issues

Cannot resolve brushes

Using .net core 3.0

I am getting some errors that styles could not be resolved:

The app still builds and runs fine though.
My app.xaml looks like this:

<Application x:Class="Hurace.RaceControl.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:ui="http://schemas.modernwpf.com/2019"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ui:ThemeResources />
                <ui:XamlControlsResources />
            </ResourceDictionary.MergedDictionaries>

        </ResourceDictionary>
    </Application.Resources>
</Application>

Usage examples:

<Button Style="{StaticResource AccentButtonStyle}" Content="Save" />
<Border BorderBrush="{DynamicResource SystemControlBackgroundBaseHighBrush}"> ...

Is there some way to get rid of the "errors"?

Commands on MenuItem don't work

I have a button that opens MenuFlyout; when a menu-item is clicked it should call a command. It doesn't work but if I try to call it from a button it works, so it does not look like it is the command (RelayCommand) itself has the issue.

<Button ...>
	<ui:FlyoutService.Flyout>
		<ui:MenuFlyout>
			<MenuItem Header="Test" 
					  Command="{Binding TestCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:PathListBox}}}"/>
	...				  
<Button Content="Button that works" Command="{Binding AddCurrentPathCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:PathListBox}}}"/>

Is there something that I am missing?

An additional styling comment: When I click this button, or dropdown, it seems like it goes through one more shade than it is supposed to, resulting in something like a flicker.

TransitionFrame - the position of previous pages

Hi,
I noticed that the frame in HamburgerMenu does not show the previous pages with the saved position (see picture). For example, in Groove music it is common to display previous pages with a saved position, see gif

NumberBox highlight selection does not extend around arrow parts in Inline mode + others

Found a few more bugs with NumberBox, this time in Inline mode:

• The blue selection highlight ends where the arrows start.
• There is no dividing line between the text and the up arrow
• Missing left and right margin for text or X button
• Arrows part doesn't change with control height

Avalonia Port

could you port this to AvaloniaUI?

Size issue with SymbolIcon as Button Content

This is how I have been using buttons with symbols
<Button FontFamily="Segoe MDL2 Assets" >&#xE73E;</Button>

So I was hoping I could do this
<Button><ui:SymbolIcon Symbol="Accept" /></Button>

But then the size is not right (2nd one)

If I then try to change the Width and Height or SymbolIcon I get it cropped (2nd one)

FlyoutService requires Button, but ButtonBase is sufficient

Because of the unnecessary limitation, Flyout can't be attached to HyperlinkButton, which I expected to work OOB.

P.S. Thanks for your project, it really is the best WPF theme & control library out there!

NumberBox compact mode popup doesn't disappear and is above all windows

Using NumberBox in compact mode. v0.70

Clicking the arrows makes the arrow popup appear, but it does not disappear on enter or lost focus. In fact, it appears above all windows, e.g. if you alt-tab to something else.

Cannot find resource named 'DefaultRepeatButtonStyle'. Resource names are case sensitive

When simple use v0.8.0 With Mahapps :
Cannot find resource named 'DefaultRepeatButtonStyle'. Resource names are case sensitive.

ModernWPF Sample App how to get this "slow" mode effect?

Hi, sorry for not explaining it enough. How do I get this effect?
https://gyazo.com/8c2fc438515d8e20dbf311fc72066813
Pretty much when switching between items on the left. What is the name of this property? Also, can it be used in TabControl?

Pivot TabItem content is inheriting foreground from PivotHeaderItemForegroundUnselected

TabControl using TabControlPivotStyle has Foreground set to PivotHeaderItemForegroundUnselected (a light grey colour) in the root of the Style.

This causes all the text items in the TabItem to inherit this colour as foreground.

Solution is to remove setting the foreground here and instead set it in the triggers, e.g.:

<!-- Unselected -->
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected"
                                           Value="False" />
                                <Condition SourceName="Border"
                                           Property="IsMouseOver"
                                           Value="False" />
                            </MultiTrigger.Conditions>
                            <Setter TargetName="SelectedPipe"
                                    Property="Visibility"
                                    Value="Collapsed" />
                            <Setter TargetName="ContentPresenter"
                                    Property="TextElement.Foreground"
                                    Value="{DynamicResource PivotHeaderItemForegroundUnselected}" />
                        </MultiTrigger>

Can you design the new ListBox control with the sticky group function,like the xaml control 'ListView'?

  The ItemsRepeater control is very powerful,especially its layout,but it is too base,

can't be used for UI directly,Base on the ItemsRepeater control,design the new ListBox,the layout will be powerful too,
At the same time,like the microsoft xaml control 'ListView',realize the sticky group function.

ContentDialog Visibility?

Hi! I'm doing a project for school right now using this library. It's been working as expected and it's really useful, but I can't seem to get ContentDialog to show.

My app uses MVVM, and in the viewmodel I have the following boolean property:
public bool ShowDialog { get; set; }

In the XAML I define a ContentDialog and bind its Visibility property to the property above (I've also tried using the BooleanToVisibilityConverter for this step). This doesn't seem to work, though.

Am I doing something wrong? Or is it the fact that I'm using the ContentDialog as-is and I need to define it in a separate class for this to work?

CommandBar: If nothing listed in SecondaryCommands, overflow items don't show up

Hey,

If there is a command bar with nothing listed in ui:CommandBar.SecondaryCommands, when the window/control width is decreased, the overflow button shows up, but clicking the button doesn't do anything. If there is initially a secondary command, overflow works as expected.

The easiest way to replicate it is to remove the secondary command from the demo's CommandBarPage sample, then make the sample window very narrow so that the ... button appears. Once you click the button, no popup appears.

XAML:

<ui:CommandBar x:Name="PrimaryCommandBar">
    <ui:AppBarButton x:Name="addButton" Icon="Add" Label="Add" Click="OnElementClicked" />
    <ui:AppBarButton x:Name="editButton" Icon="Edit" Label="Edit" Click="OnElementClicked" />
    <ui:AppBarButton x:Name="shareButton" Icon="Share" Label="Share" Click="OnElementClicked" />
    <ui:CommandBar.SecondaryCommands>
    </ui:CommandBar.SecondaryCommands>
</ui:CommandBar>

Thanks!

(Feature Request) Addition of Tab Header Header and Footer

So, I'm using TabItems and I'd love to be able to add anything to the left (header) or to the right (footer) of the content of the Header content just like how it's possible to do it on the strips of TabControls.

Some examples would be to:

• Show a badge before the icon
• Show a close button on the tab

SimpleTimePicker (Dark theme) : OK et Cancel buttons are too dark

Is it possible to have the OK et Cancel button White when using the dark theme ?

Proposal to create WrapPanel Expand

Hi, I have another suggestion for an interesting element and this WrapPanel Expand item recently I tried it is quite interesting. see also the source code ExpandItemVirtualizingTilePanel

Can set overlay brush of ContentDialog

make dialog more concernable as in mahapps.metro.simplechildwindow

ExtendViewIntoTitleBar and keeping controls under TitleBar interactible

If we use ui:TitleBar.ExtendViewIntoTitleBar ="True" but have a control, like a button at the top (overlapping with TitleBar), the element cannot be interacted with as TitleBar handles it. Is it possible to have just a right section of TitleBar perform its original task with 3 buttons and section for moving the window?

Rendering issues with UseModernWindowStyle

When Window has this
ui:WindowHelper.UseModernWindowStyle="True
it causes a weird rendering bluring-glitch in listbox when the content changes. See here:

Setting UseLayoutRounding="True" on the ListBox or the window fixes it. Maybe that should be mentioned in documentation somewhere if it can't be fixed without setting the UseLayoutRounding

Edit: Seems to be only when it defaults back to software rendering

ComboBox - Popup issue

ComboBox when expanded above a certain width, the popup breaks. I cant find which is causing this problem. This must be a bug in ThemeShadowChrome

NumberBox: Corner Radius does not apply

Setting the Corner Radius on a NumberBox only applies if the SpinButtonPlacement is set to Inline.

ItemsRepeater scroll performance is bad with large data.

I check out the UniformGridLayout Inherited the VirtualizingLayout class,
So I add the following code:
public static Task<ObservableCollection> GetContactsAsync()
{
...
for (int i = 0; i < lines.Count; i += 3)
{
contacts.Add(new Contact(lines[i], lines[i + 1], lines[i + 2]));
//Add:for test large data
for (int j = 0; j < 100; j++)
{
contacts.Add(new Contact(lines[i]+j, lines[i + 1]+j, lines[i + 2]+j));
}
}

        return Task.FromResult(contacts);
   }

then running,the mouse scroll performance is very bad,I think it don't use the Virtualizing.

CheckBox margin?

I have a checkbox:
https://i.gyazo.com/6d77a333c8002bf45f97f99be47dd27a.png
You can see here that there is a strange margin above and below the checkbox. How can I overwrite the default checkbox's style so the top and bottom line will stay on the box?
I tried to overwrite it in this way:

    <Window.Resources>
        <Style x:Key="MyStyle" BasedOn="{StaticResource DefaultCheckBoxStyle}"  TargetType="{x:Type CheckBox}">
            <Setter Property="???" Value="?"/>

        </Style>
    </Window.Resources>

However, I'm not sure what property should I overwrite. Thank you for your help.

Missing dependencies

Downloaded the project but it wouldn't run as it is missing the dependencies Windows, Windows.Foundation.FoundationContract and Windows.Foundation.UniversalAPIContract

I added them via this method https://docs.microsoft.com/en-us/windows/apps/desktop/modernize/desktop-to-uwp-enhance

HamburgerMenu as AcrylicPanel

Hi,
I wondered how to improve the appearance of HamburgerMenu. I tried to put AcrylicPanel from FluentWPF into HamburgerMenu and still other elements like Reveal. I tried it on my project and it looks pretty good. see picture or video https://vimeo.com/387566029, https://vimeo.com/387566695

DatePicker : The textbox stays in edit mode when the calendar is closed

After the user selects a date using the popup calendar, closing the calendar using the toggle button should remove the selection and focus from the textbox.

NavigationView

If possible please add NavigationView
There's an example here

Datagrid Header Padding

Hi. First of all I'd like to say that I really like this project. I'm not very good at design and this really helps.

I have one issue with the datagrid and I'm not sure how to fix it.

In the datagrid header there seems to be some sorts of padding or margin overlapping the header text when you decrease the width of the column.

Is this fixable?

ComboBox shadow Bug

when the combobox width is less then the dropdown RenderSize width,the shouldAlignLeftAndRightEdges return false，result in the screen edge,the popup offset.

return target != null &&
target.RenderSize.Width == ActualWidth &&
ActualWidth > 0;

Can't build repo, gives error that System.Core v2.0.5.0 can'tbe found.

Hi,

I'm trying to build the example app so I can get started with your library however I run into a problem, when I build the repository (after setting the global.json to sdk 3.1.100) (When building ModernWpf.Controls)

C:\Program Files\dotnet\sdk\3.1.100\Sdks\Microsoft.NET.Sdk.WindowsDesktop\targets\Microsoft.WinFX.targets(225,9): error MC1000: Unknown build error, 'Could not find assembly 'System.Core, Version=2.0.5.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e'. Either explicitly load this assembly using a method such as LoadFromAssemblyPath() or use a MetadataAssemblyResolver that returns a valid assembly.'  [C:\Users\****\Downloads\ModernWpf-0.7.3\ModernWpf.Controls\ModernWpf.Controls.csproj]

Which is weird, as it's not referenced anywhere. I check what it can be, and all I can find is old stuff related to windows XP, silverlight and portable libraries.

You have any idea what to do to make the repository compile? I also tried to remove netcoreapp30 and target net452 or any higher version but same error. ...

TIA

Problem with PasswordBox.Background

Hi, I mad a TextBox and a PasswordBox with background image. The TextBox seems nice, but the PasswordBox has some problem when hover or enter.

<PasswordBox.Background>
    <ImageBrush ImageSource="/Images/login/key.png" Stretch="None"
                AlignmentY="Center" 
                AlignmentX="Left">
        <ImageBrush.Transform>
            <TransformGroup>
                <ScaleTransform />
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform X="10"/>
            </TransformGroup>
        </ImageBrush.Transform>
    </ImageBrush>
</PasswordBox.Background>

TabControl Styling

Fairly new to WPF so this is probably a newbie issue. I was wanting to change the style of the TabControl to style them more like the UWP style.

1. My first attempt was to use Visual Studio to "Convert to a New Resource" and edit those styles. This option was grayed out in Visual Studio. Couldn't find a wait to "Edit Template" or "Convert to a New Resource"
2. My second attempt was to use the properties available in the XAML. I could change the font there for instance, but not the font size oddly. E.g. <TabItem FontFamily="Courier New" FontSize="24">
3. My third attempt was to have a resource on the page with a style with a TargetType set to TabItem. This allowed me to change things like the FontSize but undid the rest of the stylings instead of just targeting the few styles I wanted to update (also, I could not change the "selected" styles this way).
4. My fourth attempt I brought the entire resource down from the libraries source but kept getting errors in the xaml on xmlns:primitives="clr-namespace:ModernWpf.Controls.Primitives" saying it couldn't access that namespace (when, I believe it did exist, I could reference those objects in the code behind anyway).

Beyond just changing colors, what is the best way to restyle a handful of properties from just a single control?

How can I get a ContentDialog's result?

I tried to get a ContentDialog's result like this, but it's not working.

var dlg = new MyContentDialog();
var t = dlg.ShowAsync();
if (t.Result == ContentDialogResult.Primary)
{
    // do something
}

How to set up a border around listview?

Hi, I have a listview:

                <ListView Width="200" Height="200" Style="{StaticResource {x:Static GridView.GridViewStyleKey}}" BorderThickness="1.000001" ItemsSource="{Binding Items}">

                    <ListView.View>
                        <GridView>
                            <GridViewColumn Header="Description:" DisplayMemberBinding="{Binding Description}"/>
                            <GridViewColumn Header="X:" DisplayMemberBinding="{Binding X}" />
                            <GridViewColumn Header="Y:" DisplayMemberBinding="{Binding Y}" />

                        </GridView>
                    </ListView.View>

                </ListView>

As you can see, I tried BorderThickness="1.000001" but it didn't work.
Also, I tried using ui:TitleBar.IsIconVisible="True" but the icon doesn't appear in the title bar, there's only space for it but it's empty. I set up my icon through my application's properties and I can see the icon in my Window's taskbar.

Textbox focused background in dark theme is white, how to set it to black?

Hi,

(I'm a WPF n00b so this is likely a question answered quickly). Your textboxes have a white background when they're focused. This is OK, but I use one for a multi-line textbox where I log readonly text. This results in a white textbox when the theme is 'dark', which is unfortunate, as I want to keep it the style it has when it's not focused, so

SystemControlBackgroundAltMediumLowBrush for background and SystemControlForegroundBaseHighBrush for foreground.

How to establish this? Some override at the app.xaml level?
Thanks in advance!

(Edit) I have dynamic theme switching at runtime, so setting the background to black hardcoded is sadly not an option.

Nice job

That's exactly what Microsoft should have done with WPF from the start ... and what I needed.

Thank you for your work. 👍

A control for textbox numbers?

Hi, I have been using it for a few days and I really like your library. I looked through the SampleApp and didn't see any controls for textbox numbers. Something like https://mahapps.com/controls/numericupdown.html in Mahapps.Metro. Are there any plans for adding such control? Thank you for your answer.

Suggestions for improvement

Hi, I really like your work. I have some suggestions for improvement. For example, it would be nice to make an animation when selecting an item in HamburgerMenu, see the picture.

Or also add Tilt Effect as shown : WPF Tilt Effect Behavior

(Feature Request) Make attached properties on `TabControlHelper` also work on `TabPanel`s

My request is to be able to use the following attached properties also work on TabPanels:

• TabStripHeader
• TabStripHeaderTemplate
• TabStripFooter
• TabStripFooterTemplate

In my case, I'm using a TabPanel outside of a TabControl since I'm only interested on the tabs.

According to MSDN:

The TabPanel serves as an item host for the tab items in a TabControl.
It determines the correct sizing and positioning for tab items and handles the logic for multiple rows of TabItem objects.

ProgressBar - MouseOver Issue

When the mouse is hovered over ProgressBar control this thing happens

"System.Windows.ResourceDictionary Warning: 9 : Resource not found" when changing themes

Hi, I'm using 0.8 ModernWpf and 0.8 MahApps and for some reason every time I change themes I get spammed "System.Windows.ResourceDictionary Warning: 9 : Resource not found".
This is my View:

                    <ui:RadioButtons SelectedIndex="{Binding SelectedThemeIndex, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
                        <ui:RadioButtons.Header>
                            <StackPanel Orientation="Horizontal">
                                <iconPacks:PackIconMaterial Kind="ThemeLightDark" VerticalAlignment="Center"/>
                                <Label Content="Theme Mode" Margin="2 0 0 0"/>
                            </StackPanel>
                        </ui:RadioButtons.Header>

                        <system:String>Light</system:String>
                        <system:String>Dark</system:String>
                    </ui:RadioButtons>

ViewModel:

        private int _selectedThemeIndex;
        public int SelectedThemeIndex
        {
            get { return _selectedThemeIndex; }
            set
            {
                _selectedThemeIndex = value;

                ThemeManager.Current.ApplicationTheme = SelectedThemeIndex switch
                {
                    0 => ApplicationTheme.Light,
                    1 => ApplicationTheme.Dark
                };

                NotifyOfPropertyChange(() => SelectedThemeIndex);
            }
        }

App.xaml:

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary>
                    <local:Bootstrapper x:Key="Bootstrapper"/>
                </ResourceDictionary>

                <ui:ThemeResources />
                <ui:XamlControlsResources />

                <ui:ThemeResources>
                    <ui:ThemeResources.ThemeDictionaries>
                        <ResourceDictionary x:Key="Light">
                            <ResourceDictionary.MergedDictionaries>
                                <ResourceDictionary Source="/MahApps.Metro;component/Styles/Themes/Light.Blue.xaml" />
                            </ResourceDictionary.MergedDictionaries>
                        </ResourceDictionary>
                        <ResourceDictionary x:Key="Dark">
                            <ResourceDictionary.MergedDictionaries>
                                <ResourceDictionary Source="/MahApps.Metro;component/Styles/Themes/Dark.Blue.xaml" />
                            </ResourceDictionary.MergedDictionaries>
                        </ResourceDictionary>
                    </ui:ThemeResources.ThemeDictionaries>
                </ui:ThemeResources>

                <ui:MahAppsColorPaletteResources />
                <ResourceDictionary Source="/MahApps.Metro;component/Styles/Controls.xaml" />
                <ResourceDictionary Source="/MahApps.Metro;component/Styles/Fonts.xaml" />

                <ui:XamlControlsResources />
                <ResourceDictionary Source="/ModernWpf.MahApps;component/Styles/Controls.xaml" />

            </ResourceDictionary.MergedDictionaries>

        </ResourceDictionary>
    </Application.Resources>

When I change themes my app freezes for like 2 seconds and then I get spammed with the above warning and the theme changes. I don't know what's wrong here.

Rendering black bar when using UseModernWindowStyle

I have created a sample app. The issue is that when SizeToContent is set to "WidthAndHeight" and ui:WindowHelper.UseModernWindowStyle is set to "True", there is a black bar at the right side of the app and underneath it, which resemble the former size of the window - without modern window style.

When UseModernWindowStyle is set to False, there is no problem whatsoever.

Thank you very much for all your work!

Can you check and test the ThemeShadowChrome function with slide animation?

I use the ThemeShadowChrome container in ComboBox sytle,when set the popup Animation for Slide，As follows:

The animation effect start position is from the ComboBox's left top,instead of from the left bottom,
when don't using the ThemeShadowChrome container,the animation effect start position is from the left bottom,it is OK!

DisplayMemberPath of ComboBox not working in it's dropdown list.

<ComboBox Name="ComboBox"
          IsEditable="False"
          DisplayMemberPath="Name"
          SelectedValuePath="Id"
          ItemsSource="{Binding Path=Items}" />

public class ViewModel
{
    public ViewModel()
    {
        Items = new List<MyItem> {new MyItem(1, "item1"), new MyItem(2, "item2")};
    }

    public List<MyItem> Items { get; }

    public class MyItem
    {
        public MyItem(int id, string name)
        {
            Id = id;
            Name = name;
        }
        public int Id { get; }
        public string Name { get; }
    }
}

ThemeShadowChrome need optimize

the popup shadow is cool,but it is not better then the microsoft xaml control,
the bottom shadow'color is too deep,and the left/right effect too weak
I modify: effect.ShadowDepth = 0.2 * depth;
effect.BlurRadius = 0.8 * depth + c_shadowMargin;
we hope look the xaml control's shadow effect.

Best way to override colours for controls?

I want to give the buttons a border (in another project that uses the nuget package). How should I override the color key in my own resource dictionary?

For example, in Dark.xaml there is

<m:StaticResource x:Key="ButtonBorderBrush" ResourceKey="SystemControlForegroundTransparentBrush" />

If I want to set this to SystemControlBackgroundBaseMediumHighBrush what is the best way that will still respect the theme settings?

NumberBox inline spin buttons are offset when description is used

XAML:

<ui:NumberBox Header="Tray"
                          Description="0: rebus, 1: left tray, 2: right tray, 3: repeat"
                          Minimum="0"
                          Maximum="3"
                          SmallChange="1" 
                          SpinButtonPlacementMode="Inline"
                          Value="{Binding Tray}"/>

How to get a system theme with ThemeManager?

tbsys.Text = ModernWpf.ThemeManager.GetActualTheme(this).ToString();
This does not return me an actual theme, it returns a requested theme, but if there isno requested theme, then it returns default.

Proposal to add Connected animation

Hello, I have another pretty interesting idea to extend the features. It would be nice to do something similar to Connected animation from UWP https://docs.microsoft.com/en-us/windows/uwp/design/motion/connected-animation, see the picture
I found something similar in WPF Connected Animation in WPF