[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