MaterialDesignInXamlToolkit

MaterialDesignInXamlToolkit

제품 정보

즐겨찾기

오픈소스 사용 사례

공개 채팅

지원 계획

현재 사용할 수 있는 OSS 플랜이 없습니다.

저장소의 제공자 또는 기여자인 경우 OSS 플랜 추가를 시작할 수 있습니다.

OSS 플랜 추가
여기에서 자세히 알아보세요

이 오픈소스에 대한 플랜을 찾고 있다면 저희에게 문의해 주세요.

전문 공급자와 연락하실 수 있도록 도와드리겠습니다.

제품 세부 정보

Google's Material Design in XAML & WPF, for C# & VB.Net.

Material Design In XAML Toolkit Logo of Material Design in XAML

NuGet-Themes NuGet-Colors

NuGet-Themes-CI NuGet-Colors-CI

Backers on Open Collective Sponsors on Open Collective Chat Issues

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
  • Easy configuration of palette (at design and runtime), according to Google's guidelines
  • Full Material Design Icons icon pack
  • Easy transition effects
  • Compatible with Dragablz, MahApps
  • Demo applications included in the source project

See screenshots

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

Getting started

[!NOTE] See the full starting guide 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
<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

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

Show images ![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)

More examples

FAQ

Contributing

Before contributing code read the Contribution Guidelines

Want to say thanks? 🙏🏻

  • Hit the :star: star :star: button
  • If you'd like to make a very much appreciated financial donation please visit open collective

This project exists thanks to all the people who contribute.

Mentions

Backers

Thank you to all our backers! 🙏 Become a backer.

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. Become a sponsor.

문의하기

  • 비즈니스 개발자를 위한 최신 정보를 원하십니까? 소스 코드 프로젝트에 대한 PieceX 커뮤니티의 요구사항을 알아보세요. PieceX의 최신 무료 커뮤니티 코드를 빠르게 알려드립니다.
PieceX Logo