WPF DynamicResource 적용 및 UI 에 Style 적용

1. DynamicResource 를 프로젝트에 추가

• BrushColor.xaml : Color값들에 대하여 정의
• StyleCommon.xaml : UI Control들에 적용될 여러가지 스타일들에 대하여 정의 

BrushColor.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
    <SolidColorBrush x:Key="colorBgSearchPanel" Color="#242323"/>
    <SolidColorBrush x:Key="colorSeg_N" Color="#10ffffff"/>
    <SolidColorBrush x:Key="colorSegLine_N" Color="#d8d8d8"/>
    <SolidColorBrush x:Key="colorSeg_H" Color="#20ffffff"/>

</ResourceDictionary>

StyleCommon.xaml 

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="BrushColor.xaml"/>
    </ResourceDictionary.MergedDictionaries>

    <Style x:Key="recBgSearchPanel" TargetType="{x:Type Rectangle}">
        <Setter Property="Fill" Value="{DynamicResource colorBgSearchPanel}"/>
    </Style>

	<Style x:Key="recBg_SegSearch" TargetType="{x:Type Rectangle}">
		<Setter Property="RadiusX" Value="20"/>
		<Setter Property="RadiusY" Value="20"/>
		<Setter Property="Fill" Value="{DynamicResource colorSeg_N}"/>
		<Setter Property="Stroke" Value="{DynamicResource colorSegLine_N}"/>
	</Style>

</ResourceDictionary>

---

2. App.xaml에 ResourceDictionary 등록

App.xaml

<Application x:Class="Examples.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:Examples"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/ResourceDictionary/StyleCommon.xaml"/>
                <ResourceDictionary Source="Resources/ResourceDictionary/BrushColor.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

---

3. UI XAML에 Control 추가 및 Style 적용 

 

XML Code

<Grid x:Name="grdQuickSearch" >
	<Rectangle  Style="{DynamicResource recBgSearchPanel}"/>
	<StackPanel x:Name="pnlQuickSearch" Margin="12" Orientation="Vertical">
		<Grid x:Name="grdSegSearchPeriod" Height="40">
			<Grid.ColumnDefinitions>
				<ColumnDefinition Width="*"/>
				<ColumnDefinition Width="*"/>
				<ColumnDefinition Width="*"/>
				<ColumnDefinition Width="*"/>
				<ColumnDefinition Width="*"/>
			</Grid.ColumnDefinitions>
			<Rectangle Grid.ColumnSpan="5" Style="{DynamicResource recBg_SegSearch}"/>
			<RadioButton x:Name="sgbPeriodToday" Uid="1" Grid.Column="0" Content="Today" Style="{DynamicResource sgbSearchLeft}"/>
			<RadioButton x:Name="sgbPeriodYesterday" Uid="2" Grid.Column="1" Content="3 Days" Style="{DynamicResource sgbSearchMiddle}"/>
			<RadioButton x:Name="sgbPeriodWeek" Uid="3" Grid.Column="2" Content="7 Days" Style="{DynamicResource sgbSearchMiddle}" />
			<RadioButton x:Name="sgbPeriodMonth" Uid="4" Grid.Column="3" Content="1 Month" Style="{DynamicResource sgbSearchMiddle}"/>
			<RadioButton x:Name="sgbPeriodAll" Uid="5" Grid.Column="4" Content="All" Style="{DynamicResource sgbSearchRight}"/>
		</Grid>
	</StackPanel>
</Grid>

Style을 미적용시