Themebuilder for WPF

[johnottone]

@pchaurasia14 Here is the post about a potential Theme Builder that we discussed earlier. So this is to build on our last talks about the WPF Roadmap and where all the votes landed, etc. For those that are coming late to the party, that discussion can be found here.

So when we are talking about bringing the Windows 11 look and feel to wpf controls, I think it should be pointed out that the community has never really had a way to get the most up-to-date look and feel on the desktop controls. But this was supposed to be one of the key reasons that WPF was so big. It allows the user to make any control look however they want it to look. The sky is the limit... So we of course know that the 3rd party control suite providers offer all kinds of themes. And for a couple thousand dollars a year, you too, could own a set of controls with outstanding themes... The problem is, alot of companies cant afford a couple thousand dollars a year just to buy controls that "look" nice. There has to be functionality as well. And that functionality must be quantified. Anyway, so I had brought up the point that one of the 3rd party control suite vendors started selling their THEME BUILDER application for like $100 bucks per license. Which I immediately had words with several of the people that thought that was a good idea. The company I was representing had been paying for the most expensive package that they could get for almost a decade. And by the time it was said and done, the vendor offered ME and only ME, the Theme Builder at no extra charge, which I quickly declined to accept because it was the sheer principal of the matter... and giving it to me for free doesnt help all the other people that they are nickle and diming for a generated, glorified style sheet.

Which brings me full circle... The Wpf controls have always had some themes and styles like Aero and Aero Black, and most of the time they existed in sample apps or demos, and you could grab the generic.xaml file and do some modding and VOILA you have a new style dictionary. One of my favorites was the wireframing sketch controls and styles that came with Blend a LOOONG TIME AGO. I have sense dug all that stuff out and resurrected an app using the sketch styles and fonts. So My proposal is this. And please this is all just rolling off the tongue, so if anyone has any ideas to facilitate this or explain it better, by all means, please do so....But the talks we were involved in revolved around Windows 11. And some of the stuff that's going to be done will not be backported unfortunately. SO why not try to gather up all these older style dictionaries and present them in a Microsoft Branded Theme Builder for the ages. A gift for the community that has been using WPF since before its first Release Candidate. A way to make their applications reflect the time and energy they put into the functionality of the apps. Oh what a treat, not only is my app solid as a rock, but it looks AWESOME TOO! The biggest and baddest collection of resource dictionaries and styles that the community has ever seen. And it can even be powered by the community, if we implemented a way to share our styles and themes with the community at large.

So, ay I needed a nice looking style but Im still using .Net 4.6.x Well I would select my .Net Version and there could be a list of all the different styles or resource dictionaries that were released in demos or examples when that framework was released, etc.... but why stop there. We can parse the dictionaries for the most common properties and normalize the naming conventions on them so that we have like a common set of Brushes for the framework in question.... Like ya know AccentBrush or PrimaryBrush, HighlightBrush, DisabledBrush, etc....and have it to where you can select a dark-themed version or a light themed version. Have it to where you can select a primary color and the theme builder could run a few algorithms to get some awesome swatches in your "theme". So this would satisfy all the people that are still using the older frameworks, but all the while, we are building this Theme Builder for the future. well we're building it for Windows 11, which is kinda the present, and will quickly be the past, but we are also building it so that it can be built upon . So it can grow. It will grow with each operating system, and it can grow in the context of supported frameworks, and it can be easily adapted to Maui, and like I said I think the sky is the limit if we just put some thought into this...So....what say you

Here is one of my apps I use to save Color Palettes, and allows me to give each swatch a name like AccentFocusedColor. I havent used this app in a while but could be quickly repurposed to generate the styles needed for a nicely themed application. It also allows you to upload an image and will give you the predominant colors in the image but will also give you any number of swatches you want back based on the percentages of each color in the photo

Here is the app that came out of getting all the old prototyping sketch styles out of blend and repurposing them in my own prototyping app .

[Symbai]

And for a couple thousand dollars a year, you too, could own a set of controls with outstanding themes...

Or you just use one of the free open source github projects:

https://github.com/MahApps/MahApps.Metro
https://github.com/Kinnara/ModernWpf
https://github.com/NC-Automation/WPF.Win11Style
http://materialdesigninxaml.net/
https://github.com/TanyaPristupova/WpfOfficeTheme
https://github.com/ghost1372/HandyControls

well we're building it for Windows 11

Waste of time. Windows 11 is defined mostly by Mica style. And the color of Windows 11 themed apps is actually defined by the USERS SYSTEM CHOICE making your color palette obsolete. Look at the Windows 11 store, to see how a Windows 11 theme should be.

Now open Windows 11 settings, personalize, color. Switch to light mode, set accent color to blue.

Also a lot of Windows 11 controls have tiny animations (besides of their different style). Just to name a FEW:

Slider (thumb increases on mouse hover):

Combobox (on drop down menu opened, selection gets a line on left side)

Switches pages (if you switch up/down, page transition slide effect is also up/down. Switch left/right, slide ffect is also left/right)

This is how a Windows 11 theme should be, what it should give to developers. If you come up with your own color palette, which is probably even just painting the default controls, you're doing anything but Windows 11 theme.

[johnottone]

@Symbai

Or you just use one of the free open source github projects:

Well, for one, the projects you posted are not Theme Builders. Some are demo applications that show how to incorporate themes into an application. Others are entire UI Frameworks. How do I know this? Because I've forked a few of them myself. I have used at least one of them in a real-world demo app, for a real company...a real customer. Partly because one of the templates generated by Microsoft in their template studio, came with it as the framework of the project. But it was ripped out before the application went into production. "Don't forget to tell your next big customer to make sure they reference the latest MahApps NuGet package..."

Waste of time. Windows 11 is defined mostly by Mica style. And the color of Windows 11 themed apps is actually defined by the USERS SYSTEM CHOICE making your color palette obsolete. Look at the Windows 11 store, to see how a Windows 11 theme should be.

To respond directly to your comment... Color Palettes are most definitely not obsolete. In my world, THE CUSTOMER dictates the colors to be used. Thats why you can download a media packet from just about any company that dictates their color palettes when used in software and media, etc...
So if you just signed a contract with a large company and their flagship colors were lets say .....Green and Gold, and they wanted their new, shiny app to use their flagship colors, which is more likely? That they would make everyone in the company at all 3000+ stores, go to their settings page and select a green color for their system color, OOOOOOR... would they want their software vendor to apply a theme directly to that application, that contains their colors, and keeps them from having to custom style thousands of pcs at every store in the country, oh sure they could use group policy, but does that really make sense? I'll answer that for you... No, it doesn't make sense. Most of the guidelines for company palettes can be found on their website, or when they contract you to write software, they will provide it to you. For example... here is the official color palette for Home Depot. How would they like it if I sold them software and the palette was based on this instead? For you to say that color palettes are obsolete shows that you had no idea that companies have guidelines for color palettes, which begs the question, for whom exactly are you writing software? I'm trying to talk about real-world solutions to real-world problems.

Slider (thumb increases on mouse hover):

So in the Style that is generated with this Theme Builder, there could be an option to have the inner thumb grow or shrink on state change. you create a 4 or 5 line storyboard that translates the inner thumb from 10% of the outer thumb container to 80% of the outer thumb container with a duration of 1 second. I mean it's literally just a few lines of code to do that...

Combobox (on drop down menu opened, selection gets a line on left side)

That little line is most likely bound to the FocusedDropDown state of the combobox, as soon as you click the combobox, it opens, giving focus to the actual drop-down and showing a line in front of the active combobox. It would be most likely a rectangle object in the control style, named "ActiveMarker" or "FocusedMarker" and you could easily bind its opacity to a state . Take it further and do it for MenuItems...if a menu item is selected, make the "SelectedMarker" visible, or again use opacity...

So, I guess I'm just not understanding anything you posted really. I mean do you think that those styles can't be generated or recreated by the WPF team? Do you not care about giving .NET Framework users a tool to generate styles and themes.? Most of the 3rd party vendors have a Theme Builder or a Color Generator or some type of tool to generate a desired look and feel via xaml files, or they can generate the resource in code-behind as well. Why shouldn't Microsoft have their own Theme Builder? These software developers did not go to GitHub and download someone's demo project that shows 3 different colors on a TextBlock in a window and call it a Theme Builder. Have you built the projects you posted above? Do you know what each of them do? Are your customers aware that they paid you to write an app, and you just gave them a modified GitHub project? You know there are software companies that don't just go to GitHub to download someone else's source code, right? They have an idea, and they DEVELOP something. Thats what makes them software developers and not keyboard cowboys. They may peek inside Yimeng Wu's source code to see how he implemented something, and they might even use a portion of his code, because he licensed it that way so that people could use it. And that's what the open-source community is about. Thanks for the positive criticism!!

Thank,

J

[johnottone]

@pchaurasia14

Stop me if Im wrong, but the styling that @Symbai is talking about shouldn't be that difficult, since the active marker and animations exist in the community toolkit demo already, right?

@Symbai

Combobox (on drop down menu opened, selection gets a line on left side)

Here is how Leszek Pomianowski implements it inside a ListViewItem, for other controls, an animation may be added, but I think it should be optional anyway. And get this...This style also works on .NetFramework, not just .NET5,.NET6, and .NET7. And if a theme generator could generate this for you, you wouldn't be happy?

<!--
    This Source Code Form is subject to the terms of the MIT License.
    If a copy of the MIT was not distributed with this file, You can obtain one at https://opensource.org/licenses/MIT.
    Copyright (C) Leszek Pomianowski and WPF UI Contributors.
    All Rights Reserved.
-->

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Style x:Key="DefaultListViewItemStyle" TargetType="{x:Type ListViewItem}">
        <Setter Property="Foreground">
            <Setter.Value>
                <SolidColorBrush Color="{DynamicResource TextFillColorPrimary}" />
            </Setter.Value>
        </Setter>
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Border.CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
        <Setter Property="Margin" Value="0,0,0,2" />
        <Setter Property="Padding" Value="4" />
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBoxItem}">
                    <Border
                        x:Name="Border"
                        Margin="0"
                        Padding="0"
                        Background="Transparent"
                        BorderThickness="1"
                        CornerRadius="{TemplateBinding Border.CornerRadius}">
                        <Grid>
                            <ContentPresenter Margin="{TemplateBinding Padding}" />
                            <Rectangle
                                x:Name="ActiveRectangle"
                                Width="4"
                                Height="18"
                                Margin="0"
                                HorizontalAlignment="Left"
                                VerticalAlignment="Center"
                                RadiusX="2"
                                RadiusY="2"
                                Visibility="Collapsed">
                                <Rectangle.Fill>
                                    <SolidColorBrush Color="{DynamicResource SystemAccentColorSecondary}" />
                                </Rectangle.Fill>
                            </Rectangle>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsEnabled" Value="True" />
                                <Condition Property="IsMouseOver" Value="True" />
                            </MultiTrigger.Conditions>
                            <Setter TargetName="Border" Property="Background">
                                <Setter.Value>
                                    <SolidColorBrush Color="{DynamicResource ControlFillColorSecondary}" />
                                </Setter.Value>
                            </Setter>
                        </MultiTrigger>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="ActiveRectangle" Property="Visibility" Value="Visible" />
                            <Setter TargetName="Border" Property="Background">
                                <Setter.Value>
                                    <SolidColorBrush Color="{DynamicResource ControlFillColorSecondary}" />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style BasedOn="{StaticResource DefaultListViewItemStyle}" TargetType="{x:Type ListViewItem}" />

</ResourceDictionary>

Whether this gets done here or on my own, I plan on seeing this idea through to the end.

[Symbai]

Windows 11 theme has been requested. Not a theme builder or color palette tool. Both of these things usually dont provide the exact look and animation. They are more a general paint over. Like "Our application logo is blue yellow. I want a blue yellow theme". On some of the paid theme builders you can also check stuff like "I want round corners" etc. This is something very different than a single theme focused on Windows 11 style. Which, I mentioned it before, takes the color theme of the users system, not something you define yourself.

I'm not saying your idea isn't great. I am just saying it's not what people have voted for. And while you MAY be able to ALSO provide that with your idea it's about 80% of different work. I don't see anyone here in this repo having so much free time to work on that, that it wouldn't cause a delay. Instead if we listen to the votes and provide a single Windows 11 theme. It would not only look better than any generic click tool can provide, it would also be available more earlier.

[johnottone]

@Symbai

Yes, you are correct, this is something very different from creating the Windows 11 Style itself. This was never meant to take precedence over the processes the WPF team has to do for the actual theming. All that stuff is laid out in the roadmap. This is something I thought the community might want to be involved in. What gave you the idea that this was supposed to in any way alter the WPF Teams 2023 goals? Where did I ever state that.? I even posted a link to the actual roadmap that the team is following. I had mentioned this earlier and was asked to put it on the issue list, so I did. Let's calm down and stop being so combative with everyone about what they're doing and put that effort into building code that the community can use. I'm working 12 hour days for my company and then coming home and coding because it's what I love to do. If you dont want to be involved in this idea that's your choice. But I would appreciate it if you would start your own thread if all you want do is preach negativity. You can make your own post and express your feelings there, but it's not going to make the process go any faster. The team have their protocols that they have to follow as far as setting up testing and reviews and checklists, and benchmarks. You act like the team can just snap their fingers and you'll have a Windows 11 Theme. I mean there are reviews that have to be done...there are checks that have to succeed and protocols that have to be followed. Maybe you work for a company that doesn't require such high levels of due diligence, and that is great! But let's just be patient and optimistic and help each other to make 2023 an awesome year of rewarding work that the community and the team can be proud of. @Symbai, would you like to help me get a theme builder started? When there is a viable Windows 11 Style, I assure you, it can be implemented into the theme builder with all the other styles and themes that currently exist, and it can be used to bring a more consistent design model for the entire community to use. Let's build something.

[johnottone]

And @Symbai I will probably take your advice and use my favorite open source UI Framework, WPF UI as a jumping off point.