[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