[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