BAGAIMANA CARA INSTALL MATERIAL DESIGN UNTUK C# - WPF (XAML)

Huy gan.. kali ini saya akan membagikan cara untuk install Material Design pada C# - WPF (XAML)

apa itu Material Design??
Material Design adalah sebuah framwork UI (User Interface) untuk C# - WPF, sama seperti BOOTSTRAP pada HTML, nah kalo Material Design Framework UI untuk aplikasi dekstop WPF (XAML)

JANGAN LUPA SUBCRIBE CHANNEL ANE DAN LIKE VIDEONYA YA GAN >> KLIK DISINI

ikuti langkah berikut..

1. buka visual studio (disini saya memakai Visual Studio 2013 Ultimate), dan create new project C# - WPF (nama bebas)

2. setelah new project terbuka, install Material Design Framework melalui Manage NuGet Package dengan cara: 

     Klik properties >> Klik Manage NuGet Package

3. cari Material Design Themes secara online, lalu install

4. setelah ter-install makan tombol install pada material desing nya akan hilang dan berubah menjadi tanda checklist ber warna hijau. seperti ini..

5. nah... pada langkah ini Material Design sudah berhasil ter-install, skarang import component themes nya pada aplikasi kita dengan cara.. cari file [App.xaml] pada Solution Explorer, dan buka filenya dengan double klik

6. jika sudah terbuka, copy dan paste script dibawah ini pada tag <Application.Resources>

        <!-- copy paste component themes disini -->
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <!--<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />-->
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Dark.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Indigo.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.DeepPurple.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Shadows.xaml" />




                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ToggleButton.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Card.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.CheckBox.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Flipper.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Popupbox.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Groupbox.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ListBox.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.RadioButton.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.TextBlock.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>

7. nah sekarang untuk installasi dan import component sudah selesai sekarang test buat UI nya

masukan coding berikut

<Window x:Class="InstallMaterialDesign.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
            TextElement.Foreground="{DynamicResource MaterialDesignBody}"
            TextElement.FontWeight="Regular"
            TextElement.FontSize="13"
            TextOptions.TextFormattingMode="Ideal"
            TextOptions.TextRenderingMode="Auto"
            Background="{DynamicResource MaterialDesignPaper}"
            FontFamily="{DynamicResource MaterialDesignFont}"
             HorizontalAlignment="Center"
             >
    <GroupBox
        Header="Login"
        Style="{DynamicResource MaterialDesignCardGroupBox}"
        Margin="16"
        VerticalAlignment="Center"
        HorizontalAlignment="Stretch"
        >




        <GroupBox.HeaderTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="40"/>
                    </Grid.ColumnDefinitions>
                    <StackPanel Orientation="Horizontal">
                        <materialDesign:PackIcon
                            Kind="LoginVariant"
                            Height="32"
                            Width="32"
                            VerticalAlignment="Center"/>
                        <TextBlock 
                            VerticalAlignment="Center"
                            HorizontalAlignment="Stretch"
                            Style="{StaticResource MaterialDesignSubheadingTextBlock}"
                            Text="{Binding}"/>
                        <!-- binding text from parent -->
                    </StackPanel>
                    <Button
                            Grid.Column="1"
                            Style="{DynamicResource MaterialDesignFloatingActionMiniButton}"
                            materialDesign:ShadowAssist.ShadowDepth="Depth0">
                        <materialDesign:PackIcon
                                Kind="CloseCircleOutline"
                                Width="32"
                                Height="32"
                                VerticalAlignment="Center"/>
                    </Button>
                </Grid>
            </DataTemplate>
        </GroupBox.HeaderTemplate>
        <materialDesign:Card
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Margin="10">
            <StackPanel
                VerticalAlignment="Center"
                Margin="10">
                <StackPanel Orientation="Vertical"
                            HorizontalAlignment="Center"
                            Margin="0 20 0 0"
                            Width="250">




                    <TextBox HorizontalAlignment="Stretch"
                             materialDesign:HintAssist.Hint="Username"
                             Style="{StaticResource MaterialDesignFloatingHintTextBox}"
                             Padding="3 5 10 0"/>
                    <PasswordBox HorizontalAlignment="Stretch"
                             materialDesign:HintAssist.Hint="Password"
                             Style="{StaticResource MaterialDesignFloatingHintPasswordBox}"
                             Padding="3 5 10 0"/>
                    <Button
                        Style="{StaticResource MaterialDesignRaisedButton}"
                        materialDesign:ButtonProgressAssist.Value="-1"
                        materialDesign:ButtonProgressAssist.IsIndicatorVisible="True"
                        materialDesign:ButtonProgressAssist.IsIndeterminate="True"
                        Margin="0 10"
                        Content="Login"/>
                </StackPanel>
            </StackPanel>
        </materialDesign:Card>
    </GroupBox>
</Window>
    

Berikut hasilnya

atau jika kurang jelas.. bisa tonton tutorial nya disini

TerimaKasih

#HappyCoding