[C# WPF] Material Design #3

해당 포스트는 C# WPF .NET 6 기반, NuGet "CommunityToolkit.Mvvm"으로 작성되었습니다.

 

https://mydevenotes.tistory.com/2

Material Design #2

이번 포스트는 Material Design 활용하는 방법을 알아보겠습니다.

 

 

MainWindow.xaml

<Window x:Class="DataBinding.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:DataBinding"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        mc:Ignorable="d"
        Title="MainWindow" x:Name="Main" Height="450" Width="800">
    <Grid>     
       <Grid.ColumnDefinitions>
          <ColumnDefinition/>
          <ColumnDefinition/>
       </Grid.ColumnDefinitions>
            <Button Grid.Column="0" Command="{Binding Btn_ButtonCommand}">
                <StackPanel Orientation="Vertical">
                    <materialDesign:PackIcon
                        Width="24"
                        Height="24"
                        HorizontalAlignment="Center"
                        Kind="ButtonCursor" />
                    <TextBlock
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Text="버튼" />
                </StackPanel>
            </Button> 
            
            <Button Grid.Column="1"  Command="{Binding Btn_CaptureCommand}">
                <StackPanel Orientation="Vertical">
                    <materialDesign:PackIcon
                        Width="24"
                        Height="24"
                        HorizontalAlignment="Center"
                        Kind="AspectRatio" />
                    <TextBlock
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Text="캡처" />
                </StackPanel>
            </Button>
        </Grid>   
</Window>

 

이전 포스트에서는 <Button>  </Button> 에서 Content을 사용하여 버튼 이름을 사용하였습니다.

 

하지만 materialDesign:PackIcon을 사용한다면, Content를 두번 사용하였다고 뜹니다.

 

그래서 <StackPanel> </StackPanel>을 사용하여 materialDesign:PackIcon과 TextBlock을 동시에 사용할 수 있습니다.

 

- 실행결과