C#/WPF

[WPF] MaterialDesignTheme 적용

HJ0216 2024. 4. 13. 14:27

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

Material Design for WPF and the Windows Desktop

materialdesigninxaml.net

 

 

Getting Started

Google's Material Design in XAML & WPF, for C# & VB.Net. - MaterialDesignInXAML/MaterialDesignInXamlToolkit

github.com

 

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

1
2
3
4
5
6
7
8
9
10
<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을 사용하면 됩니다🤓.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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

I installed Material Design In XAML Toolkit to my project. I have ListView which contains within itself GridView (with GridViewColumns) and i want to override styles for each row in this table. But...

stackoverflow.com