[WPF] MaterialDesignTheme 적용

QR Code 생성 프로그램을 만들면서 헤맸던 부분을 정리해두었습니다.

 

👉 기본 환경

- Language: C#, xaml

- IDE: Visual Basic 2022

- Framework: .NET 8.0

---

1. MaterialDesignTheme 버전

버전이 5.0.0부터 App.xaml에 작성해야하는 코드가 변경되었습니다.

 

공식문서가 거짓말을 하고 있기때문에, Github으로 이동합니다.

Material Design In XAML Toolkit

 

Getting Started

 

중요한 건, 공식문서를 다음과 같이 변경해서 사용해야 한다는 것입니다.

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesign3.Defaults.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Secondary/MaterialDesignColor.Lime.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

 

 

2. 기본 Style 상속

PackIcon을 추가하니, Hover할 때 클릭할 때 예쁜 애니메이션이 추가되어있었습니다.

근데, 색깔을 바꾸고 싶습니다.

 

용기있게 ListView의 ItemContainer Style을 선언하면, 기본으로 적용한 모든 기능을 잃게 됩니다..☠️

 

그럴 때 xaml에서 사용할 수 있는 style 상속 기능 BaseOn을 사용하면 됩니다🤓.

<ListView VerticalAlignment="Top" 
          Margin="0 70"
          ItemsSource="{Binding MenuModels}">
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem" BasedOn="{StaticResource MaterialDesignListBoxItem}">
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Background" Value="#DCBFFF"/>
                </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="#DCBFFF"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </ListView.ItemContainerStyle>
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Margin="20 0" Orientation="Horizontal">
                <materialDesign:PackIcon Kind="{Binding Icon}" Width="30" Height="30"/>
                <TextBlock Text="{Binding Title}" 
                           VerticalAlignment="Center" 
                           Margin="10 0" 
                           FontSize="18"
                           Foreground="#FFFFFF"/>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

 

 

 

🎇 결과물

 

 

 

📚 참고 자료

WPF overriding ListViewItem style when use Material Design In XAML Toolkit