Skip to content

Commit

Permalink
Updated README.md (#3600)
Browse files Browse the repository at this point in the history 
* 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 <Keboo@users.noreply.github.com>

* Discord URL fix

* Badge fixes

---------

Co-authored-by: Kevin B <Keboo@users.noreply.github.com>
  • Loading branch information
@MichelMichels @Keboo
MichelMichels and Keboo authored Jun 17, 2024
1 parent ca1ec3a commit 208dedb
Showing 1 changed file with 142 additions and 90 deletions.
232 changes: 142 additions & 90 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,19 @@
# ![Alt text](src/web/images/MD4XAML64.png "Material Design In XAML Toolkit") Material Design In XAML Toolkit
<!-- omit in toc -->
# Material Design In XAML Toolkit ![Logo of Material Design in XAML](src/web/images/MD4XAML32.png)

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

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

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

# ![Alt text](src/web/images/MD4XAML28.png "Summary") Summary

Comprehensive and easy to use Material Design theme and control library for the Windows desktop (WPF).

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

[![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)
[![NuGet-Themes](https://img.shields.io/nuget/v/MaterialDesignThemes.svg?label=NuGet:%20Themes&style=flat-square)](https://www.nuget.org/packages/MaterialDesignThemes/)
[![NuGet-Themes](<https://img.shields.io/nuget/vpre/MaterialDesignThemes.svg?label=NuGet:%20Themes%20(CI)&style=flat-square>)](https://www.nuget.org/packages/MaterialDesignThemes/)
[![NuGet-Themes](https://img.shields.io/nuget/vpre/MaterialDesignColors.svg?label=NuGet:%20Colours&style=flat-square)](https://www.nuget.org/packages/MaterialDesignColors/)
[![Issues](https://img.shields.io/github/issues/MaterialDesignInXAML/MaterialDesignInXamlToolkit.svg?style=flat-square)](https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/issues)

# ![Alt text](src/web/images/MD4XAML28.png "How Can I Use The Themes?") Getting Started

- Checkout the [Super Quick Start](https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/wiki/Super-Quick-Start)
- Or, the more comprehensive [Starting Guide](https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/wiki/Getting-Started) guide.
- Or, watch the [Material Design In XAML Toolkit An Introduction](https://www.youtube.com/watch?v=-n5yeEOsbCk) video.

# ![Alt text](src/web/images/MD4XAML28.png "In Action") See It In Action

- Download a pre-compiled demo from the [releases](https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/releases) page.
- Download the source and run the demo ([more information](https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/wiki/Compiling-From-Source)).
- Checkout [Keboo/MaterialDesign.Examples](https://github.com/Keboo/MaterialDesignInXaml.Examples)
- Checkout [doobry](http://materialdesigninxaml.net/doobry).
- Checkout [F1ix](http://materialdesigninxaml.net/f1ix).
- Checkout [Motion List](https://github.com/MaterialDesignInXAML/MotionList).
[See screenshots](#screenshots)

<details>
<summary>Table of contents</summary>

- [Getting started](#getting-started)
- [Building the source](#building-the-source)
- [Screenshots](#screenshots)
- [More examples](#more-examples)
- [Contributing](#contributing)
- [Mentions](#mentions)
- [Backers](#backers)
- [Sponsors](#sponsors)

</details>

---

## Getting started

> [!NOTE]
> See the [full starting guide](https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/wiki/Getting-Started) for more in-depth information.
This quick guide assumes you have already created a WPF project and are using Microsoft Visual Studio 2022.

* Install the toolkit through the visual NuGet package manager in Visual Studio or use the following command:
```
Install-Package MaterialDesignThemes
```
* Alter your `App.xaml`

```xml
<Application
x:Class="Example.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<materialDesign:BundledTheme BaseTheme="Light" PrimaryColor="DeepPurple" SecondaryColor="Lime" />

<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesign2.Defaults.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
```
* If you want to target Material Design 3, alter the `ResourceDictionary` line in the snippet above to use `MaterialDesign3.Defaults.xaml`.

* Alter your `MainWindow.xaml`

```xml
<Window [...]
Style="{StaticResource MaterialDesignWindow}"
[...] >
```


## Building the source

To build the project, following is required:
* Microsoft Visual Studio 2022
* .NET desktop development workload

This repository also contains 3 different demo applications:
* `MaterialDesignDemo` - Reference WPF app with Material Design 2 styling, this contains all controls and is a recommended tool when developing apps with this library
* `MaterialDesign3Demo` - Reference WPF app with Material Design 3 styling, under development
* `MahAppsDragablzDemo` - Demo app for combining with Dragablz and MahApps

## Screenshots

> [!WARNING]
> The screenshots below are taken from the Material Design 2 demo app.
> It is possible that these are out of date. Run the demo app from latest source to see the latest version.
<details>
<summary>Show images</summary>

![Screenshot of WPF Material Design 2 demo application home page](src/web/images/screen-home.png)
![Buttons](src/web/images/screen-buttons.png)
![Toggles](src/web/images/screen-toggles.png)
![Fields](src/web/images/screen-fields.png)
![ComboBoxes](src/web/images/screen-comboboxes.png)
![Palette](src/web/images/screen-palette.png)
![Color Tools](src/web/images/screen-colortools.png)
![Pickers](src/web/images/screen-pickers.png)
![Icons](src/web/images/screen-iconpack.png)
![Cards](src/web/images/screen-cards.png)
![Menus and Toolbars](src/web/images/screen-menutoolbar.png)
![Progress Bars](src/web/images/screen-progress.png)
![Dialogs](src/web/images/screen-dialogs.png)
![Lists](src/web/images/screen-lists.png)
![Tree View](src/web/images/screen-treeview.png)
![Sliders](src/web/images/screen-sliders.png)
![Chips](src/web/images/screen-chips.png)
![Typography](src/web/images/screen-typography.png)
![Group Box](src/web/images/screen-groupbox.png)
![Snackbars](src/web/images/screen-snackbars.png)
![Elevation](src/web/images/screen-elevation.png)
</details>


## More examples

* [Keboo/MaterialDesign.Examples](https://github.com/Keboo/MaterialDesignInXaml.Examples)
* [doobry](http://materialdesigninxaml.net/doobry)
* [F1ix](http://materialdesigninxaml.net/f1ix)
* [Motion List](https://github.com/MaterialDesignInXAML/MotionList)

## Contributing

Before contributing code read the [Contribution Guidelines](.github/CONTRIBUTING.md)
* GitHub issues are for bugs and feature requests.
* 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].
* Stack Overflow tag: [`material-design-in-xaml`](http://stackoverflow.com/questions/tagged/material-design-in-xaml)

Want to say thanks? 🙏🏻
* Hit the :star: star :star: button
* If you'd like to make a very much appreciated financial donation please visit <a href='https://opencollective.com/materialdesigninxaml'>open collective</a>

# ![Alt text](src/web/images/MD4XAML28.png "How Can I Use The Themes?") Source Code

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`).

# ![Alt text](src/web/images/MD4XAML28.png "Contributions") Contribution Guidelines
This project exists thanks to all the people who contribute.

- Before contributing code read the [Contribution Guidelines](.github/CONTRIBUTING.md)
- GitHub issues are for bugs and feature requests.
- 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).
- Stack Overflow tag: [material-design-in-xaml](http://stackoverflow.com/questions/tagged/material-design-in-xaml)
- Want to say thanks?
- Hit the :star: Star :star: button
- If you'd like to make a very much appreciated financial donation please visit <a href='https://opencollective.com/materialdesigninxaml'>open collective</a>
<a href="https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/graphs/contributors">
<img src="https://contrib.rocks/image?repo=MaterialDesignInXAML/MaterialDesignInXamlToolkit" />
</a>

# ![Alt text](src/web/images/MD4XAML28.png "Mentions") Mentions
## Mentions

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

# <a name="Screenshots"></a>![Alt text](src/web/images/MD4XAML28.png "Screenshots") Screenshots

![Alt text](src/web/images/screen-buttons.png "Buttons")

![Alt text](src/web/images/screen-toggles.png "Toggles")

![Alt text](src/web/images/screen-fields.png "Fields")

![Alt text](src/web/images/screen-comboboxes.png "ComboBoxes")

![Alt text](src/web/images/screen-palette.png "Palette")

![Alt text](src/web/images/screen-colortools.png "Color Tools")

![Alt text](src/web/images/screen-pickers.png "Pickers")

![Alt text](src/web/images/screen-iconpack.png "Icons")

![Alt text](src/web/images/screen-cards.png "Cards")

![Alt text](src/web/images/screen-menutoolbar.png "Menus and Toolbars")

![Alt text](src/web/images/screen-progress.png "Progress Bars")

![Alt text](src/web/images/screen-dialogs.png "Dialogs")

![Alt text](src/web/images/screen-lists.png "Lists")

![Alt text](src/web/images/screen-treeview.png "Tree View")

![Alt text](src/web/images/screen-sliders.png "Sliders")

![Alt text](src/web/images/screen-chips.png "Chips")

![Alt text](src/web/images/screen-typography.png "Typography")

![Alt text](src/web/images/screen-groupbox.png "Group Box")

![Alt text](src/web/images/screen-snackbars.png "Snackbars")

![Alt text](src/web/images/screen-elevation.png "Elevation")

## Contributors

This project exists thanks to all the people who contribute.

<a href="https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/graphs/contributors">
<img src="https://contrib.rocks/image?repo=MaterialDesignInXAML/MaterialDesignInXamlToolkit" />
</a>

## Backers

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

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

## Sponsors

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)]
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)

<a href="https://opencollective.com/materialdesigninxaml/sponsor/0/website" target="_blank"><img src="https://opencollective.com/materialdesigninxaml/sponsor/0/avatar.svg"></a>
<a href="https://opencollective.com/materialdesigninxaml/sponsor/1/website" target="_blank"><img src="https://opencollective.com/materialdesigninxaml/sponsor/1/avatar.svg"></a>
Expand All @@ -135,3 +185,5 @@ Support this project by becoming a sponsor. Your logo will show up here with a l
<a href="https://opencollective.com/materialdesigninxaml/sponsor/7/website" target="_blank"><img src="https://opencollective.com/materialdesigninxaml/sponsor/7/avatar.svg"></a>
<a href="https://opencollective.com/materialdesigninxaml/sponsor/8/website" target="_blank"><img src="https://opencollective.com/materialdesigninxaml/sponsor/8/avatar.svg"></a>
<a href="https://opencollective.com/materialdesigninxaml/sponsor/9/website" target="_blank"><img src="https://opencollective.com/materialdesigninxaml/sponsor/9/avatar.svg"></a>

[discord-server-url]: https://discord.keboo.dev

0 comments on commit 208dedb

Please sign in to comment.