Skip to content

Commit 208dedb

Browse files
MichelMichelsKeboo
andauthored
Updated README.md (#3600)
* Removed 'Super Quick Start' from README.md, badges on seperate lines * Add CI version of NuGet package MaterialDesignColors, more prominent place under title of README.md, add discord badge, removed gitter badge * Formatting of screenshots, put expander to hide them * Add TOC, removed icon prefixes from H2's * Fixed title * Reordering * Emphasis on out of date screenshots * Edited getting started section * Typo fix * Update README.md Co-authored-by: Kevin B <[email protected]> * Discord URL fix * Badge fixes --------- Co-authored-by: Kevin B <[email protected]>
1 parent ca1ec3a commit 208dedb

File tree

1 file changed

+142
-90
lines changed

1 file changed

+142
-90
lines changed

README.md

Lines changed: 142 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,19 @@
1-
# ![Alt text](src/web/images/MD4XAML64.png "Material Design In XAML Toolkit") Material Design In XAML Toolkit
1+
<!-- omit in toc -->
2+
# Material Design In XAML Toolkit ![Logo of Material Design in XAML](src/web/images/MD4XAML32.png)
23

3-
Comprehensive and easy to use Material Design theme and control library for the Windows desktop.
4+
[![NuGet-Themes](https://img.shields.io/nuget/v/MaterialDesignThemes.svg?label=nuget:%20MaterialDesignThemes)](https://www.nuget.org/packages/MaterialDesignThemes/)
5+
[![NuGet-Colors](https://img.shields.io/nuget/v/MaterialDesignColors.svg?label=nuget:%20MaterialDesignColors)](https://www.nuget.org/packages/MaterialDesignColors/)
46

5-
![Alt text](src/web/images/screen-home.png "Material Design Demo")
7+
[![NuGet-Themes-CI](https://img.shields.io/nuget/vpre/MaterialDesignThemes.svg?label=nuget:%20MaterialDesignThemes%20(CI))](https://www.nuget.org/packages/MaterialDesignThemes/)
8+
[![NuGet-Colors-CI](https://img.shields.io/nuget/vpre/MaterialDesignColors.svg?label=nuget:%20MaterialDesignColors%20(CI))](https://www.nuget.org/packages/MaterialDesignColors/)
69

7-
###### [More screenshots below](#Screenshots)
10+
[![Backers on Open Collective](https://opencollective.com/materialdesigninxaml/backers/badge.svg)](#backers)
11+
[![Sponsors on Open Collective](https://opencollective.com/materialdesigninxaml/sponsors/badge.svg)](#sponsors)
12+
[![Chat](https://img.shields.io/badge/chat-grey?logo=discord)][discord-server-url]
13+
[![Issues](https://img.shields.io/github/issues/MaterialDesignInXAML/MaterialDesignInXamlToolkit.svg)](https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/issues)
814

9-
# ![Alt text](src/web/images/MD4XAML28.png "Summary") Summary
15+
16+
Comprehensive and easy to use Material Design theme and control library for the Windows desktop (WPF).
1017

1118
- Material Design styles for all major WPF Framework controls
1219
- Additional controls to support the theme, including Multi Action Button, Cards, Dialogs, Clock
@@ -16,42 +23,135 @@ Comprehensive and easy to use Material Design theme and control library for the
1623
- Compatible with [Dragablz](https://github.com/ButchersBoy/Dragablz), [MahApps](https://github.com/MahApps/MahApps.Metro)
1724
- Demo applications included in the source project
1825

19-
[![Backers on Open Collective](https://opencollective.com/materialdesigninxaml/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/materialdesigninxaml/sponsors/badge.svg)](#sponsors) [![Gitter](https://img.shields.io/badge/Gitter-Join%20Chat,%20Get%20Help,%20Say%20Hello!-green.svg?style=flat-square)](https://gitter.im/ButchersBoy/MaterialDesignInXamlToolkit)
20-
[![NuGet-Themes](https://img.shields.io/nuget/v/MaterialDesignThemes.svg?label=NuGet:%20Themes&style=flat-square)](https://www.nuget.org/packages/MaterialDesignThemes/)
21-
[![NuGet-Themes](<https://img.shields.io/nuget/vpre/MaterialDesignThemes.svg?label=NuGet:%20Themes%20(CI)&style=flat-square>)](https://www.nuget.org/packages/MaterialDesignThemes/)
22-
[![NuGet-Themes](https://img.shields.io/nuget/vpre/MaterialDesignColors.svg?label=NuGet:%20Colours&style=flat-square)](https://www.nuget.org/packages/MaterialDesignColors/)
23-
[![Issues](https://img.shields.io/github/issues/MaterialDesignInXAML/MaterialDesignInXamlToolkit.svg?style=flat-square)](https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/issues)
24-
25-
# ![Alt text](src/web/images/MD4XAML28.png "How Can I Use The Themes?") Getting Started
26-
27-
- Checkout the [Super Quick Start](https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/wiki/Super-Quick-Start)
28-
- Or, the more comprehensive [Starting Guide](https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/wiki/Getting-Started) guide.
29-
- Or, watch the [Material Design In XAML Toolkit An Introduction](https://www.youtube.com/watch?v=-n5yeEOsbCk) video.
30-
31-
# ![Alt text](src/web/images/MD4XAML28.png "In Action") See It In Action
32-
33-
- Download a pre-compiled demo from the [releases](https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/releases) page.
34-
- Download the source and run the demo ([more information](https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/wiki/Compiling-From-Source)).
35-
- Checkout [Keboo/MaterialDesign.Examples](https://github.com/Keboo/MaterialDesignInXaml.Examples)
36-
- Checkout [doobry](http://materialdesigninxaml.net/doobry).
37-
- Checkout [F1ix](http://materialdesigninxaml.net/f1ix).
38-
- Checkout [Motion List](https://github.com/MaterialDesignInXAML/MotionList).
26+
[See screenshots](#screenshots)
27+
28+
<details>
29+
<summary>Table of contents</summary>
30+
31+
- [Getting started](#getting-started)
32+
- [Building the source](#building-the-source)
33+
- [Screenshots](#screenshots)
34+
- [More examples](#more-examples)
35+
- [Contributing](#contributing)
36+
- [Mentions](#mentions)
37+
- [Backers](#backers)
38+
- [Sponsors](#sponsors)
39+
40+
</details>
41+
42+
---
43+
44+
## Getting started
45+
46+
> [!NOTE]
47+
> See the [full starting guide](https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/wiki/Getting-Started) for more in-depth information.
48+
49+
This quick guide assumes you have already created a WPF project and are using Microsoft Visual Studio 2022.
50+
51+
* Install the toolkit through the visual NuGet package manager in Visual Studio or use the following command:
52+
```
53+
Install-Package MaterialDesignThemes
54+
```
55+
* Alter your `App.xaml`
56+
57+
```xml
58+
<Application
59+
x:Class="Example.App"
60+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
61+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
62+
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
63+
StartupUri="MainWindow.xaml">
64+
<Application.Resources>
65+
<ResourceDictionary>
66+
<ResourceDictionary.MergedDictionaries>
67+
<materialDesign:BundledTheme BaseTheme="Light" PrimaryColor="DeepPurple" SecondaryColor="Lime" />
68+
69+
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesign2.Defaults.xaml" />
70+
</ResourceDictionary.MergedDictionaries>
71+
</ResourceDictionary>
72+
</Application.Resources>
73+
</Application>
74+
```
75+
* If you want to target Material Design 3, alter the `ResourceDictionary` line in the snippet above to use `MaterialDesign3.Defaults.xaml`.
76+
77+
* Alter your `MainWindow.xaml`
78+
79+
```xml
80+
<Window [...]
81+
Style="{StaticResource MaterialDesignWindow}"
82+
[...] >
83+
```
84+
85+
86+
## Building the source
87+
88+
To build the project, following is required:
89+
* Microsoft Visual Studio 2022
90+
* .NET desktop development workload
91+
92+
This repository also contains 3 different demo applications:
93+
* `MaterialDesignDemo` - Reference WPF app with Material Design 2 styling, this contains all controls and is a recommended tool when developing apps with this library
94+
* `MaterialDesign3Demo` - Reference WPF app with Material Design 3 styling, under development
95+
* `MahAppsDragablzDemo` - Demo app for combining with Dragablz and MahApps
96+
97+
## Screenshots
98+
99+
> [!WARNING]
100+
> The screenshots below are taken from the Material Design 2 demo app.
101+
> It is possible that these are out of date. Run the demo app from latest source to see the latest version.
102+
103+
<details>
104+
<summary>Show images</summary>
105+
106+
![Screenshot of WPF Material Design 2 demo application home page](src/web/images/screen-home.png)
107+
![Buttons](src/web/images/screen-buttons.png)
108+
![Toggles](src/web/images/screen-toggles.png)
109+
![Fields](src/web/images/screen-fields.png)
110+
![ComboBoxes](src/web/images/screen-comboboxes.png)
111+
![Palette](src/web/images/screen-palette.png)
112+
![Color Tools](src/web/images/screen-colortools.png)
113+
![Pickers](src/web/images/screen-pickers.png)
114+
![Icons](src/web/images/screen-iconpack.png)
115+
![Cards](src/web/images/screen-cards.png)
116+
![Menus and Toolbars](src/web/images/screen-menutoolbar.png)
117+
![Progress Bars](src/web/images/screen-progress.png)
118+
![Dialogs](src/web/images/screen-dialogs.png)
119+
![Lists](src/web/images/screen-lists.png)
120+
![Tree View](src/web/images/screen-treeview.png)
121+
![Sliders](src/web/images/screen-sliders.png)
122+
![Chips](src/web/images/screen-chips.png)
123+
![Typography](src/web/images/screen-typography.png)
124+
![Group Box](src/web/images/screen-groupbox.png)
125+
![Snackbars](src/web/images/screen-snackbars.png)
126+
![Elevation](src/web/images/screen-elevation.png)
127+
</details>
128+
129+
130+
## More examples
131+
132+
* [Keboo/MaterialDesign.Examples](https://github.com/Keboo/MaterialDesignInXaml.Examples)
133+
* [doobry](http://materialdesigninxaml.net/doobry)
134+
* [F1ix](http://materialdesigninxaml.net/f1ix)
135+
* [Motion List](https://github.com/MaterialDesignInXAML/MotionList)
136+
137+
## Contributing
138+
139+
Before contributing code read the [Contribution Guidelines](.github/CONTRIBUTING.md)
140+
* GitHub issues are for bugs and feature requests.
141+
* For questions, help and chat in general, please use the [GitHub discussion tab](https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/discussions) or the [Discord server][discord-server-url].
142+
* Stack Overflow tag: [`material-design-in-xaml`](http://stackoverflow.com/questions/tagged/material-design-in-xaml)
143+
144+
Want to say thanks? 🙏🏻
145+
* Hit the :star: star :star: button
146+
* If you'd like to make a very much appreciated financial donation please visit <a href='https://opencollective.com/materialdesigninxaml'>open collective</a>
39147

40-
# ![Alt text](src/web/images/MD4XAML28.png "How Can I Use The Themes?") Source Code
41-
42-
To load the source project you will need Visual Studio 2022. Don't worry if you have an earlier version, you can still use the compiled assemblies from NuGet (`Install-Package MaterialDesignThemes`). There are three demo projects in the solution, restore the necessary NuGet packages and correct the programming syntax that is not compatible with C# versions lower than C# 10.0 (`currently used in Visual Studio 2022`). Then, you should be able to fire the projects up. The first one is a "pure" Material Design 2 project. The second one shows how to combine with Dragablz and MahApps. The last one is a Material Design 3 project (`In Development`).
43-
44-
# ![Alt text](src/web/images/MD4XAML28.png "Contributions") Contribution Guidelines
148+
This project exists thanks to all the people who contribute.
45149

46-
- Before contributing code read the [Contribution Guidelines](.github/CONTRIBUTING.md)
47-
- GitHub issues are for bugs and feature requests.
48-
- For questions, help and chat in general, please use the [GitHub discussion tab](https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/discussions) or the [Gitter chat room](https://gitter.im/ButchersBoy/MaterialDesignInXamlToolkit).
49-
- Stack Overflow tag: [material-design-in-xaml](http://stackoverflow.com/questions/tagged/material-design-in-xaml)
50-
- Want to say thanks?
51-
- Hit the :star: Star :star: button
52-
- If you'd like to make a very much appreciated financial donation please visit <a href='https://opencollective.com/materialdesigninxaml'>open collective</a>
150+
<a href="https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/graphs/contributors">
151+
<img src="https://contrib.rocks/image?repo=MaterialDesignInXAML/MaterialDesignInXamlToolkit" />
152+
</a>
53153

54-
# ![Alt text](src/web/images/MD4XAML28.png "Mentions") Mentions
154+
## Mentions
55155

56156
- **[James Willock](https://github.com/ButchersBoy)
57157
[![Twitter](https://img.shields.io/badge/twitter-%40james__willock-55acee.svg?style=flat-square)](https://twitter.com/James_Willock)** - Founder of the project
@@ -65,65 +165,15 @@ To load the source project you will need Visual Studio 2022. Don't worry if you
65165
- [Material Design Extensions](https://github.com/spiegelp/MaterialDesignExtensions) - A community repository based on this library that provides additional controls and features.
66166
- **[Contributors](https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/graphs/contributors)** - A big thank you to all the contributors of the project!
67167

68-
# <a name="Screenshots"></a>![Alt text](src/web/images/MD4XAML28.png "Screenshots") Screenshots
69-
70-
![Alt text](src/web/images/screen-buttons.png "Buttons")
71-
72-
![Alt text](src/web/images/screen-toggles.png "Toggles")
73-
74-
![Alt text](src/web/images/screen-fields.png "Fields")
75-
76-
![Alt text](src/web/images/screen-comboboxes.png "ComboBoxes")
77-
78-
![Alt text](src/web/images/screen-palette.png "Palette")
79-
80-
![Alt text](src/web/images/screen-colortools.png "Color Tools")
81-
82-
![Alt text](src/web/images/screen-pickers.png "Pickers")
83-
84-
![Alt text](src/web/images/screen-iconpack.png "Icons")
85-
86-
![Alt text](src/web/images/screen-cards.png "Cards")
87-
88-
![Alt text](src/web/images/screen-menutoolbar.png "Menus and Toolbars")
89-
90-
![Alt text](src/web/images/screen-progress.png "Progress Bars")
91-
92-
![Alt text](src/web/images/screen-dialogs.png "Dialogs")
93-
94-
![Alt text](src/web/images/screen-lists.png "Lists")
95-
96-
![Alt text](src/web/images/screen-treeview.png "Tree View")
97-
98-
![Alt text](src/web/images/screen-sliders.png "Sliders")
99-
100-
![Alt text](src/web/images/screen-chips.png "Chips")
101-
102-
![Alt text](src/web/images/screen-typography.png "Typography")
103-
104-
![Alt text](src/web/images/screen-groupbox.png "Group Box")
105-
106-
![Alt text](src/web/images/screen-snackbars.png "Snackbars")
107-
108-
![Alt text](src/web/images/screen-elevation.png "Elevation")
109-
110-
## Contributors
111-
112-
This project exists thanks to all the people who contribute.
113-
114-
<a href="https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/graphs/contributors">
115-
<img src="https://contrib.rocks/image?repo=MaterialDesignInXAML/MaterialDesignInXamlToolkit" />
116-
</a>
117-
118168
## Backers
119169

120-
Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/materialdesigninxaml#backer)]
170+
Thank you to all our backers! 🙏 [Become a backer.](https://opencollective.com/materialdesigninxaml#backer)
121171

122172
<a href="https://opencollective.com/materialdesigninxaml#backers" target="_blank"><img src="https://opencollective.com/materialdesigninxaml/backers.svg?width=890"></a>
123173

124174
## Sponsors
125175

126-
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/materialdesigninxaml#sponsor)]
176+
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor.](https://opencollective.com/materialdesigninxaml#sponsor)
127177

128178
<a href="https://opencollective.com/materialdesigninxaml/sponsor/0/website" target="_blank"><img src="https://opencollective.com/materialdesigninxaml/sponsor/0/avatar.svg"></a>
129179
<a href="https://opencollective.com/materialdesigninxaml/sponsor/1/website" target="_blank"><img src="https://opencollective.com/materialdesigninxaml/sponsor/1/avatar.svg"></a>
@@ -135,3 +185,5 @@ Support this project by becoming a sponsor. Your logo will show up here with a l
135185
<a href="https://opencollective.com/materialdesigninxaml/sponsor/7/website" target="_blank"><img src="https://opencollective.com/materialdesigninxaml/sponsor/7/avatar.svg"></a>
136186
<a href="https://opencollective.com/materialdesigninxaml/sponsor/8/website" target="_blank"><img src="https://opencollective.com/materialdesigninxaml/sponsor/8/avatar.svg"></a>
137187
<a href="https://opencollective.com/materialdesigninxaml/sponsor/9/website" target="_blank"><img src="https://opencollective.com/materialdesigninxaml/sponsor/9/avatar.svg"></a>
188+
189+
[discord-server-url]: https://discord.keboo.dev

0 commit comments

Comments
 (0)