MATERIAL DESIGN Archives

[C#/WPF/MATERIAL DESIGN/.NET5] ListBox 엘리먼트 사용하기

■ ListBox 엘리먼트를 사용하는 방법을 보여준다. ▶ MainApplication.xaml


<Application x:Class="TestProject.MainApplication"
    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="Inherit"
                    PrimaryColor="DeepPurple"
                    SecondaryColor="Lime"
                    ColorAdjustment="{materialDesign:ColorAdjustment}" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

<Application x:Class="TestProject.MainApplication"

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

<materialDesign:BundledTheme

BaseTheme="Inherit"

PrimaryColor="DeepPurple"

SecondaryColor="Lime"

ColorAdjustment="{materialDesign:ColorAdjustment}" />

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Application.Resources>

</Application>

▶ MainWnidow.xaml


<Window x:Class="TestProject.MainWindow"
    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"
    Width="800"
    Height="600"
    Title="ListBox 엘리먼트 사용하기"
    Background="{DynamicResource MaterialDesignPaper}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <StackPanel
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <materialDesign:Card Margin="10">
                <ListBox
                    Style="{StaticResource MaterialDesignChoiceChipListBox}"
                    Margin="10">
                    <ListBoxItem Content="Mercury" />
                    <ListBoxItem
                        IsSelected="True"
                        Content="Venus" />
                    <ListBoxItem Content="Earth" />
                    <ListBoxItem
                        IsEnabled="False"
                        Content="Pluto" />
                </ListBox>
            </materialDesign:Card>
            <materialDesign:Card Margin="10">
                <ListBox
                    Style="{StaticResource MaterialDesignChoiceChipPrimaryListBox}"
                    Margin="10">
                    <ListBoxItem Content="Mercury" />
                    <ListBoxItem
                        IsSelected="True"
                        Content="Venus" />
                    <ListBoxItem Content="Earth" />
                    <ListBoxItem
                        IsEnabled="False"
                        Content="Pluto" />
                </ListBox>
            </materialDesign:Card>
            <materialDesign:Card Margin="10">
                <ListBox
                    Style="{StaticResource MaterialDesignChoiceChipAccentListBox}"
                    Margin="10">
                    <ListBoxItem Content="Mercury" />
                    <ListBoxItem
                        IsSelected="True"
                        Content="Venus" />
                    <ListBoxItem Content="Earth" />
                    <ListBoxItem
                        IsEnabled="False"
                        Content="Pluto" />
                </ListBox>
            </materialDesign:Card>
            <materialDesign:Card Margin="10 30 10 10">
                <ListBox
                    Style="{StaticResource MaterialDesignChoiceChipOutlineListBox}"
                    Margin="10">
                    <ListBoxItem Content="Mercury" />
                    <ListBoxItem
                        IsSelected="True"
                        Content="Venus" />
                    <ListBoxItem Content="Earth" />
                    <ListBoxItem
                        IsEnabled="False"
                        Content="Pluto" />
                </ListBox>
            </materialDesign:Card>
            <materialDesign:Card Margin="10">
                <ListBox
                    Style="{StaticResource MaterialDesignChoiceChipPrimaryOutlineListBox}"
                    Margin="10">
                    <ListBoxItem Content="Mercury" />
                    <ListBoxItem
                        IsSelected="True"
                        Content="Venus" />
                    <ListBoxItem Content="Earth" />
                    <ListBoxItem
                        IsEnabled="False"
                        Content="Pluto" />
                </ListBox>
            </materialDesign:Card>
            <materialDesign:Card Margin="10">
                <ListBox
                    Style="{StaticResource MaterialDesignChoiceChipAccentOutlineListBox}"
                    Margin="10">
                    <ListBoxItem Content="Mercury" />
                    <ListBoxItem
                        IsSelected="True"
                        Content="Venus" />
                    <ListBoxItem Content="Earth" />
                    <ListBoxItem
                        IsEnabled="False"
                        Content="Pluto" />
                </ListBox>
            </materialDesign:Card>
        </StackPanel>
    </Grid>
</Window>

100

101

102

103

<Window x:Class="TestProject.MainWindow"

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"

Width="800"

Height="600"

Title="ListBox 엘리먼트 사용하기"

Background="{DynamicResource MaterialDesignPaper}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<materialDesign:Card Margin="10">

<ListBox

Style="{StaticResource MaterialDesignChoiceChipListBox}"

Margin="10">

<ListBoxItem

IsSelected="True"

Content="Venus" />

<ListBoxItem

IsEnabled="False"

Content="Pluto" />

</ListBox>

</materialDesign:Card>

<materialDesign:Card Margin="10">

<ListBox

Style="{StaticResource MaterialDesignChoiceChipPrimaryListBox}"

Margin="10">

<ListBoxItem

IsSelected="True"

Content="Venus" />

<ListBoxItem

IsEnabled="False"

Content="Pluto" />

</ListBox>

</materialDesign:Card>

<materialDesign:Card Margin="10">

<ListBox

Style="{StaticResource MaterialDesignChoiceChipAccentListBox}"

Margin="10">

<ListBoxItem

IsSelected="True"

Content="Venus" />

<ListBoxItem

IsEnabled="False"

Content="Pluto" />

</ListBox>

</materialDesign:Card>

<materialDesign:Card Margin="10 30 10 10">

<ListBox

Style="{StaticResource MaterialDesignChoiceChipOutlineListBox}"

Margin="10">

<ListBoxItem

IsSelected="True"

Content="Venus" />

<ListBoxItem

IsEnabled="False"

Content="Pluto" />

</ListBox>

</materialDesign:Card>

<materialDesign:Card Margin="10">

<ListBox

Style="{StaticResource MaterialDesignChoiceChipPrimaryOutlineListBox}"

Margin="10">

<ListBoxItem

IsSelected="True"

Content="Venus" />

<ListBoxItem

IsEnabled="False"

Content="Pluto" />

</ListBox>

</materialDesign:Card>

<materialDesign:Card Margin="10">

<ListBox

Style="{StaticResource MaterialDesignChoiceChipAccentOutlineListBox}"

Margin="10">

<ListBoxItem

IsSelected="True"

Content="Venus" />

<ListBoxItem

IsEnabled="False"

Content="Pluto" />

</ListBox>

</materialDesign:Card>

</StackPanel>

</Grid>

</Window>

TestProject.zip

[C#/WPF/MATERIAL DESIGN/.NET5] RadioButton 엘리먼트 사용하기

■ RadioButton 엘리먼트를 사용하는 방법을 보여준다. ▶ MainApplication.xaml


<Application x:Class="TestProject.MainApplication"
    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="Inherit"
                    PrimaryColor="DeepPurple"
                    SecondaryColor="Lime"
                    ColorAdjustment="{materialDesign:ColorAdjustment}" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

<Application x:Class="TestProject.MainApplication"

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

<materialDesign:BundledTheme

BaseTheme="Inherit"

PrimaryColor="DeepPurple"

SecondaryColor="Lime"

ColorAdjustment="{materialDesign:ColorAdjustment}" />

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Application.Resources>

</Application>

▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="RadioButton 엘리먼트 사용하기"
    Background="{DynamicResource MaterialDesignPaper}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <StackPanel
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <StackPanel Orientation="Horizontal">
                <RadioButton
                    Style="{StaticResource MaterialDesignChoiceChipRadioButton}"
                    Margin="10"
                    GroupName="Group1"
                    Content="RadioButton" />
                <RadioButton
                    Style="{StaticResource MaterialDesignChoiceChipPrimaryRadioButton}"
                    Margin="10"
                    GroupName="Group1"
                    IsChecked="True"
                    Content="Primary" />
                <RadioButton
                    Style="{StaticResource MaterialDesignChoiceChipAccentRadioButton}"
                    Margin="10"
                    GroupName="Group1"
                    Content="Secondary" />
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <RadioButton
                    Style="{StaticResource MaterialDesignChoiceChipOutlineRadioButton}"
                    Margin="10"
                    GroupName="Group2"
                    Content="Outline" />
                <RadioButton
                    Style="{StaticResource MaterialDesignChoiceChipPrimaryOutlineRadioButton}"
                    Margin="10"
                    GroupName="Group2"
                    IsChecked="True"
                    Content="Primary Outline" />
                <RadioButton
                    Style="{StaticResource MaterialDesignChoiceChipAccentOutlineRadioButton}"
                    Margin="10"
                    GroupName="Group2"
                    Content="Secondary Outline" />
            </StackPanel>
        </StackPanel>
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800"

Height="600"

Title="RadioButton 엘리먼트 사용하기"

Background="{DynamicResource MaterialDesignPaper}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<RadioButton

Style="{StaticResource MaterialDesignChoiceChipRadioButton}"

Margin="10"

GroupName="Group1"

Content="RadioButton" />

<RadioButton

Style="{StaticResource MaterialDesignChoiceChipPrimaryRadioButton}"

Margin="10"

GroupName="Group1"

IsChecked="True"

Content="Primary" />

<RadioButton

Style="{StaticResource MaterialDesignChoiceChipAccentRadioButton}"

Margin="10"

GroupName="Group1"

Content="Secondary" />

</StackPanel>

<RadioButton

Style="{StaticResource MaterialDesignChoiceChipOutlineRadioButton}"

Margin="10"

GroupName="Group2"

Content="Outline" />

<RadioButton

Style="{StaticResource MaterialDesignChoiceChipPrimaryOutlineRadioButton}"

Margin="10"

GroupName="Group2"

IsChecked="True"

Content="Primary Outline" />

<RadioButton

Style="{StaticResource MaterialDesignChoiceChipAccentOutlineRadioButton}"

Margin="10"

GroupName="Group2"

Content="Secondary Outline" />

</StackPanel>

</Grid>

</Window>

TestProject.zip

[C#/WPF/MATERIAL DESIGN/.NET5] ListBox 엘리먼트 사용하기

■ ListBox 엘리먼트를 사용하는 방법을 보여준다. ▶ MainApplication.xaml


<Application x:Class="TestProject.MainApplication"
    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="Inherit"
                    PrimaryColor="DeepPurple"
                    SecondaryColor="Lime"
                    ColorAdjustment="{materialDesign:ColorAdjustment}" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

<Application x:Class="TestProject.MainApplication"

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

<materialDesign:BundledTheme

BaseTheme="Inherit"

PrimaryColor="DeepPurple"

SecondaryColor="Lime"

ColorAdjustment="{materialDesign:ColorAdjustment}" />

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Application.Resources>

</Application>

▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    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"
    Width="800"
    Height="600"
    Title="ListBox 엘리먼트 사용하기"
    Background="{DynamicResource MaterialDesignPaper}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <StackPanel
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <materialDesign:Card Margin="10">
                <ListBox
                    Style="{StaticResource MaterialDesignFilterChipListBox}"
                    Margin="10">
                    <ListBoxItem Content="Mercury" />
                    <ListBoxItem
                        IsSelected="True"
                        Content="Venus" />
                    <ListBoxItem Content="Earth" />
                    <ListBoxItem
                        IsEnabled="False"
                        Content="Pluto" />
                </ListBox>
            </materialDesign:Card>
            <materialDesign:Card Margin="10">
                <ListBox
                    Style="{StaticResource MaterialDesignFilterChipPrimaryListBox}"
                    Margin="10">
                    <ListBoxItem Content="Mercury" />
                    <ListBoxItem
                        IsSelected="True"
                        Content="Venus" />
                    <ListBoxItem Content="Earth" />
                    <ListBoxItem
                        IsEnabled="False"
                        Content="Pluto" />
                </ListBox>
            </materialDesign:Card>
            <materialDesign:Card Margin="10">
                <ListBox
                    Style="{StaticResource MaterialDesignFilterChipAccentListBox}"
                    Margin="10">
                    <ListBoxItem Content="Mercury"/>
                    <ListBoxItem
                        IsSelected="True"
                        Content="Venus" />
                    <ListBoxItem Content="Earth"/>
                    <ListBoxItem
                        IsEnabled="False"
                        Content="Pluto" />
                </ListBox>
            </materialDesign:Card>
            <materialDesign:Card Margin="10 30 10 10">
                <ListBox
                    Style="{StaticResource MaterialDesignFilterChipOutlineListBox}"
                    Margin="10">
                    <ListBoxItem Content="Mercury" />
                    <ListBoxItem
                        IsSelected="True"
                        Content="Venus" />
                    <ListBoxItem Content="Earth" />
                    <ListBoxItem
                        IsEnabled="False"
                        Content="Pluto" />
                </ListBox>
            </materialDesign:Card>
            <materialDesign:Card Margin="10">
                <ListBox
                    Style="{StaticResource MaterialDesignFilterChipPrimaryOutlineListBox}"
                    Margin="10">
                    <ListBoxItem Content="Mercury" />
                    <ListBoxItem
                        IsSelected="True"
                        Content="Venus" />
                    <ListBoxItem Content="Earth" />
                    <ListBoxItem
                        IsEnabled="False"
                        Content="Pluto" />
                </ListBox>
            </materialDesign:Card>
            <materialDesign:Card Margin="10">
                <ListBox
                    Style="{StaticResource MaterialDesignFilterChipAccentOutlineListBox}"
                    Margin="10">
                    <ListBoxItem Content="Mercury" />
                    <ListBoxItem
                        IsSelected="True"
                        Content="Venus" />
                    <ListBoxItem Content="Earth" />
                    <ListBoxItem
                        IsEnabled="False"
                        Content="Pluto" />
                </ListBox>
            </materialDesign:Card>
        </StackPanel>
    </Grid>
</Window>

100

101

102

103

<Window x:Class="TestProject.MainWindow"

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"

Width="800"

Height="600"

Title="ListBox 엘리먼트 사용하기"

Background="{DynamicResource MaterialDesignPaper}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<materialDesign:Card Margin="10">

<ListBox

Style="{StaticResource MaterialDesignFilterChipListBox}"

Margin="10">

<ListBoxItem

IsSelected="True"

Content="Venus" />

<ListBoxItem

IsEnabled="False"

Content="Pluto" />

</ListBox>

</materialDesign:Card>

<materialDesign:Card Margin="10">

<ListBox

Style="{StaticResource MaterialDesignFilterChipPrimaryListBox}"

Margin="10">

<ListBoxItem

IsSelected="True"

Content="Venus" />

<ListBoxItem

IsEnabled="False"

Content="Pluto" />

</ListBox>

</materialDesign:Card>

<materialDesign:Card Margin="10">

<ListBox

Style="{StaticResource MaterialDesignFilterChipAccentListBox}"

Margin="10">

<ListBoxItem

IsSelected="True"

Content="Venus" />

<ListBoxItem

IsEnabled="False"

Content="Pluto" />

</ListBox>

</materialDesign:Card>

<materialDesign:Card Margin="10 30 10 10">

<ListBox

Style="{StaticResource MaterialDesignFilterChipOutlineListBox}"

Margin="10">

<ListBoxItem

IsSelected="True"

Content="Venus" />

<ListBoxItem

IsEnabled="False"

Content="Pluto" />

</ListBox>

</materialDesign:Card>

<materialDesign:Card Margin="10">

<ListBox

Style="{StaticResource MaterialDesignFilterChipPrimaryOutlineListBox}"

Margin="10">

<ListBoxItem

IsSelected="True"

Content="Venus" />

<ListBoxItem

IsEnabled="False"

Content="Pluto" />

</ListBox>

</materialDesign:Card>

<materialDesign:Card Margin="10">

<ListBox

Style="{StaticResource MaterialDesignFilterChipAccentOutlineListBox}"

Margin="10">

<ListBoxItem

IsSelected="True"

Content="Venus" />

<ListBoxItem

IsEnabled="False"

Content="Pluto" />

</ListBox>

</materialDesign:Card>

</StackPanel>

</Grid>

</Window>

TestProject.zip

[C#/WPF/MATERIAL DESIGN/.NET5] CheckBox 엘리먼트 사용하기

■ CheckBox 엘리먼트를 사용하는 방법을 보여준다. ▶ MainApplication.xaml


<Application x:Class="TestProject.MainApplication"
    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="Inherit"
                    PrimaryColor="DeepPurple"
                    SecondaryColor="Lime"
                    ColorAdjustment="{materialDesign:ColorAdjustment}" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

<Application x:Class="TestProject.MainApplication"

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

<materialDesign:BundledTheme

BaseTheme="Inherit"

PrimaryColor="DeepPurple"

SecondaryColor="Lime"

ColorAdjustment="{materialDesign:ColorAdjustment}" />

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Application.Resources>

</Application>

▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="CheckBox 엘리먼트 사용하기"
    Background="{DynamicResource MaterialDesignPaper}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <StackPanel
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <StackPanel Orientation="Horizontal">
                <CheckBox
                    Style="{StaticResource MaterialDesignFilterChipCheckBox}"
                    Margin="10"
                    IsChecked="True"
                    Content="CheckBox" />
                <CheckBox
                    Style="{StaticResource MaterialDesignFilterChipPrimaryCheckBox}"
                    Margin="10"
                    IsChecked="True"
                    Content="Primary" />
                <CheckBox
                    Style="{StaticResource MaterialDesignFilterChipAccentCheckBox}"
                    Margin="10"
                    IsChecked="True"
                    Content="Secondary" />
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <CheckBox
                    Style="{StaticResource MaterialDesignFilterChipOutlineCheckBox}"
                    Margin="10"
                    IsChecked="True"
                    Content="Outline" />
                <CheckBox
                    Style="{StaticResource MaterialDesignFilterChipPrimaryOutlineCheckBox}"
                    Margin="10"
                    IsChecked="True"
                    Content="Primary Outline" />
                <CheckBox
                    Style="{StaticResource MaterialDesignFilterChipAccentOutlineCheckBox}"
                    Margin="10"
                    IsChecked="True"
                    Content="Secondary Outline" />
            </StackPanel>
        </StackPanel>
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800"

Height="600"

Title="CheckBox 엘리먼트 사용하기"

Background="{DynamicResource MaterialDesignPaper}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<CheckBox

Style="{StaticResource MaterialDesignFilterChipCheckBox}"

Margin="10"

IsChecked="True"

Content="CheckBox" />

<CheckBox

Style="{StaticResource MaterialDesignFilterChipPrimaryCheckBox}"

Margin="10"

IsChecked="True"

Content="Primary" />

<CheckBox

Style="{StaticResource MaterialDesignFilterChipAccentCheckBox}"

Margin="10"

IsChecked="True"

Content="Secondary" />

</StackPanel>

<CheckBox

Style="{StaticResource MaterialDesignFilterChipOutlineCheckBox}"

Margin="10"

IsChecked="True"

Content="Outline" />

<CheckBox

Style="{StaticResource MaterialDesignFilterChipPrimaryOutlineCheckBox}"

Margin="10"

IsChecked="True"

Content="Primary Outline" />

<CheckBox

Style="{StaticResource MaterialDesignFilterChipAccentOutlineCheckBox}"

Margin="10"

IsChecked="True"

Content="Secondary Outline" />

</StackPanel>

</Grid>

</Window>

TestProject.zip

[C#/WPF/MATERIAL DESIGN/.NET5] Chip 엘리먼트 사용하기

■ Chip 엘리먼트를 사용하는 방법을 보여준다. ▶ MainApplication.xaml


<Application x:Class="TestProject.MainApplication"
    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="Inherit"
                    PrimaryColor="DeepPurple"
                    SecondaryColor="Lime"
                    ColorAdjustment="{materialDesign:ColorAdjustment}" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

<Application x:Class="TestProject.MainApplication"

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

<materialDesign:BundledTheme

BaseTheme="Inherit"

PrimaryColor="DeepPurple"

SecondaryColor="Lime"

ColorAdjustment="{materialDesign:ColorAdjustment}" />

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Application.Resources>

</Application>

▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    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"
    Width="800"
    Height="600"
    Title="Chip 엘리먼트 사용하기"
    Background="{DynamicResource MaterialDesignPaper}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Style TargetType="materialDesign:Chip">
            <Setter Property="Margin" Value="10" />
        </Style>
    </Window.Resources>
    <Grid>
        <StackPanel
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <StackPanel Orientation="Horizontal">
                <materialDesign:Chip
                    Content="James Willock">
                    <materialDesign:Chip.Icon>
                        <Image Source="IMAGE/sample.jpg" />
                    </materialDesign:Chip.Icon>
                </materialDesign:Chip>
                <materialDesign:Chip Content="Example Chip"      />
                <materialDesign:Chip Content="ANZ Bank" Icon="A" />
                <materialDesign:Chip Content="ZNA Inc"  Icon="Z" />
                <materialDesign:Chip
                    IconBackground="{DynamicResource PrimaryHueDarkBrush}"
                    IconForeground="{DynamicResource PrimaryHueDarkForegroundBrush}"
                    Content="Twitter">
                    <materialDesign:Chip.Icon>
                        <materialDesign:PackIcon Kind="Twitter" />
                    </materialDesign:Chip.Icon>
                </materialDesign:Chip>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <materialDesign:Chip
                    IsDeletable="True"
                    ToolTip="Just a tool tip"
                    DeleteToolTip="Your friendly neighbor delete button"
                    Content="James Willock"
                    Click="chip_Click"
                    DeleteClick="chip_DeleteClick">
                    <materialDesign:Chip.Icon>
                        <Image Source="IMAGE/sample.jpg" />
                    </materialDesign:Chip.Icon>
                </materialDesign:Chip>
                <materialDesign:Chip
                    IsDeletable="True"
                    ToolTip="This is an example chip"
                    Content="Example Chip" />
                <materialDesign:Chip
                    Icon="A"
                    IsDeletable="True"
                    Content="ANZ Bank" />
                <materialDesign:Chip
                    IconBackground="{DynamicResource PrimaryHueLightBrush}"
                    IconForeground="{DynamicResource PrimaryHueLightForegroundBrush}"
                    Icon="Z"
                    IsDeletable="True"
                    Content="ZNA Inc" />
            </StackPanel>
        </StackPanel>
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

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"

Width="800"

Height="600"

Title="Chip 엘리먼트 사용하기"

Background="{DynamicResource MaterialDesignPaper}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

</Style>

</Window.Resources>

<Grid>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<materialDesign:Chip

Content="James Willock">

<materialDesign:Chip.Icon>

</materialDesign:Chip.Icon>

</materialDesign:Chip>

<materialDesign:Chip Content="Example Chip" />

<materialDesign:Chip Content="ANZ Bank" Icon="A" />

<materialDesign:Chip Content="ZNA Inc" Icon="Z" />

<materialDesign:Chip

IconBackground="{DynamicResource PrimaryHueDarkBrush}"

IconForeground="{DynamicResource PrimaryHueDarkForegroundBrush}"

Content="Twitter">

<materialDesign:Chip.Icon>

<materialDesign:PackIcon Kind="Twitter" />

</materialDesign:Chip.Icon>

</materialDesign:Chip>

</StackPanel>

<materialDesign:Chip

IsDeletable="True"

ToolTip="Just a tool tip"

DeleteToolTip="Your friendly neighbor delete button"

Content="James Willock"

Click="chip_Click"

DeleteClick="chip_DeleteClick">

<materialDesign:Chip.Icon>

</materialDesign:Chip.Icon>

</materialDesign:Chip>

<materialDesign:Chip

IsDeletable="True"

ToolTip="This is an example chip"

Content="Example Chip" />

<materialDesign:Chip

Icon="A"

IsDeletable="True"

Content="ANZ Bank" />

<materialDesign:Chip

IconBackground="{DynamicResource PrimaryHueLightBrush}"

IconForeground="{DynamicResource PrimaryHueLightForegroundBrush}"

Icon="Z"

IsDeletable="True"

Content="ZNA Inc" />

</StackPanel>

</Grid>

</Window>

▶ MainWindow.xaml.cs


using System.Windows;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

        /// <summary>
        /// 생성자
        /// </summary>
        public MainWindow()
        {
            InitializeComponent();
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region 칩 클릭시 처리하기 - chip_Click(sender, e)

        /// <summary>
        /// 칩 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void chip_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Chip Clicked!");
        }

        #endregion
        #region 칩 삭제 버튼 클릭시 처리하기 - chip_DeleteClick(sender, e)

        /// <summary>
        /// 칩 삭제 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void chip_DeleteClick(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Chip delete button Clicked!");
        }

        #endregion
    }
}

using System.Windows;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 칩 클릭시 처리하기 - chip_Click(sender, e)

/// <summary>

/// 칩 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void chip_Click(object sender, RoutedEventArgs e)

{

MessageBox.Show("Chip Clicked!");

}

#endregion

#region 칩 삭제 버튼 클릭시 처리하기 - chip_DeleteClick(sender, e)

/// <summary>

/// 칩 삭제 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void chip_DeleteClick(object sender, RoutedEventArgs e)

{

MessageBox.Show("Chip delete button Clicked!");

}

#endregion

}

TestProject.zip

[C#/WPF/MATERIAL DESIGN/.NET5] Flipper 엘리먼트 사용하기

■ Flipper 엘리먼트를 사용하는 방법을 보여준다. ▶ MainApplication.xaml


<Application x:Class="TestProject.MainApplication"
    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="Inherit"
                    PrimaryColor="DeepPurple"
                    SecondaryColor="Lime"
                    ColorAdjustment="{materialDesign:ColorAdjustment}" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

<Application x:Class="TestProject.MainApplication"

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

<materialDesign:BundledTheme

BaseTheme="Inherit"

PrimaryColor="DeepPurple"

SecondaryColor="Lime"

ColorAdjustment="{materialDesign:ColorAdjustment}" />

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Application.Resources>

</Application>

▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    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"
    Width="800"
    Height="600"
    Title="Flipper 엘리먼트 사용하기"
    Background="{DynamicResource MaterialDesignPaper}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml"  />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Flipper.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <materialDesign:Flipper
            Style="{StaticResource MaterialDesignCardFlipper}"
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <materialDesign:Flipper.FrontContent>
                <Button
                    Style="{StaticResource MaterialDesignFlatButton}"
                    Margin="10"
                    Width="200"
                    Command="{x:Static materialDesign:Flipper.FlipCommand}"
                    Content="RESIZING..." />
            </materialDesign:Flipper.FrontContent>
            <materialDesign:Flipper.BackContent>
                <Grid
                    Width="250"
                    Height="250">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*"    />
                    </Grid.RowDefinitions>
                    <materialDesign:ColorZone Grid.Row="0"
                        Mode="SecondaryMid"
                        Padding="5">
                        <StackPanel Orientation="Horizontal">
                            <Button
                                Style="{StaticResource MaterialDesignToolForegroundButton}"
                                HorizontalAlignment="Left"
                                Command="{x:Static materialDesign:Flipper.FlipCommand}">
                                <materialDesign:PackIcon
                                    HorizontalAlignment="Right"
                                    Kind="ArrowLeft" />
                            </Button>
                            <TextBlock
                                VerticalAlignment="Center"
                                Margin="10 0 0 0"
                                Text="EDIT USER" />
                        </StackPanel>
                    </materialDesign:ColorZone>
                    <Grid Grid.Row="1"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Top"
                        Margin="0 10 0 0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <TextBox Grid.Row="0"
                            Margin="0 10 0 0"
                            materialDesign:HintAssist.Hint="First name"
                            materialDesign:HintAssist.IsFloating="True"
                            Text="James" />
                        <TextBox Grid.Row="1"
                            Margin="0 10 0 0"
                            materialDesign:HintAssist.Hint="Last name"
                            materialDesign:HintAssist.IsFloating="True"
                            Text="Willock" />
                        <StackPanel Grid.Row="2"
                            Margin="0 10 0 0"
                            HorizontalAlignment="Right"
                            Orientation="Horizontal">
                            <TextBlock
                                VerticalAlignment="Center"
                                Text="Email Contact" />
                            <ToggleButton Margin="10 0 0 0" />
                        </StackPanel>
                        <StackPanel Grid.Row="3"
                            Margin="0 10 0 0"
                            HorizontalAlignment="Right"
                            Orientation="Horizontal">
                            <TextBlock
                                VerticalAlignment="Center"
                                Text="Telephone Contact" />
                            <ToggleButton Margin="10 0 0 0" />
                        </StackPanel>
                    </Grid>
                </Grid>
            </materialDesign:Flipper.BackContent>
        </materialDesign:Flipper>
    </Grid>
</Window>

100

101

102

103

<Window x:Class="TestProject.MainWindow"

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"

Width="800"

Height="600"

Title="Flipper 엘리먼트 사용하기"

Background="{DynamicResource MaterialDesignPaper}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

<ResourceDictionary.MergedDictionaries>

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Window.Resources>

<Grid>

<materialDesign:Flipper

Style="{StaticResource MaterialDesignCardFlipper}"

HorizontalAlignment="Center"

VerticalAlignment="Center">

<materialDesign:Flipper.FrontContent>

<Button

Style="{StaticResource MaterialDesignFlatButton}"

Margin="10"

Width="200"

Command="{x:Static materialDesign:Flipper.FlipCommand}"

Content="RESIZING..." />

</materialDesign:Flipper.FrontContent>

<materialDesign:Flipper.BackContent>

<Grid

Width="250"

Height="250">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<materialDesign:ColorZone Grid.Row="0"

Mode="SecondaryMid"

Padding="5">

<Button

Style="{StaticResource MaterialDesignToolForegroundButton}"

HorizontalAlignment="Left"

Command="{x:Static materialDesign:Flipper.FlipCommand}">

<materialDesign:PackIcon

HorizontalAlignment="Right"

Kind="ArrowLeft" />

</Button>

<TextBlock

VerticalAlignment="Center"

Margin="10 0 0 0"

Text="EDIT USER" />

</StackPanel>

</materialDesign:ColorZone>

<Grid Grid.Row="1"

HorizontalAlignment="Center"

VerticalAlignment="Top"

Margin="0 10 0 0">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<TextBox Grid.Row="0"

Margin="0 10 0 0"

materialDesign:HintAssist.Hint="First name"

materialDesign:HintAssist.IsFloating="True"

Text="James" />

<TextBox Grid.Row="1"

Margin="0 10 0 0"

materialDesign:HintAssist.Hint="Last name"

materialDesign:HintAssist.IsFloating="True"

Text="Willock" />

<StackPanel Grid.Row="2"

Margin="0 10 0 0"

HorizontalAlignment="Right"

Orientation="Horizontal">

<TextBlock

VerticalAlignment="Center"

Text="Email Contact" />

</StackPanel>

<StackPanel Grid.Row="3"

Margin="0 10 0 0"

HorizontalAlignment="Right"

Orientation="Horizontal">

<TextBlock

VerticalAlignment="Center"

Text="Telephone Contact" />

</StackPanel>

</Grid>

</materialDesign:Flipper.BackContent>

</materialDesign:Flipper>

</Grid>

</Window>

TestProject.zip

[C#/WPF/MATERIAL DESIGN/.NET5] Flipper 엘리먼트 사용하기

■ Flipper 엘리먼트를 사용하는 방법을 보여준다. ▶ MainApplication.xaml


<Application x:Class="TestProject.MainApplication"
    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="Inherit"
                    PrimaryColor="DeepPurple"
                    SecondaryColor="Lime"
                    ColorAdjustment="{materialDesign:ColorAdjustment}" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

<Application x:Class="TestProject.MainApplication"

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

<materialDesign:BundledTheme

BaseTheme="Inherit"

PrimaryColor="DeepPurple"

SecondaryColor="Lime"

ColorAdjustment="{materialDesign:ColorAdjustment}" />

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Application.Resources>

</Application>

▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    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"
    Width="800"
    Height="600"
    Title="Flipper 엘리먼트 사용하기"
    Background="{DynamicResource MaterialDesignPaper}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml"  />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Flipper.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <materialDesign:Flipper
            Style="{StaticResource MaterialDesignCardFlipper}"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            materialDesign:ShadowAssist.ShadowDepth="Depth0">
            <materialDesign:Flipper.FrontContent>
                <Grid
                    Width="250"
                    Height="250">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="150" />
                        <RowDefinition Height="*"   />
                    </Grid.RowDefinitions>
                    <materialDesign:ColorZone Grid.Row="0"
                        VerticalAlignment="Stretch"
                        Mode="PrimaryLight">
                        <materialDesign:PackIcon
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            Width="128"
                            Height="128"
                            Kind="AccountCircle" />
                    </materialDesign:ColorZone>
                    <StackPanel Grid.Row="1"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center">
                        <TextBlock Text="James Willock" />
                        <Button
                            Style="{StaticResource MaterialDesignFlatButton}"
                            Margin="0 5 0 0"
                            Command="{x:Static materialDesign:Flipper.FlipCommand}"
                            Content="EDIT" />
                    </StackPanel>
                </Grid>
            </materialDesign:Flipper.FrontContent>
            <materialDesign:Flipper.BackContent>
                <Grid
                    Width="250"
                    Height="250">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*"    />
                    </Grid.RowDefinitions>
                    <materialDesign:ColorZone Grid.Row="0"
                        Mode="SecondaryMid"
                        Padding="5">
                        <StackPanel Orientation="Horizontal">
                            <Button
                                Style="{StaticResource MaterialDesignToolForegroundButton}"
                                HorizontalAlignment="Left"
                                Command="{x:Static materialDesign:Flipper.FlipCommand}">
                                <materialDesign:PackIcon
                                    HorizontalAlignment="Right"
                                    Kind="ArrowLeft" />
                            </Button>
                            <TextBlock
                                VerticalAlignment="Center"
                                Margin="10 0 0 0"
                                Text="EDIT USER" />
                        </StackPanel>
                    </materialDesign:ColorZone>
                    <Grid Grid.Row="1"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Top"
                        Margin="0 10 0 0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <TextBox Grid.Row="0"
                            Margin="0 10 0 0"
                            materialDesign:HintAssist.Hint="First name"
                            materialDesign:HintAssist.IsFloating="True"
                            Text="James" />
                        <TextBox Grid.Row="1"
                            Margin="0 10 0 0"
                            materialDesign:HintAssist.Hint="Last name"
                            materialDesign:HintAssist.IsFloating="True"
                            Text="Willock" />
                        <StackPanel Grid.Row="2"
                            Margin="0 10 0 0"
                            HorizontalAlignment="Right"
                            Orientation="Horizontal">
                            <TextBlock
                                VerticalAlignment="Center"
                                Text="Email Contact" />
                            <ToggleButton Margin="10 0 0 0" />
                        </StackPanel>
                        <StackPanel Grid.Row="3"
                            Margin="0 10 0 0"
                            HorizontalAlignment="Right"
                            Orientation="Horizontal">
                            <TextBlock
                                VerticalAlignment="Center"
                                Text="Telephone Contact" />
                            <ToggleButton Margin="10 0 0 0" />
                        </StackPanel>
                    </Grid>
                </Grid>
            </materialDesign:Flipper.BackContent>
        </materialDesign:Flipper>
    </Grid>
</Window>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

<Window x:Class="TestProject.MainWindow"

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"

Width="800"

Height="600"

Title="Flipper 엘리먼트 사용하기"

Background="{DynamicResource MaterialDesignPaper}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

<ResourceDictionary.MergedDictionaries>

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Window.Resources>

<Grid>

<materialDesign:Flipper

Style="{StaticResource MaterialDesignCardFlipper}"

HorizontalAlignment="Center"

VerticalAlignment="Center"

materialDesign:ShadowAssist.ShadowDepth="Depth0">

<materialDesign:Flipper.FrontContent>

<Grid

Width="250"

Height="250">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<materialDesign:ColorZone Grid.Row="0"

VerticalAlignment="Stretch"

Mode="PrimaryLight">

<materialDesign:PackIcon

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="128"

Height="128"

Kind="AccountCircle" />

</materialDesign:ColorZone>

<StackPanel Grid.Row="1"

HorizontalAlignment="Center"

VerticalAlignment="Center">

<Button

Style="{StaticResource MaterialDesignFlatButton}"

Margin="0 5 0 0"

Command="{x:Static materialDesign:Flipper.FlipCommand}"

Content="EDIT" />

</StackPanel>

</Grid>

</materialDesign:Flipper.FrontContent>

<materialDesign:Flipper.BackContent>

<Grid

Width="250"

Height="250">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<materialDesign:ColorZone Grid.Row="0"

Mode="SecondaryMid"

Padding="5">

<Button

Style="{StaticResource MaterialDesignToolForegroundButton}"

HorizontalAlignment="Left"

Command="{x:Static materialDesign:Flipper.FlipCommand}">

<materialDesign:PackIcon

HorizontalAlignment="Right"

Kind="ArrowLeft" />

</Button>

<TextBlock

VerticalAlignment="Center"

Margin="10 0 0 0"

Text="EDIT USER" />

</StackPanel>

</materialDesign:ColorZone>

<Grid Grid.Row="1"

HorizontalAlignment="Center"

VerticalAlignment="Top"

Margin="0 10 0 0">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<TextBox Grid.Row="0"

Margin="0 10 0 0"

materialDesign:HintAssist.Hint="First name"

materialDesign:HintAssist.IsFloating="True"

Text="James" />

<TextBox Grid.Row="1"

Margin="0 10 0 0"

materialDesign:HintAssist.Hint="Last name"

materialDesign:HintAssist.IsFloating="True"

Text="Willock" />

<StackPanel Grid.Row="2"

Margin="0 10 0 0"

HorizontalAlignment="Right"

Orientation="Horizontal">

<TextBlock

VerticalAlignment="Center"

Text="Email Contact" />

</StackPanel>

<StackPanel Grid.Row="3"

Margin="0 10 0 0"

HorizontalAlignment="Right"

Orientation="Horizontal">

<TextBlock

VerticalAlignment="Center"

Text="Telephone Contact" />

</StackPanel>

</Grid>

</materialDesign:Flipper.BackContent>

</materialDesign:Flipper>

</Grid>

</Window>

TestProject.zip

[C#/WPF/MATERIAL DESIGN/.NET5] Flipper 엘리먼트 사용하기

■ Flipper 엘리먼트를 사용하는 방법을 보여준다. ▶ MainApplication.xaml


<Application x:Class="TestProject.MainApplication"
    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="Inherit"
                    PrimaryColor="DeepPurple"
                    SecondaryColor="Lime"
                    ColorAdjustment="{materialDesign:ColorAdjustment}" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

<Application x:Class="TestProject.MainApplication"

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

<materialDesign:BundledTheme

BaseTheme="Inherit"

PrimaryColor="DeepPurple"

SecondaryColor="Lime"

ColorAdjustment="{materialDesign:ColorAdjustment}" />

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Application.Resources>

</Application>

▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    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"
    Width="800"
    Height="600"
    Title="Flipper 엘리먼트 사용하기"
    Background="{DynamicResource MaterialDesignPaper}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml"  />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Flipper.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <materialDesign:Flipper
            Style="{StaticResource MaterialDesignCardFlipper}"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            IsFlippedChanged="flipper_IsFlippedChanged">
            <materialDesign:Flipper.FrontContent>
                <Button
                    Style="{StaticResource MaterialDesignFlatButton}"
                    Margin="5"
                    Width="180"
                    Command="{x:Static materialDesign:Flipper.FlipCommand}"
                    FontSize="16"
                    FontWeight="Bold"
                    Content="FLIPPABLZ!" />
            </materialDesign:Flipper.FrontContent>
            <materialDesign:Flipper.BackContent>
                <Button
                    Style="{StaticResource MaterialDesignFlatButton}"
                    Margin="5"
                    Width="180"
                    Command="{x:Static materialDesign:Flipper.FlipCommand}"
                    FontSize="16"
                    FontWeight="Bold"
                    Content="GO BACK" />
            </materialDesign:Flipper.BackContent>
        </materialDesign:Flipper>
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

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"

Width="800"

Height="600"

Title="Flipper 엘리먼트 사용하기"

Background="{DynamicResource MaterialDesignPaper}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

<ResourceDictionary.MergedDictionaries>

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Window.Resources>

<Grid>

<materialDesign:Flipper

Style="{StaticResource MaterialDesignCardFlipper}"

HorizontalAlignment="Center"

VerticalAlignment="Center"

IsFlippedChanged="flipper_IsFlippedChanged">

<materialDesign:Flipper.FrontContent>

<Button

Style="{StaticResource MaterialDesignFlatButton}"

Margin="5"

Width="180"

Command="{x:Static materialDesign:Flipper.FlipCommand}"

FontSize="16"

FontWeight="Bold"

Content="FLIPPABLZ!" />

</materialDesign:Flipper.FrontContent>

<materialDesign:Flipper.BackContent>

<Button

Style="{StaticResource MaterialDesignFlatButton}"

Margin="5"

Width="180"

Command="{x:Static materialDesign:Flipper.FlipCommand}"

FontSize="16"

FontWeight="Bold"

Content="GO BACK" />

</materialDesign:Flipper.BackContent>

</materialDesign:Flipper>

</Grid>

</Window>

TestProject.zip

[C#/WPF/MATERIAL DESIGN/.NET5] Card 엘리먼트 사용하기

■ Card 엘리먼트를 사용하는 방법을 보여준다. ▶ MainApplication.xaml


<Application x:Class="TestProject.MainApplication"
    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="Inherit"
                    PrimaryColor="DeepPurple"
                    SecondaryColor="Lime"
                    ColorAdjustment="{materialDesign:ColorAdjustment}" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

<Application x:Class="TestProject.MainApplication"

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

<materialDesign:BundledTheme

BaseTheme="Inherit"

PrimaryColor="DeepPurple"

SecondaryColor="Lime"

ColorAdjustment="{materialDesign:ColorAdjustment}" />

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Application.Resources>

</Application>

▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    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"
    Width="800"
    Height="600"
    Title="Card 엘리먼트 사용하기"
    Background="{DynamicResource MaterialDesignPaper}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml"   />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Card.xaml"     />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.CheckBox.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <materialDesign:Card
            VerticalAlignment="Center"
            Width="200"
            Background="{DynamicResource PrimaryHueDarkBrush}"
            Foreground="{DynamicResource PrimaryHueDarkForegroundBrush}"
            Padding="10">
            <StackPanel>
                <TextBlock
                    Margin="15 15 10 10"
                    FontSize="16"
                    Text="Notes" />
                <CheckBox
                    Style="{StaticResource MaterialDesignUserForegroundCheckBox}"
                    Margin="15 5 15 0"
                    Content="Do something good" />
                <CheckBox
                    Style="{StaticResource MaterialDesignUserForegroundCheckBox}"
                    Margin="15 5 15 0"
                    Content="Take a breather" />
                <CheckBox
                    Style="{StaticResource MaterialDesignUserForegroundCheckBox}"
                    Margin="15 5 15 0"
                    Content="And go create" />
                <RadioButton
                    Style="{DynamicResource MaterialDesignUserForegroundRadioButton}"
                    Margin="15 5 15 0"
                    Content="This?" />
                <RadioButton
                    Style="{DynamicResource MaterialDesignUserForegroundRadioButton}"
                    Margin="15 5 15 0"
                    Content="Or This?" />
                <Separator Style="{StaticResource MaterialDesignLightSeparator}" />
                <StackPanel
                    HorizontalAlignment="Right"
                    Margin="10 0 10 10"
                    Orientation="Horizontal">
                    <Button
                        Style="{StaticResource MaterialDesignToolForegroundButton}"
                        HorizontalAlignment="Right"
                        Width="30"
                        Padding="2 0 0 0"
                        materialDesign:RippleAssist.IsCentered="True">
                        <materialDesign:PackIcon Kind="CheckAll" />
                    </Button>
                </StackPanel>
            </StackPanel>
        </materialDesign:Card>
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

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"

Width="800"

Height="600"

Title="Card 엘리먼트 사용하기"

Background="{DynamicResource MaterialDesignPaper}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

<ResourceDictionary.MergedDictionaries>

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Window.Resources>

<Grid>

<materialDesign:Card

VerticalAlignment="Center"

Width="200"

Background="{DynamicResource PrimaryHueDarkBrush}"

Foreground="{DynamicResource PrimaryHueDarkForegroundBrush}"

Padding="10">

<TextBlock

Margin="15 15 10 10"

FontSize="16"

Text="Notes" />

<CheckBox

Style="{StaticResource MaterialDesignUserForegroundCheckBox}"

Margin="15 5 15 0"

Content="Do something good" />

<CheckBox

Style="{StaticResource MaterialDesignUserForegroundCheckBox}"

Margin="15 5 15 0"

Content="Take a breather" />

<CheckBox

Style="{StaticResource MaterialDesignUserForegroundCheckBox}"

Margin="15 5 15 0"

Content="And go create" />

<RadioButton

Style="{DynamicResource MaterialDesignUserForegroundRadioButton}"

Margin="15 5 15 0"

Content="This?" />

<RadioButton

Style="{DynamicResource MaterialDesignUserForegroundRadioButton}"

Margin="15 5 15 0"

Content="Or This?" />

<StackPanel

HorizontalAlignment="Right"

Margin="10 0 10 10"

Orientation="Horizontal">

<Button

Style="{StaticResource MaterialDesignToolForegroundButton}"

HorizontalAlignment="Right"

Width="30"

Padding="2 0 0 0"

materialDesign:RippleAssist.IsCentered="True">

<materialDesign:PackIcon Kind="CheckAll" />

</Button>

</StackPanel>

</materialDesign:Card>

</Grid>

</Window>

TestProject.zip

[C#/WPF/MATERIAL DESIGN/.NET5] Card 엘리먼트 사용하기

■ Card 엘리먼트를 사용하는 방법을 보여준다. ▶ MainApplication.xaml


<Application x:Class="TestProject.MainApplication"
    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="Inherit"
                    PrimaryColor="DeepPurple"
                    SecondaryColor="Lime"
                    ColorAdjustment="{materialDesign:ColorAdjustment}" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

<Application x:Class="TestProject.MainApplication"

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

<materialDesign:BundledTheme

BaseTheme="Inherit"

PrimaryColor="DeepPurple"

SecondaryColor="Lime"

ColorAdjustment="{materialDesign:ColorAdjustment}" />

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Application.Resources>

</Application>

▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    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"
    Width="800"
    Height="600"
    Title="Card 엘리먼트 사용하기"
    Background="{DynamicResource MaterialDesignPaper}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Card.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <StackPanel
            VerticalAlignment="Center">
            <materialDesign:Card
                Margin="10"
                Width="200"
                Background="{DynamicResource PrimaryHueLightBrush}"
                Foreground="{DynamicResource PrimaryHueLightForegroundBrush}"
                Padding="10">
                <TextBlock Text="Boring Text" />
            </materialDesign:Card>
            <materialDesign:Card
                Margin="10"
                Width="200"
                UniformCornerRadius="10"
                Background="{DynamicResource PrimaryHueDarkBrush}"
                Foreground="{DynamicResource PrimaryHueDarkForegroundBrush}"
                Padding="10">
                <TextBlock
                    TextWrapping="Wrap"
                    Text="You can adjust the corner radius" />
            </materialDesign:Card>
        </StackPanel>
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

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"

Width="800"

Height="600"

Title="Card 엘리먼트 사용하기"

Background="{DynamicResource MaterialDesignPaper}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

<ResourceDictionary.MergedDictionaries>

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Window.Resources>

<Grid>

<StackPanel

VerticalAlignment="Center">

<materialDesign:Card

Margin="10"

Width="200"

Background="{DynamicResource PrimaryHueLightBrush}"

Foreground="{DynamicResource PrimaryHueLightForegroundBrush}"

Padding="10">

</materialDesign:Card>

<materialDesign:Card

Margin="10"

Width="200"

UniformCornerRadius="10"

Background="{DynamicResource PrimaryHueDarkBrush}"

Foreground="{DynamicResource PrimaryHueDarkForegroundBrush}"

Padding="10">

<TextBlock

TextWrapping="Wrap"

Text="You can adjust the corner radius" />

</materialDesign:Card>

</StackPanel>

</Grid>

</Window>

TestProject.zip

[C#/WPF/MATERIAL DESIGN/.NET5] Card 엘리먼트 사용하기

■ Card 엘리먼트를 사용하는 방법을 보여준다. ▶ MainApplication.xaml


<Application x:Class="TestProject.MainApplication"
    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="Inherit"
                    PrimaryColor="DeepPurple"
                    SecondaryColor="Lime"
                    ColorAdjustment="{materialDesign:ColorAdjustment}" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

<Application x:Class="TestProject.MainApplication"

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

<materialDesign:BundledTheme

BaseTheme="Inherit"

PrimaryColor="DeepPurple"

SecondaryColor="Lime"

ColorAdjustment="{materialDesign:ColorAdjustment}" />

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Application.Resources>

</Application>

▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    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"
    Width="800"
    Height="600"
    Title="Card 엘리먼트 사용하기"
    Background="{DynamicResource MaterialDesignPaper}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml"   />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Card.xaml"     />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Popupbox.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <materialDesign:Card
            VerticalAlignment="Center"
            Width="200"
            Background="#03a9f4"
            Foreground="{DynamicResource PrimaryHueDarkForegroundBrush}"
            Padding="0">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="0"
                    Style="{StaticResource MaterialDesignHeadline5TextBlock}"
                    Margin="15 15 15 5"
                    Text="Call Jennifer" />
                <Separator Grid.Row="1"
                    Style="{StaticResource MaterialDesignLightSeparator}" />
                <TextBlock Grid.Row="2"
                    Style="{StaticResource MaterialDesignBody2TextBlock}"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Center"
                    Margin="15 0 15 10"
                    Text="March 19, 2016" />
                <StackPanel Grid.Row="2"
                    HorizontalAlignment="Right"
                    Margin="15 0 15 10"
                    Orientation="Horizontal">
                    <Button
                        Style="{StaticResource MaterialDesignToolForegroundButton}"
                        HorizontalAlignment="Right"
                        Width="30"
                        materialDesign:RippleAssist.IsCentered="True">
                        <materialDesign:PackIcon Kind="Phone" />
                    </Button>
                    <materialDesign:PopupBox
                        Style="{StaticResource MaterialDesignToolForegroundPopupBox}"
                        HorizontalAlignment="Right">
                        <StackPanel>
                            <Button Content="More"    />
                            <Button Content="Options" />
                        </StackPanel>
                    </materialDesign:PopupBox>
                </StackPanel>
            </Grid>
        </materialDesign:Card>
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

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"

Width="800"

Height="600"

Title="Card 엘리먼트 사용하기"

Background="{DynamicResource MaterialDesignPaper}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

<ResourceDictionary.MergedDictionaries>

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Window.Resources>

<Grid>

<materialDesign:Card

VerticalAlignment="Center"

Width="200"

Background="#03a9f4"

Foreground="{DynamicResource PrimaryHueDarkForegroundBrush}"

Padding="0">

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<TextBlock Grid.Row="0"

Style="{StaticResource MaterialDesignHeadline5TextBlock}"

Margin="15 15 15 5"

Text="Call Jennifer" />

<Separator Grid.Row="1"

Style="{StaticResource MaterialDesignLightSeparator}" />

<TextBlock Grid.Row="2"

Style="{StaticResource MaterialDesignBody2TextBlock}"

HorizontalAlignment="Left"

VerticalAlignment="Center"

Margin="15 0 15 10"

Text="March 19, 2016" />

<StackPanel Grid.Row="2"

HorizontalAlignment="Right"

Margin="15 0 15 10"

Orientation="Horizontal">

<Button

Style="{StaticResource MaterialDesignToolForegroundButton}"

HorizontalAlignment="Right"

Width="30"

materialDesign:RippleAssist.IsCentered="True">

<materialDesign:PackIcon Kind="Phone" />

</Button>

<materialDesign:PopupBox

Style="{StaticResource MaterialDesignToolForegroundPopupBox}"

HorizontalAlignment="Right">

</StackPanel>

</materialDesign:PopupBox>

</StackPanel>

</Grid>

</materialDesign:Card>

</Grid>

</Window>

TestProject.zip

[C#/WPF/MATERIAL DESIGN/.NET5] RatingBar 엘리먼트 사용하기

■ RatingBar 엘리먼트를 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<materialDesign:RatingBar
    HorizontalAlignment="Center"
    VerticalAlignment="Center"
    Foreground="Orange"
    Value="3" />

<materialDesign:RatingBar

HorizontalAlignment="Center"

VerticalAlignment="Center"

Foreground="Orange"

Value="3" />

※ xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"

[C#/WPF/MATERIAL DESIGN/.NET5] Card 엘리먼트 사용하기

■ Card 엘리먼트를 사용하는 방법을 보여준다. ▶ MainApplication.xaml


<Application x:Class="TestProject.MainApplication"
    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="Inherit"
                    PrimaryColor="DeepPurple"
                    SecondaryColor="Lime"
                    ColorAdjustment="{materialDesign:ColorAdjustment}" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

<Application x:Class="TestProject.MainApplication"

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

<materialDesign:BundledTheme

BaseTheme="Inherit"

PrimaryColor="DeepPurple"

SecondaryColor="Lime"

ColorAdjustment="{materialDesign:ColorAdjustment}" />

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Application.Resources>

</Application>

▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    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"
    Width="800"
    Height="600"
    Title="Card 엘리먼트 사용하기"
    Background="{DynamicResource MaterialDesignPaper}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Card.xaml"   />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <materialDesign:Card
            VerticalAlignment="Center"
            Width="240">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="140"  />
                    <RowDefinition Height="*"    />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Image Grid.Row="0"
                    Height="140"
                    Stretch="UniformToFill"
                    Source="IMAGE/sample.png" />
                <Button Grid.Row="0"
                    Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Bottom"
                    Margin="0 0 15 -20">
                    <materialDesign:PackIcon Kind="ShareVariant" />
                </Button>
                <StackPanel Grid.Row="1"
                    Margin="10 25 10 10" >
                    <TextBlock Style="{StaticResource MaterialDesignSubtitle1TextBlock}"
                        Margin="0"
                        Text="E.T. the Extra-Terrestrial" />
                    <Viewbox
                        HorizontalAlignment="Left"
                        Margin="0 5 0 10"
                        Height="15">
                        <materialDesign:RatingBar
                            Margin="0"
                            Orientation="Horizontal"
                            Foreground="Gold"
                            Value="3" />
                    </Viewbox>
                    <TextBlock
                        Style="{StaticResource MaterialDesignBody1TextBlock}"
                        VerticalAlignment="Center"
                        TextWrapping="Wrap"
                        Text="After a gentle alien becomes stranded on Earth, the being is discovered and befriended by a young boy named Elliott." />
                </StackPanel>
                <Separator Grid.Row="2"
                    Style="{StaticResource MaterialDesignDarkSeparator}"
                    Margin="10 0 10 0" />
                <TextBlock Grid.Row="3"
                    Style="{StaticResource MaterialDesignBody2TextBlock}"
                    Margin="10 5 10 5"
                    Text="Tonight's availability" />
                <Grid Grid.Row="4">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*"    />
                    </Grid.ColumnDefinitions>
                    <materialDesign:PackIcon Grid.Column="0"
                        VerticalAlignment="Center"
                        Margin="10 5 5 5"
                        Kind="Clock" />
                    <ListBox Grid.Column="1"
                        Style="{StaticResource MaterialDesignToolToggleFlatListBox}"
                        Margin="5 10 10 5"
                        SelectedIndex="0">
                        <ListBox.Resources>
                            <Style
                                BasedOn="{StaticResource MaterialDesignToolToggleListBoxItem}"
                                TargetType="{x:Type ListBoxItem}">
                                <Setter Property="Padding" Value="5 5 5 5" />
                            </Style>
                        </ListBox.Resources>
                        <ListBox.ToolTip>
                            <StackPanel>
                                <TextBlock Text="MaterialDesignFlatToggleListBox" />
                                <TextBlock Text="Exclusive selection" />
                                <TextBlock Text="ListBoxAssist.IsToggle allows more natural toggle behaviour" />
                            </StackPanel>
                        </ListBox.ToolTip>
                        <ListBoxItem>
                            <TextBlock Text="18:00" />
                        </ListBoxItem>
                        <ListBoxItem>
                            <TextBlock Text="19:00" />
                        </ListBoxItem>
                        <ListBoxItem>
                            <TextBlock Text="22:00" />
                        </ListBoxItem>
                    </ListBox>
                </Grid>
                <StackPanel Grid.Row="5">
                    <Button
                        Style="{StaticResource MaterialDesignFlatButton}"
                        HorizontalAlignment="Left"
                        Margin="10 5 10 10"
                        Content="RESERVE" />
                </StackPanel>
            </Grid>
        </materialDesign:Card>
    </Grid>
</Window>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

<Window x:Class="TestProject.MainWindow"

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"

Width="800"

Height="600"

Title="Card 엘리먼트 사용하기"

Background="{DynamicResource MaterialDesignPaper}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

<ResourceDictionary.MergedDictionaries>

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Window.Resources>

<Grid>

<materialDesign:Card

VerticalAlignment="Center"

Width="240">

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Image Grid.Row="0"

Height="140"

Stretch="UniformToFill"

Source="IMAGE/sample.png" />

<Button Grid.Row="0"

Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}"

HorizontalAlignment="Right"

VerticalAlignment="Bottom"

Margin="0 0 15 -20">

<materialDesign:PackIcon Kind="ShareVariant" />

</Button>

<StackPanel Grid.Row="1"

Margin="10 25 10 10" >

<TextBlock Style="{StaticResource MaterialDesignSubtitle1TextBlock}"

Margin="0"

Text="E.T. the Extra-Terrestrial" />

<Viewbox

HorizontalAlignment="Left"

Margin="0 5 0 10"

Height="15">

<materialDesign:RatingBar

Margin="0"

Orientation="Horizontal"

Foreground="Gold"

Value="3" />

</Viewbox>

<TextBlock

Style="{StaticResource MaterialDesignBody1TextBlock}"

VerticalAlignment="Center"

TextWrapping="Wrap"

Text="After a gentle alien becomes stranded on Earth, the being is discovered and befriended by a young boy named Elliott." />

</StackPanel>

<Separator Grid.Row="2"

Style="{StaticResource MaterialDesignDarkSeparator}"

Margin="10 0 10 0" />

<TextBlock Grid.Row="3"

Style="{StaticResource MaterialDesignBody2TextBlock}"

Margin="10 5 10 5"

Text="Tonight's availability" />

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<materialDesign:PackIcon Grid.Column="0"

VerticalAlignment="Center"

Margin="10 5 5 5"

Kind="Clock" />

<ListBox Grid.Column="1"

Style="{StaticResource MaterialDesignToolToggleFlatListBox}"

Margin="5 10 10 5"

SelectedIndex="0">

<ListBox.Resources>

<Style

BasedOn="{StaticResource MaterialDesignToolToggleListBoxItem}"

TargetType="{x:Type ListBoxItem}">

</Style>

</ListBox.Resources>

<ListBox.ToolTip>

</StackPanel>

</ListBox.ToolTip>

</ListBoxItem>

</ListBoxItem>

</ListBoxItem>

</ListBox>

</Grid>

<Button

Style="{StaticResource MaterialDesignFlatButton}"

HorizontalAlignment="Left"

Margin="10 5 10 10"

Content="RESERVE" />

</StackPanel>

</Grid>

</materialDesign:Card>

</Grid>

</Window>

TestProject.zip

[C#/WPF/MATERIAL DESIGN/.NET5] Card 엘리먼트 사용하기

■ Card 엘리먼트를 사용하는 방법을 보여준다. ▶ MainApplication.xaml


<Application x:Class="TestProject.MainApplication"
    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="Inherit"
                    PrimaryColor="DeepPurple"
                    SecondaryColor="Lime"
                    ColorAdjustment="{materialDesign:ColorAdjustment}" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

<Application x:Class="TestProject.MainApplication"

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

<materialDesign:BundledTheme

BaseTheme="Inherit"

PrimaryColor="DeepPurple"

SecondaryColor="Lime"

ColorAdjustment="{materialDesign:ColorAdjustment}" />

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Application.Resources>

</Application>

▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    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"
    Width="800"
    Height="600"
    Title="Card 엘리먼트 사용하기"
    Background="{DynamicResource MaterialDesignPaper}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Button.xaml"   />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Card.xaml"     />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Popupbox.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <materialDesign:Card
            VerticalAlignment="Center"
            Width="200">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Image Grid.Row="0"
                    Width="200"
                    Source="IMAGE/sample.jpg" />
                <Button Grid.Row="0"
                    Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Bottom"
                    Margin="0 0 16 -20">
                    <materialDesign:PackIcon Kind="Bike" />
                </Button>
                <StackPanel Grid.Row="1"
                    Margin="10 25 10 0" >
                    <TextBlock FontWeight="Bold">Cycling</TextBlock>
                    <TextBlock
                        TextWrapping="Wrap"
                        VerticalAlignment="Center"
                        Text="A great way to keep fit and forget about the constant grind of IT." />
                </StackPanel>
                <StackPanel Grid.Row="2"
                    HorizontalAlignment="Right"
                    Margin="10"
                    Orientation="Horizontal">
                    <Button
                        Style="{StaticResource MaterialDesignToolButton}"
                        Width="30"
                        Padding="2 0 2 0"
                        materialDesign:RippleAssist.IsCentered="True">
                        <materialDesign:PackIcon Kind="ShareVariant" />
                    </Button>
                    <Button
                        Style="{StaticResource MaterialDesignToolButton}"
                        Width="30"
                        Padding="2 0 2 0"
                        materialDesign:RippleAssist.IsCentered="True">
                        <materialDesign:PackIcon Kind="Heart" />
                    </Button>
                    <materialDesign:PopupBox
                        Style="{StaticResource MaterialDesignToolPopupBox}"
                        Padding="2 0 2 0">
                        <StackPanel>
                            <Button Content="More"    />
                            <Button Content="Options" />
                        </StackPanel>
                    </materialDesign:PopupBox>
                </StackPanel>
            </Grid>
        </materialDesign:Card>
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

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"

Width="800"

Height="600"

Title="Card 엘리먼트 사용하기"

Background="{DynamicResource MaterialDesignPaper}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

<ResourceDictionary.MergedDictionaries>

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Window.Resources>

<Grid>

<materialDesign:Card

VerticalAlignment="Center"

Width="200">

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Image Grid.Row="0"

Width="200"

Source="IMAGE/sample.jpg" />

<Button Grid.Row="0"

Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}"

HorizontalAlignment="Right"

VerticalAlignment="Bottom"

Margin="0 0 16 -20">

<materialDesign:PackIcon Kind="Bike" />

</Button>

<StackPanel Grid.Row="1"

Margin="10 25 10 0" >

<TextBlock FontWeight="Bold">Cycling</TextBlock>

<TextBlock

TextWrapping="Wrap"

VerticalAlignment="Center"

Text="A great way to keep fit and forget about the constant grind of IT." />

</StackPanel>

<StackPanel Grid.Row="2"

HorizontalAlignment="Right"

Margin="10"

Orientation="Horizontal">

<Button

Style="{StaticResource MaterialDesignToolButton}"

Width="30"

Padding="2 0 2 0"

materialDesign:RippleAssist.IsCentered="True">

<materialDesign:PackIcon Kind="ShareVariant" />

</Button>

<Button

Style="{StaticResource MaterialDesignToolButton}"

Width="30"

Padding="2 0 2 0"

materialDesign:RippleAssist.IsCentered="True">

<materialDesign:PackIcon Kind="Heart" />

</Button>

<materialDesign:PopupBox

Style="{StaticResource MaterialDesignToolPopupBox}"

Padding="2 0 2 0">

</StackPanel>

</materialDesign:PopupBox>

</StackPanel>

</Grid>

</materialDesign:Card>

</Grid>

</Window>

TestProject.zip

[C#/WPF/MATERIAL DESIGN/.NET5] PackIcon 엘리먼트 사용하기

■ PackIcon 엘리먼트를 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Button
    Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}"
    HorizontalAlignment="Center"
    VerticalAlignment="Center">
    <materialDesign:PackIcon Kind="Bike" />
</Button>

<Button

Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}"

HorizontalAlignment="Center"

VerticalAlignment="Center">

<materialDesign:PackIcon Kind="Bike" />

</Button>

※ xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"

[C#/WPF/MATERIAL DESIGN/.NET5] PackIcon 엘리먼트 사용하기

■ PackIcon 엘리먼트를 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<materialDesign:PackIcon Kind="Bike" />

<materialDesign:PackIcon Kind="ShareVariant" />

<materialDesign:PackIcon Kind="Heart" />

<materialDesign:PackIcon Kind="Bike" />

<materialDesign:PackIcon Kind="ShareVariant" />

<materialDesign:PackIcon Kind="Heart" />

※ xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"

[C#/WPF/MATERIAL DESIGN/.NET5] PopupBox 엘리먼트 사용하기

■ PopupBox 엘리먼트를 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Card.xaml"     />
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

...

<materialDesign:PopupBox
    Style="{StaticResource MaterialDesignToolPopupBox}"
    HorizontalAlignment="Center"
    VerticalAlignment="Center">
    <StackPanel>
        <Button Content="More"    />
        <Button Content="Options" />
    </StackPanel>
</materialDesign:PopupBox>

<ResourceDictionary.MergedDictionaries>

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

...

<materialDesign:PopupBox

Style="{StaticResource MaterialDesignToolPopupBox}"

HorizontalAlignment="Center"

VerticalAlignment="Center">

</StackPanel>

</materialDesign:PopupBox>

※ xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"

[C#/WPF/MATERIAL DESIGN/.NET5] MaterialDesignThemes 누겟 설치하기

■ MaterialDesignThemes 누겟을 설치하는 방법을 보여준다. 1. Visual Studio를 실행한다. 2. [도구] / [NuGet 패키지 관리자] / [패키지 관리자 콘솔] 메뉴를 실행한다.

[C#/WPF/MATERIAL DESIGN/.NET5] Button 클래스 : 머터리얼 디자인(Material Design) 사용하기

■ Button 클래스에서 머터리얼 디자인(Material Design)을 사용하는 방법을 보여준다. ▶ DelegateCommand.cs


using System;
using System.Windows.Input;

namespace TestProject
{
    /// <summary>
    /// 대리자 명령
    /// </summary>
    public class DelegateCommand : ICommand
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Event
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 실행 가능 여부 변경시 이벤트 - CanExecuteChanged

        /// <summary>
        /// 실행 가능 여부 변경시 이벤트
        /// </summary>
        public event EventHandler CanExecuteChanged
        {
            add
            {
                CommandManager.RequerySuggested += value;
            }
            remove
            {
                CommandManager.RequerySuggested -= value;
            }
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 실행 액션
        /// </summary>
        private readonly Action<object> executeAction;

        /// <summary>
        /// 실행 가능 여부 함수
        /// </summary>
        private readonly Func<object, bool> canExecuteFunction;

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - DelegateCommand(executeAction, canExecuteFunction)

        /// <summary>
        /// 생성자
        /// </summary>
        /// <param name="executeAction">실행 액션</param>
        /// <param name="canExecuteFunction">실행 가능 여부 함수</param>
        public DelegateCommand(Action<object> executeAction, Func<object, bool> canExecuteFunction)
        {
            if(executeAction is null)
            {
                throw new ArgumentNullException(nameof(executeAction));
            }

            this.executeAction      = executeAction;
            this.canExecuteFunction = canExecuteFunction ?? (x => true);
        }

        #endregion
        #region 생성자 - DelegateCommand(executeAction)

        /// <summary>
        /// 생성자
        /// </summary>
        /// <param name="executeAction">실행 액션</param>
        public DelegateCommand(Action<object> executeAction) : this(executeAction, null)
        {
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 실행 가능 여부 구하기 - CanExecute(parameter)

        /// <summary>
        /// 실행 가능 여부 구하기
        /// </summary>
        /// <param name="parameter">매개 변수</param>
        /// <returns>실행 가능 여부</returns>
        public bool CanExecute(object parameter) => this.canExecuteFunction(parameter);

        #endregion
        #region 실행하기 - Execute(parameter)

        /// <summary>
        /// 실행하기
        /// </summary>
        /// <param name="parameter">매개 변수</param>
        public void Execute(object parameter) => this.executeAction(parameter);

        #endregion
        #region 갱신하기 - Refresh()

        /// <summary>
        /// 갱신하기
        /// </summary>
        public void Refresh() => CommandManager.InvalidateRequerySuggested();

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

using System;

using System.Windows.Input;

namespace TestProject

{

/// <summary>

/// 대리자 명령

/// </summary>

public class DelegateCommand : ICommand

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Event

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 실행 가능 여부 변경시 이벤트 - CanExecuteChanged

/// <summary>

/// 실행 가능 여부 변경시 이벤트

/// </summary>

public event EventHandler CanExecuteChanged

{

add

{

CommandManager.RequerySuggested += value;

}

remove

{

CommandManager.RequerySuggested -= value;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

////////////////////////////////////////////////////////////////////////////////////////// Private

#region Field

/// <summary>

/// 실행 액션

/// </summary>

private readonly Action<object> executeAction;

/// <summary>

/// 실행 가능 여부 함수

/// </summary>

private readonly Func<object, bool> canExecuteFunction;

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - DelegateCommand(executeAction, canExecuteFunction)

/// <summary>

/// 생성자

/// </summary>

/// <param name="executeAction">실행 액션</param>

/// <param name="canExecuteFunction">실행 가능 여부 함수</param>

public DelegateCommand(Action<object> executeAction, Func<object, bool> canExecuteFunction)

{

if(executeAction is null)

{

throw new ArgumentNullException(nameof(executeAction));

}

this.executeAction = executeAction;

this.canExecuteFunction = canExecuteFunction ?? (x => true);

}

#endregion

#region 생성자 - DelegateCommand(executeAction)

/// <summary>

/// 생성자

/// </summary>

/// <param name="executeAction">실행 액션</param>

public DelegateCommand(Action<object> executeAction) : this(executeAction, null)

{

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 실행 가능 여부 구하기 - CanExecute(parameter)

/// <summary>

/// 실행 가능 여부 구하기

/// </summary>

/// <param name="parameter">매개 변수</param>

/// <returns>실행 가능 여부</returns>

public bool CanExecute(object parameter) => this.canExecuteFunction(parameter);

#endregion

#region 실행하기 - Execute(parameter)

/// <summary>

/// 실행하기

/// </summary>

/// <param name="parameter">매개 변수</param>

public void Execute(object parameter) => this.executeAction(parameter);

#endregion

#region 갱신하기 - Refresh()

/// <summary>

/// 갱신하기

/// </summary>

public void Refresh() => CommandManager.InvalidateRequerySuggested();

#endregion

}

▶ MainApplicaton.xaml


<Application x:Class="TestProject.MainApplication"
    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="Inherit" PrimaryColor="DeepPurple" SecondaryColor="Lime" ColorAdjustment="{materialDesign:ColorAdjustment}" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

<Application x:Class="TestProject.MainApplication"

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

<materialDesign:BundledTheme BaseTheme="Inherit" PrimaryColor="DeepPurple" SecondaryColor="Lime" ColorAdjustment="{materialDesign:ColorAdjustment}" />

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Application.Resources>

</Application>

▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    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"
    Width="800"
    Height="600"
    Title="Button 클래스 : 머터리얼 디자인(Material Design) 사용하기"
    Background="{DynamicResource MaterialDesignPaper}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <Grid
            HorizontalAlignment="Center"
            VerticalAlignment="Center">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <StackPanel Grid.Row="0"
                HorizontalAlignment="Center"
                Orientation="Horizontal">
                <Button Style="{StaticResource MaterialDesignFloatingActionMiniLightButton}"
                    Margin="10">
                    <materialDesign:PackIcon
                        Width="24"
                        Height="24"
                        Kind="Alarm" />
                </Button>
                <Button Style="{StaticResource MaterialDesignFloatingActionMiniButton}"
                    Margin="10">
                    <materialDesign:PackIcon
                        Width="24"
                        Height="24"
                        Kind="Alarm" />
                </Button>
                <Button Style="{StaticResource MaterialDesignFloatingActionMiniDarkButton}"
                    Margin="10">
                    <materialDesign:PackIcon
                        Width="24"
                        Height="24"
                        Kind="Alarm" />
                </Button>

                <Button Style="{StaticResource MaterialDesignFloatingActionMiniSecondaryLightButton}"
                    Margin="10">
                    <materialDesign:PackIcon
                        Width="24"
                        Height="24"
                        Kind="Alarm" />
                </Button>
                <Button Style="{StaticResource MaterialDesignFloatingActionMiniSecondaryButton}"
                    Margin="10">
                    <materialDesign:PackIcon
                        Width="24"
                        Height="24"
                        Kind="Alarm" />
                </Button>
                <Button Style="{StaticResource MaterialDesignFloatingActionMiniSecondaryDarkButton}"
                    Margin="10">
                    <materialDesign:PackIcon
                        Width="24"
                        Height="24"
                        Kind="Alarm" />
                </Button>
            </StackPanel>
            <StackPanel Grid.Row="1"
                HorizontalAlignment="Center"
                Orientation="Horizontal">
                <Button Style="{StaticResource MaterialDesignFloatingActionLightButton}"
                    Margin="10">
                    <materialDesign:PackIcon
                        Width="24"
                        Height="24"
                        Kind="Alarm" />
                </Button>
                <Button Style="{StaticResource MaterialDesignFloatingActionButton}"
                    Margin="10">
                    <materialDesign:PackIcon
                        Width="24"
                        Height="24"
                        Kind="Alarm" />
                </Button>
                <Button Style="{StaticResource MaterialDesignFloatingActionDarkButton}"
                    Margin="10">
                    <materialDesign:PackIcon
                        Width="24"
                        Height="24"
                        Kind="Alarm" />
                </Button>

                <Button Style="{StaticResource MaterialDesignFloatingActionSecondaryLightButton}"
                    Margin="10">
                    <materialDesign:PackIcon
                        Width="24"
                        Height="24"
                        Kind="Alarm" />
                </Button>
                <Button Style="{StaticResource MaterialDesignFloatingActionSecondaryButton}"
                    Margin="10">
                    <materialDesign:PackIcon
                        Width="24"
                        Height="24"
                        Kind="Alarm" />
                </Button>
                <Button Style="{StaticResource MaterialDesignFloatingActionSecondaryDarkButton}"
                    Margin="10">
                    <materialDesign:PackIcon
                        Width="24"
                        Height="24"
                        Kind="Alarm" />
                </Button>
            </StackPanel>
            <StackPanel Grid.Row="2"
                HorizontalAlignment="Center"
                Orientation="Horizontal">
                <Button Style="{StaticResource MaterialDesignRaisedLightButton}"
                    Margin="10"
                    Width="90"
                    Content="_LIGHT" />
                <Button Style="{StaticResource MaterialDesignRaisedButton}"
                    Margin="10"
                    Width="90"
                    Content="_MID" />
                <Button Style="{StaticResource MaterialDesignRaisedDarkButton}"
                    Margin="10"
                    Width="90"
                    Content="_DARK" />

                <Button Style="{StaticResource MaterialDesignRaisedSecondaryLightButton}"
                    Margin="10"
                    Width="90"
                    Content="LIGHT" />
                <Button Style="{StaticResource MaterialDesignRaisedSecondaryButton}"
                    Margin="10"
                    Width="90"
                    Content="MID" />
                <Button Style="{StaticResource MaterialDesignRaisedSecondaryDarkButton}"
                    Margin="10"
                    Width="90"
                    Content="DARK" />
            </StackPanel>
            <StackPanel Grid.Row="3"
                HorizontalAlignment="Center"
                Orientation="Horizontal">
                <Button Style="{StaticResource MaterialDesignPaperLightButton}"
                    Margin="10"
                    Width="90"
                    Content="LIGHT" />
                <Button Style="{StaticResource MaterialDesignPaperButton}"
                    Margin="10"
                    Width="90"
                    Content="MID" />
                <Button Style="{StaticResource MaterialDesignPaperDarkButton}"
                    Margin="10"
                    Width="90"
                    Content="DARK" />

                <Button Style="{StaticResource MaterialDesignPaperSecondaryLightButton}"
                    Margin="10"
                    Width="90"
                    Content="LIGHT" />
                <Button Style="{StaticResource MaterialDesignPaperSecondaryButton}"
                    Margin="10"
                    Width="90"
                    Content="MID" />
                <Button Style="{StaticResource MaterialDesignPaperSecondaryDarkButton}"
                    Margin="10"
                    Width="90"
                    Content="DARK" />
            </StackPanel>
            <StackPanel Grid.Row="4"
                HorizontalAlignment="Center"
                Orientation="Horizontal">
                <Button Style="{StaticResource MaterialDesignFlatLightButton}"
                    Margin="10"
                    Width="90"
                    Content="LIGHT" />
                <Button Style="{StaticResource MaterialDesignFlatButton}"
                    Margin="10"
                    Width="90"
                    Content="MID" />
                <Button Style="{StaticResource MaterialDesignFlatDarkButton}"
                    Margin="10"
                    Width="90"
                    Content="DARK" />

                <Button Style="{StaticResource MaterialDesignFlatSecondaryLightButton}"
                    Margin="10"
                    Width="90"
                    Content="LIGHT" />
                <Button Style="{StaticResource MaterialDesignFlatSecondaryButton}"
                    Margin="10"
                    Width="90"
                    Content="MID" />
                <Button Style="{StaticResource MaterialDesignFlatSecondaryDarkButton}"
                    Margin="10"
                    Width="90"
                    Content="DARK" />
            </StackPanel>
            <StackPanel Grid.Row="5"
                HorizontalAlignment="Center"
                Orientation="Horizontal">
                <Button Style="{StaticResource MaterialDesignOutlinedLightButton}"
                    Margin="10"
                    Width="90"
                    Content="LIGHT" />
                <Button Style="{StaticResource MaterialDesignOutlinedButton}"
                    Margin="10"
                    Width="90"
                    Content="MID" />
                <Button Style="{StaticResource MaterialDesignOutlinedDarkButton}"
                    Margin="10"
                    Width="90"
                    Content="DARK" />

                <Button Style="{StaticResource MaterialDesignOutlinedSecondaryLightButton}"
                    Margin="10"
                    Width="90"
                    Content="LIGHT" />
                <Button Style="{StaticResource MaterialDesignOutlinedSecondaryButton}"
                    Margin="10"
                    Width="90"
                    Content="MID" />
                <Button Style="{StaticResource MaterialDesignOutlinedSecondaryDarkButton}"
                    Margin="10"
                    Width="90"
                    Content="DARK" />
            </StackPanel>
            <StackPanel Grid.Row="6"
                HorizontalAlignment="Center"
                Orientation="Horizontal">
                <Button Style="{StaticResource MaterialDesignFlatLightBgButton}"
                    Margin="10"
                    Width="90"
                    Content="LIGHT" />
                <Button Style="{StaticResource MaterialDesignFlatMidBgButton}"
                    Margin="10"
                    Width="90"
                    Content="MID" />
                <Button Style="{StaticResource MaterialDesignFlatDarkBgButton}"
                    Margin="10"
                    Width="90"
                    Content="DARK" />
                <Button Style="{StaticResource MaterialDesignFlatSecondaryLightBgButton}"
                    Margin="10"
                    Width="90"
                    Content="LIGHT" />
                <Button Style="{StaticResource MaterialDesignFlatSecondaryMidBgButton}"
                    Margin="10"
                    Width="90"
                    Content="MID" />
                <Button Style="{StaticResource MaterialDesignFlatSecondaryDarkBgButton}"
                    Margin="10"
                    Width="90"
                    Content="DARK" />
            </StackPanel>
            <StackPanel Grid.Row="7"
                HorizontalAlignment="Center"
                Orientation="Horizontal">
                <materialDesign:Badged
                    Margin="10"
                    Badge="3">
                    <Button
                        Content="MAIL" />
                </materialDesign:Badged>
                <materialDesign:Badged
                    Margin="10"
                    Badge="{materialDesign:PackIcon Heart}"
                    BadgeColorZoneMode="SecondaryMid">
                    <Button
                        Content="LOVE" />
                </materialDesign:Badged>
                <materialDesign:Badged
                    Margin="10"
                    Badge="DANGER"
                    BadgeColorZoneMode="Dark">
                    <Button
                        Content="STATUS" />
                </materialDesign:Badged>
                <materialDesign:Badged Name="countingBadge"
                    Margin="10"
                    BadgeColorZoneMode="PrimaryDark">
                    <Button Style="{StaticResource MaterialDesignRaisedLightButton}"
                        Content="CLICK ME!"
                        Click="countingButton_Click" />
                </materialDesign:Badged>
                <Button Style="{StaticResource MaterialDesignRaisedLightButton}"
                    Margin="10"
                    Width="150"
                    ContentStringFormat="OR CLICK ME {0}"
                    Content="{Binding ClickCount}"
                    Command="{Binding ClickCommand }" />
                <Button
                    Margin="10"
                    Content="{materialDesign:PackIcon AirplaneTakeoff}" />
            </StackPanel>
            <StackPanel Grid.Row="8"
                HorizontalAlignment="Center"
                Orientation="Horizontal">
                <Button Style="{StaticResource MaterialDesignRaisedAccentButton}"
                    Margin="10"
                    Width="150"
                    materialDesign:RippleAssist.Feedback="#dd000000"
                    Content="CUSTOM RIPPLE" />
                <Button Style="{StaticResource MaterialDesignRaisedAccentButton}"
                    Margin="10"
                    Width="150"
                    materialDesign:RippleAssist.IsDisabled="True"
                    Content="NO RIPPLE" />
                <RepeatButton
                    Width="150"
                    Content="REPEAT" />
            </StackPanel>
            <StackPanel Grid.Row="9"
                HorizontalAlignment="Center"
                Orientation="Horizontal">
                <Button Style="{StaticResource MaterialDesignIconButton}"
                    Margin="10">
                    <materialDesign:PackIcon Kind="Play" />
                </Button>
                <Button Style="{StaticResource MaterialDesignIconForegroundButton}"
                    Margin="10">
                    <materialDesign:PackIcon Kind="Play" />
                </Button>
                <Button Style="{StaticResource MaterialDesignIconButton}"
                    Margin="10"
                    Background="{DynamicResource MaterialDesignTextFieldBoxBackground}">
                    <materialDesign:PackIcon Kind="Play" />
                </Button>
            </StackPanel>
        </Grid>
    </Grid>
</Window>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

<Window x:Class="TestProject.MainWindow"

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"

Width="800"

Height="600"

Title="Button 클래스 : 머터리얼 디자인(Material Design) 사용하기"

Background="{DynamicResource MaterialDesignPaper}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<Grid

HorizontalAlignment="Center"

VerticalAlignment="Center">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<StackPanel Grid.Row="0"

HorizontalAlignment="Center"

Orientation="Horizontal">

<Button Style="{StaticResource MaterialDesignFloatingActionMiniLightButton}"

Margin="10">

<materialDesign:PackIcon

Width="24"

Height="24"

Kind="Alarm" />

</Button>

<Button Style="{StaticResource MaterialDesignFloatingActionMiniButton}"

Margin="10">

<materialDesign:PackIcon

Width="24"

Height="24"

Kind="Alarm" />

</Button>

<Button Style="{StaticResource MaterialDesignFloatingActionMiniDarkButton}"

Margin="10">

<materialDesign:PackIcon

Width="24"

Height="24"

Kind="Alarm" />

</Button>

<Button Style="{StaticResource MaterialDesignFloatingActionMiniSecondaryLightButton}"

Margin="10">

<materialDesign:PackIcon

Width="24"

Height="24"

Kind="Alarm" />

</Button>

<Button Style="{StaticResource MaterialDesignFloatingActionMiniSecondaryButton}"

Margin="10">

<materialDesign:PackIcon

Width="24"

Height="24"

Kind="Alarm" />

</Button>

<Button Style="{StaticResource MaterialDesignFloatingActionMiniSecondaryDarkButton}"

Margin="10">

<materialDesign:PackIcon

Width="24"

Height="24"

Kind="Alarm" />

</Button>

</StackPanel>

<StackPanel Grid.Row="1"

HorizontalAlignment="Center"

Orientation="Horizontal">

<Button Style="{StaticResource MaterialDesignFloatingActionLightButton}"

Margin="10">

<materialDesign:PackIcon

Width="24"

Height="24"

Kind="Alarm" />

</Button>

<Button Style="{StaticResource MaterialDesignFloatingActionButton}"

Margin="10">

<materialDesign:PackIcon

Width="24"

Height="24"

Kind="Alarm" />

</Button>

<Button Style="{StaticResource MaterialDesignFloatingActionDarkButton}"

Margin="10">

<materialDesign:PackIcon

Width="24"

Height="24"

Kind="Alarm" />

</Button>

<Button Style="{StaticResource MaterialDesignFloatingActionSecondaryLightButton}"

Margin="10">

<materialDesign:PackIcon

Width="24"

Height="24"

Kind="Alarm" />

</Button>

<Button Style="{StaticResource MaterialDesignFloatingActionSecondaryButton}"

Margin="10">

<materialDesign:PackIcon

Width="24"

Height="24"

Kind="Alarm" />

</Button>

<Button Style="{StaticResource MaterialDesignFloatingActionSecondaryDarkButton}"

Margin="10">

<materialDesign:PackIcon

Width="24"

Height="24"

Kind="Alarm" />

</Button>

</StackPanel>

<StackPanel Grid.Row="2"

HorizontalAlignment="Center"

Orientation="Horizontal">

<Button Style="{StaticResource MaterialDesignRaisedLightButton}"

Margin="10"

Width="90"

Content="_LIGHT" />

<Button Style="{StaticResource MaterialDesignRaisedButton}"

Margin="10"

Width="90"

Content="_MID" />

<Button Style="{StaticResource MaterialDesignRaisedDarkButton}"

Margin="10"

Width="90"

Content="_DARK" />

<Button Style="{StaticResource MaterialDesignRaisedSecondaryLightButton}"

Margin="10"

Width="90"

Content="LIGHT" />

<Button Style="{StaticResource MaterialDesignRaisedSecondaryButton}"

Margin="10"

Width="90"

Content="MID" />

<Button Style="{StaticResource MaterialDesignRaisedSecondaryDarkButton}"

Margin="10"

Width="90"

Content="DARK" />

</StackPanel>

<StackPanel Grid.Row="3"

HorizontalAlignment="Center"

Orientation="Horizontal">

<Button Style="{StaticResource MaterialDesignPaperLightButton}"

Margin="10"

Width="90"

Content="LIGHT" />

<Button Style="{StaticResource MaterialDesignPaperButton}"

Margin="10"

Width="90"

Content="MID" />

<Button Style="{StaticResource MaterialDesignPaperDarkButton}"

Margin="10"

Width="90"

Content="DARK" />

<Button Style="{StaticResource MaterialDesignPaperSecondaryLightButton}"

Margin="10"

Width="90"

Content="LIGHT" />

<Button Style="{StaticResource MaterialDesignPaperSecondaryButton}"

Margin="10"

Width="90"

Content="MID" />

<Button Style="{StaticResource MaterialDesignPaperSecondaryDarkButton}"

Margin="10"

Width="90"

Content="DARK" />

</StackPanel>

<StackPanel Grid.Row="4"

HorizontalAlignment="Center"

Orientation="Horizontal">

<Button Style="{StaticResource MaterialDesignFlatLightButton}"

Margin="10"

Width="90"

Content="LIGHT" />

<Button Style="{StaticResource MaterialDesignFlatButton}"

Margin="10"

Width="90"

Content="MID" />

<Button Style="{StaticResource MaterialDesignFlatDarkButton}"

Margin="10"

Width="90"

Content="DARK" />

<Button Style="{StaticResource MaterialDesignFlatSecondaryLightButton}"

Margin="10"

Width="90"

Content="LIGHT" />

<Button Style="{StaticResource MaterialDesignFlatSecondaryButton}"

Margin="10"

Width="90"

Content="MID" />

<Button Style="{StaticResource MaterialDesignFlatSecondaryDarkButton}"

Margin="10"

Width="90"

Content="DARK" />

</StackPanel>

<StackPanel Grid.Row="5"

HorizontalAlignment="Center"

Orientation="Horizontal">

<Button Style="{StaticResource MaterialDesignOutlinedLightButton}"

Margin="10"

Width="90"

Content="LIGHT" />

<Button Style="{StaticResource MaterialDesignOutlinedButton}"

Margin="10"

Width="90"

Content="MID" />

<Button Style="{StaticResource MaterialDesignOutlinedDarkButton}"

Margin="10"

Width="90"

Content="DARK" />

<Button Style="{StaticResource MaterialDesignOutlinedSecondaryLightButton}"

Margin="10"

Width="90"

Content="LIGHT" />

<Button Style="{StaticResource MaterialDesignOutlinedSecondaryButton}"

Margin="10"

Width="90"

Content="MID" />

<Button Style="{StaticResource MaterialDesignOutlinedSecondaryDarkButton}"

Margin="10"

Width="90"

Content="DARK" />

</StackPanel>

<StackPanel Grid.Row="6"

HorizontalAlignment="Center"

Orientation="Horizontal">

<Button Style="{StaticResource MaterialDesignFlatLightBgButton}"

Margin="10"

Width="90"

Content="LIGHT" />

<Button Style="{StaticResource MaterialDesignFlatMidBgButton}"

Margin="10"

Width="90"

Content="MID" />

<Button Style="{StaticResource MaterialDesignFlatDarkBgButton}"

Margin="10"

Width="90"

Content="DARK" />

<Button Style="{StaticResource MaterialDesignFlatSecondaryLightBgButton}"

Margin="10"

Width="90"

Content="LIGHT" />

<Button Style="{StaticResource MaterialDesignFlatSecondaryMidBgButton}"

Margin="10"

Width="90"

Content="MID" />

<Button Style="{StaticResource MaterialDesignFlatSecondaryDarkBgButton}"

Margin="10"

Width="90"

Content="DARK" />

</StackPanel>

<StackPanel Grid.Row="7"

HorizontalAlignment="Center"

Orientation="Horizontal">

<materialDesign:Badged

Margin="10"

Badge="3">

<Button

Content="MAIL" />

</materialDesign:Badged>

<materialDesign:Badged

Margin="10"

Badge="{materialDesign:PackIcon Heart}"

BadgeColorZoneMode="SecondaryMid">

<Button

Content="LOVE" />

</materialDesign:Badged>

<materialDesign:Badged

Margin="10"

Badge="DANGER"

BadgeColorZoneMode="Dark">

<Button

Content="STATUS" />

</materialDesign:Badged>

<materialDesign:Badged Name="countingBadge"

Margin="10"

BadgeColorZoneMode="PrimaryDark">

<Button Style="{StaticResource MaterialDesignRaisedLightButton}"

Content="CLICK ME!"

Click="countingButton_Click" />

</materialDesign:Badged>

<Button Style="{StaticResource MaterialDesignRaisedLightButton}"

Margin="10"

Width="150"

ContentStringFormat="OR CLICK ME {0}"

Content="{Binding ClickCount}"

Command="{Binding ClickCommand }" />

<Button

Margin="10"

Content="{materialDesign:PackIcon AirplaneTakeoff}" />

</StackPanel>

<StackPanel Grid.Row="8"

HorizontalAlignment="Center"

Orientation="Horizontal">

<Button Style="{StaticResource MaterialDesignRaisedAccentButton}"

Margin="10"

Width="150"

materialDesign:RippleAssist.Feedback="#dd000000"

Content="CUSTOM RIPPLE" />

<Button Style="{StaticResource MaterialDesignRaisedAccentButton}"

Margin="10"

Width="150"

materialDesign:RippleAssist.IsDisabled="True"

Content="NO RIPPLE" />

<RepeatButton

Width="150"

Content="REPEAT" />

</StackPanel>

<StackPanel Grid.Row="9"

HorizontalAlignment="Center"

Orientation="Horizontal">

<Button Style="{StaticResource MaterialDesignIconButton}"

Margin="10">

<materialDesign:PackIcon Kind="Play" />

</Button>

<Button Style="{StaticResource MaterialDesignIconForegroundButton}"

Margin="10">

<materialDesign:PackIcon Kind="Play" />

</Button>

<Button Style="{StaticResource MaterialDesignIconButton}"

Margin="10"

Background="{DynamicResource MaterialDesignTextFieldBoxBackground}">

<materialDesign:PackIcon Kind="Play" />

</Button>

</StackPanel>

</Grid>

</Window>

▶ MainWindow.xaml.cs


using System.Collections.Generic;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows;
using System.Windows.Input;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Event
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 속성 변경시 - PropertyChanged

        /// <summary>
        /// 속성 변경시
        /// </summary>
        public event PropertyChangedEventHandler PropertyChanged;

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 클릭 카운트
        /// </summary>
        private int clickCount;

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 클릭 카운트 - ClickCount

        /// <summary>
        /// 클릭 카운트
        /// </summary>
        public int ClickCount
        {
            get => this.clickCount;
            private set => SetProperty(ref this.clickCount, value);
        }

        #endregion
        #region 클릭 명령 - ClickCommand

        /// <summary>
        /// 클릭 명령
        /// </summary>
        public ICommand ClickCommand { get; }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

        /// <summary>
        /// 생성자
        /// </summary>
        public MainWindow()
        {
            InitializeComponent();

            ClickCount   = 0;
            ClickCommand = new DelegateCommand(_ => ClickCount += 1);

            DataContext = this;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private
        //////////////////////////////////////////////////////////////////////////////// Event

        #region 카운팅 버튼 클릭시 처리하기 - countingButton_Click(sender, e)

        /// <summary>
        /// 카운팅 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void countingButton_Click(object sender, RoutedEventArgs e)
        {
            if(this.countingBadge.Badge == null || Equals(this.countingBadge.Badge, string.Empty))
            {
                this.countingBadge.Badge = 0;
            }

            int nextCount = int.Parse(this.countingBadge.Badge.ToString() ?? "0") + 1;

            this.countingBadge.Badge = nextCount < 21 ? (object)nextCount : null;
        }

        #endregion

        ////////////////////////////////////////////////////////////////////////////////////////// Protected
        //////////////////////////////////////////////////////////////////////////////// Function

        #region 속성 변경시 이벤트 발생시키기 - FirePropertyChangedEvent(propertyName)

        /// <summary>
        /// 속성 변경시 이벤트 발생시키기
        /// </summary>
        /// <param name="propertyName">속성명</param>
        protected void FirePropertyChangedEvent([CallerMemberName] string propertyName = null)
            => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

        #endregion
        #region 속성 설정하기 - SetProperty<T>(member, value, propertyName)

        /// <summary>
        /// 속성 설정하기
        /// </summary>
        /// <typeparam name="T">타입</typeparam>
        /// <param name="member">멤버</param>
        /// <param name="value">값</param>
        /// <param name="propertyName">속성명</param>
        /// <returns>처리 결과</returns>
        protected virtual bool SetProperty<T>(ref T member, T value, [CallerMemberName] string propertyName = null)
        {
            if(EqualityComparer<T>.Default.Equals(member, value))
            {
                return false;
            }

            member = value;

            FirePropertyChangedEvent(propertyName);

            return true;
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

using System.Collections.Generic;

using System.ComponentModel;

using System.Runtime.CompilerServices;

using System.Windows;

using System.Windows.Input;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window, INotifyPropertyChanged

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Event

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 속성 변경시 - PropertyChanged

/// <summary>

/// 속성 변경시

/// </summary>

public event PropertyChangedEventHandler PropertyChanged;

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

////////////////////////////////////////////////////////////////////////////////////////// Private

#region Field

/// <summary>

/// 클릭 카운트

/// </summary>

private int clickCount;

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 클릭 카운트 - ClickCount

/// <summary>

/// 클릭 카운트

/// </summary>

public int ClickCount

{

get => this.clickCount;

private set => SetProperty(ref this.clickCount, value);

}

#endregion

#region 클릭 명령 - ClickCommand

/// <summary>

/// 클릭 명령

/// </summary>

public ICommand ClickCommand { get; }

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

ClickCount = 0;

ClickCommand = new DelegateCommand(_ => ClickCount += 1);

DataContext = this;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

//////////////////////////////////////////////////////////////////////////////// Event

#region 카운팅 버튼 클릭시 처리하기 - countingButton_Click(sender, e)

/// <summary>

/// 카운팅 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void countingButton_Click(object sender, RoutedEventArgs e)

{

if(this.countingBadge.Badge == null || Equals(this.countingBadge.Badge, string.Empty))

{

this.countingBadge.Badge = 0;

}

int nextCount = int.Parse(this.countingBadge.Badge.ToString() ?? "0") + 1;

this.countingBadge.Badge = nextCount < 21 ? (object)nextCount : null;

}

#endregion

////////////////////////////////////////////////////////////////////////////////////////// Protected

//////////////////////////////////////////////////////////////////////////////// Function

#region 속성 변경시 이벤트 발생시키기 - FirePropertyChangedEvent(propertyName)

/// <summary>

/// 속성 변경시 이벤트 발생시키기

/// </summary>

/// <param name="propertyName">속성명</param>

protected void FirePropertyChangedEvent([CallerMemberName] string propertyName = null)

=> PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

#endregion

#region 속성 설정하기 - SetProperty<T>(member, value, propertyName)

/// <summary>

/// 속성 설정하기

/// </summary>

/// <typeparam name="T">타입</typeparam>

/// <param name="member">멤버</param>

/// <param name="value">값</param>

/// <param name="propertyName">속성명</param>

/// <returns>처리 결과</returns>

protected virtual bool SetProperty<T>(ref T member, T value, [CallerMemberName] string propertyName = null)

{

if(EqualityComparer<T>.Default.Equals(member, value))

{

return false;

}

member = value;

FirePropertyChangedEvent(propertyName);

return true;

}

#endregion

}

TestProject.zip

[C#/WPF/MATERIAL DESIGN/.NET5] 머터리얼 디자인(Material Design) 사용하기

■ 머터리얼 디자인(Material Design)을 사용하는 방법을 보여준다. ▶ Project.csproj


<Project Sdk="Microsoft.NET.Sdk">
    <PropertyGroup>
        <OutputType>WinExe</OutputType>
        <TargetFramework>net5.0-windows</TargetFramework>
        <UseWPF>true</UseWPF>
        <Authors>DSCore</Authors>
        <Company>DSCore</Company>
        <Copyright>Copyright © DSCore 2021</Copyright>
    </PropertyGroup>
    <ItemGroup>
        <ApplicationDefinition Include="MainApplication.xaml">
            <Generator>MSBuild:Compile</Generator>
        </ApplicationDefinition>
    </ItemGroup>
    <ItemGroup>
        <PackageReference Include="MaterialDesignThemes" Version="4.2.1" />
    </ItemGroup>
</Project>

<OutputType>WinExe</OutputType>

<TargetFramework>net5.0-windows</TargetFramework>

<Authors>DSCore</Authors>

<Company>DSCore</Company>

</PropertyGroup>

<Generator>MSBuild:Compile</Generator>

</ApplicationDefinition>

</ItemGroup>

</ItemGroup>

</Project>

▶ MainApplication.xaml


<Application x:Class="TestProject.MainApplication"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    StartupUri="MainWindow.xaml">
    <Application.Resources>
        <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.DeepPurple.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

<Application x:Class="TestProject.MainApplication"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

StartupUri="MainWindow.xaml">

<Application.Resources>

<ResourceDictionary.MergedDictionaries>

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Application.Resources>

</Application>

▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    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"
    Width="800"
    Height="600"
    Title="머터리얼 디자인(Material Design) 사용하기"
    Background="{DynamicResource MaterialDesignPaper}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <materialDesign:Card
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Padding="30"
            TextOptions.TextFormattingMode="Ideal"
            TextOptions.TextRenderingMode="Auto"
            TextElement.FontFamily="{DynamicResource MaterialDesignFont}"
            TextElement.FontSize="30"
            TextElement.FontWeight="Regular"
            TextElement.Foreground="{DynamicResource MaterialDesignBody}">
            <TextBlock
                Style="{DynamicResource MaterialDesignTitleTextBlock}">
                First Material Design App
            </TextBlock>
        </materialDesign:Card>
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

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"

Width="800"

Height="600"

Title="머터리얼 디자인(Material Design) 사용하기"

Background="{DynamicResource MaterialDesignPaper}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<materialDesign:Card

HorizontalAlignment="Center"

VerticalAlignment="Center"

Padding="30"

TextOptions.TextFormattingMode="Ideal"

TextOptions.TextRenderingMode="Auto"

TextElement.FontFamily="{DynamicResource MaterialDesignFont}"

TextElement.FontSize="30"

TextElement.FontWeight="Regular"

TextElement.Foreground="{DynamicResource MaterialDesignBody}">

<TextBlock

Style="{DynamicResource MaterialDesignTitleTextBlock}">

First Material Design App

</TextBlock>

</materialDesign:Card>

</Grid>

</Window>

TestProject.zip