개요

WPF 앱을 만들 때 Material Design으로 만들려고합니다.
매번 잊기 때문에 비망록으로 기사를 작성 (웃음).

절차

WPF 프로젝트를 만들고 솔루션 탐색기에서 프로젝트를 마우스 오른쪽 버튼으로 클릭합니다.
메뉴에서 NuGet 패키지 관리를 선택합니다.



그런 다음 참조 탭을 선택하고 검색 창에 "MaterialDesign"을 입력합니다.
검색 결과에서 "MaterialDesignThemes"를 선택.
오른쪽에 정보가 표시되므로 "설치"를 클릭하십시오.



다음과 같은 대화 상자가 표시되므로 확인을 클릭합니다.



설치가 완료되면 App.xmal을 엽니다. Application.Resource 태그 안에 다음을 설명합니다.

App.xmal

        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.lightgreen.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.amber.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>

MainWindow.xaml의 Window 태그에 다음 매개 변수를 추가합니다.

MainWindow.xaml

        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        TextElement.Foreground="{DynamicResource MaterialDesignBody}"
        Background="{DynamicResource MaterialDesignPaper}"
        FontFamily="{DynamicResource MaterialDesignFont}"

설정은 이상으로 완료.
시도에 MainWindow.xaml에 버튼을 배치해보십시오.
다음과 같은 코드를 작성해 보았습니다.

    <Grid>
        <StackPanel Margin="10,10,0,0" VerticalAlignment="Top" Orientation="Horizontal" >
            <Button x:Name="SettingButton"
                        Margin="10">
                <StackPanel Orientation="Horizontal">
                    <materialDesign:PackIcon Kind="Settings" />
                    <TextBlock Margin="8 0 0 0" VerticalAlignment="Center">
                            設定
                    </TextBlock>
                </StackPanel>
            </Button>
        </StackPanel>
    </Grid>

실행 결과는 이런 느낌