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

TestProject.zip

0.00MB

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

 

728x90

 

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