첨부 소스 코드는 나눔고딕코딩 폰트를 사용합니다.
728x90
반응형
728x170

TestProject.zip
0.16MB

▶ 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>

 

반응형

 

▶ 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>
728x90
반응형
그리드형(광고전용)
Posted by icodebroker

댓글을 달아 주세요