logo MSJO.kr

mahapps.metro : a UI toolkit for WPF

2019-08-27
MsJ
   

MahApps.Metro is a project that Paul Jenkins started back in 2011 as a simple way to bring a Metro-style user interface into your WPF application(MahApps 2019). WPF 테마를 쉽게 ‘메트로’ 형태로 바꾸어 주며 추가로 아이콘팩을 설치하면 웹 아이콘 폰트처럼 다양한 아이콘을 사용할 수 있다. Nuget Package Manager로 ‘MahApps.Metro’‘MahApps.Metro.IconPacks’ 설치하여 사용한다. 아래의 이미지처럼 ‘IconPacks.Browser’로 아이콘의 내용을 쉽게 검색할 수 있다.

아이콘팩 브라우저

실제 테스트 화면

테스트 화면

App.xml
<Application x:Class="WPFUI.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WPFUI"
             xmlns:system="clr-namespace:System;assembly=mscorlib"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Cobalt.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <system:Double x:Key="WindowTitleFontSize">12</system:Double>
            <FontFamily x:Key="HeaderFontFamily">Malgun Gothic</FontFamily>
        </ResourceDictionary>
    </Application.Resources>
</Application>
MainWindow.xaml
<Controls:MetroWindow x:Class="WPFUI.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:WPFUI"
    xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
    xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
    mc:Ignorable="d"
    Title="메트로윈도우" Height="450" Width="800"
    GlowBrush="{DynamicResource AccentColorBrush}" WindowStartupLocation="CenterScreen"
    ShowTitleBar="True"  ShowIconOnTitleBar="True">

    <Controls:MetroWindow.IconTemplate>
        <DataTemplate>
            <iconPacks:PackIconModern Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"
                Margin="4" Foreground="{DynamicResource IdealForegroundColorBrush}" Kind="SocialApple" />
        </DataTemplate>
    </Controls:MetroWindow.IconTemplate>

    <Controls:MetroWindow.RightWindowCommands>
        <Controls:WindowCommands>
            <Menu Background="#3373F1" BorderThickness="0">
                <MenuItem Header="File" Background="#3373F1">
                    <MenuItem Header="New" />
                    <MenuItem Header="Open" />
                    <MenuItem Header="Save" />
                </MenuItem>
            </Menu>
            <TextBlock Text="테스트" VerticalAlignment="Center" />
            <Button Content="설정" />
            <Button Content="업데이트" />
        </Controls:WindowCommands>
    </Controls:MetroWindow.RightWindowCommands>

    <Grid>
        <Button x:Name="BtnChangeTheme" Click="BtnChangeTheme_Click" Width="100" Height="30">
            <StackPanel Orientation="Horizontal">
                <iconPacks:PackIconFontAwesome Kind="AndroidBrands" VerticalAlignment="Center" />
                <TextBlock Text="테마변경" Margin="4, 0, 0, 0" VerticalAlignment="Center" FontSize="12" />
            </StackPanel>
        </Button>
        <Button Width="50" Height="50" HorizontalAlignment="Left" VerticalAlignment="Center"
                FontSize="12" Foreground="Green" BorderBrush="Green" BorderThickness="1"
                Content="{iconPacks:FontAwesome AddressCardSolid, Width=24, Height=24}"
                Style="{DynamicResource MetroCircleButtonStyle}" />
    </Grid>
</Controls:MetroWindow>
MainWindow.xam.cs
using MahApps.Metro;
using MahApps.Metro.Controls;
using System.Windows;

namespace WPFUI
{
    public partial class MainWindow : MetroWindow
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void BtnChangeTheme_Click(object sender, RoutedEventArgs e)
        {
            ThemeManager.ChangeAppStyle(this, ThemeManager.GetAccent("Red"), ThemeManager.GetAppTheme("BaseLight"));
        }
    }
}
추가 추천 툴킷

Prεv   Nεxt
Content
Search     RSS Feed     BY-NC-ND