MS 예제 실행화면

로그인 사용자를  선택할때마다 배경 밑 컨트롤의 스타일이 바뀐다.

image

image

image

 

프로젝트구성

image

Resources_*.xaml 파일은 각각의 컨트롤의 스타일을 가지고 있다.

예로 버튼의 스타일을 보면

Resources_Default.xaml

  <Style x:Key="ButtonStyler"
         TargetType="{x:Type Button}">
    <Setter Property="FontFamily"
            Value="{DynamicResource {x:Static SystemFonts.MessageFontFamilyKey}}" />
    <Setter Property="FontSize"
            Value="{DynamicResource {x:Static SystemFonts.MessageFontSizeKey}}" />
    <Setter Property="FontStyle"
            Value="{DynamicResource {x:Static SystemFonts.MessageFontStyleKey}}" />
    <Setter Property="FontWeight"
            Value="{DynamicResource {x:Static SystemFonts.MessageFontWeightKey}}" />
    <Setter Property="Foreground"
            Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
    <Setter Property="HorizontalContentAlignment"
            Value="Center" />
    <Setter Property="VerticalContentAlignment"
            Value="Center" />
    <Setter Property="ClipToBounds"
            Value="True" />
    <Setter Property="Padding"
            Value="2" />
    <Setter Property="Margin"
            Value="10" />
    <Setter Property="Height"
            Value="30" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type Button}">
          <Grid>
            <Rectangle x:Name="GelBackground"
                       Opacity="1"
                       RadiusX="4"
                       RadiusY="4"
                       Fill="{TemplateBinding  Background}"
                       Stroke="Black"
                       StrokeThickness="1" />
            <ContentPresenter x:Name="ContentSite"
                              Margin="{TemplateBinding Padding}"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
          </Grid>
          <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver"
                     Value="true">
              <Setter Property="Rectangle.Fill"
                      Value="#cccccc"
                      TargetName="GelBackground" />
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

Resources_Luna.xaml

  <Style x:Key="ButtonStyler"
         TargetType="{x:Type Button}">
    <Setter Property="FontFamily"
            Value="{DynamicResource {x:Static SystemFonts.MessageFontFamilyKey}}" />
    <Setter Property="FontSize"
            Value="{DynamicResource {x:Static SystemFonts.MessageFontSizeKey}}" />
    <Setter Property="FontStyle"
            Value="{DynamicResource {x:Static SystemFonts.MessageFontStyleKey}}" />
    <Setter Property="FontWeight"
            Value="{DynamicResource {x:Static SystemFonts.MessageFontWeightKey}}" />
    <Setter Property="Foreground"
            Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
    <Setter Property="HorizontalContentAlignment"
            Value="Center" />
    <Setter Property="VerticalContentAlignment"
            Value="Center" />
    <Setter Property="ClipToBounds"
            Value="True" />
    <Setter Property="Padding"
            Value="2" />
    <Setter Property="Margin"
            Value="10" />
    <Setter Property="Height"
            Value="30" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type Button}">
          <Grid>
            <Rectangle x:Name="GelBackground"
                       Opacity="1"
                       RadiusX="4"
                       RadiusY="4"
                       Stroke="black"
                       StrokeThickness="1">
              <Rectangle.Fill>
                <LinearGradientBrush StartPoint="0,0"
                                     EndPoint="0,1">
                  <GradientBrush.GradientStops>
                    <GradientStopCollection>
                      <GradientStop Color="white"
                                    Offset="0" />
                      <GradientStop Color="#99ccff"
                                    Offset="1" />
                    </GradientStopCollection>
                  </GradientBrush.GradientStops>
                </LinearGradientBrush>
              </Rectangle.Fill>
            </Rectangle>
            <Rectangle x:Name="GelShine"
                       Margin="2,2,2,0"
                       VerticalAlignment="top"
                       RadiusX="6"
                       RadiusY="6"
                       Opacity="0"
                       Stroke="transparent"
                       Height="15px">
              <Rectangle.Fill>
                <LinearGradientBrush StartPoint="0,0"
                                     EndPoint="0,1">
                  <GradientBrush.GradientStops>
                    <GradientStopCollection>
                      <GradientStop Color="#ccffffff"
                                    Offset="0" />
                      <GradientStop Color="transparent"
                                    Offset="1" />
                    </GradientStopCollection>
                  </GradientBrush.GradientStops>
                </LinearGradientBrush>
              </Rectangle.Fill>
            </Rectangle>
            <ContentPresenter x:Name="ContentSite"
                              Margin="{TemplateBinding Padding}"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
          </Grid>
          <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver"
                     Value="true">
              <Setter Property="Rectangle.Fill"
                      Value="#99ccff"
                      TargetName="GelBackground"/>
              <Setter Property="Rectangle.Opacity"
                      Value="1"
                      TargetName="GelShine"/>
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

각각 버튼의 스타일이 다른것을 알수있다.

비하인드 코드에서 적용하기

특별한거 없고 ResourceDictionary 생성해서

            switch (UserTilesListBox.SelectedIndex)
            {
                case 0:
                    Application.Current.Resources = _defaultTheme;
                    break;

                case 1:
                    Application.Current.Resources = _lunaTheme;
                    break;

               case 2:
                   Application.Current.Resources = _xBoxTheme;
                   break;

                case 3:
                    Application.Current.Resources = _toonsTheme;
                    break; 
            }

사용자 선택시마다 리소스를 적용한다.

namespace LogonScreen
{
    using System;
    using System.Collections;
    using System.IO;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Media;
    using System.Windows.Navigation;
    using System.Windows.Markup;
    using System.Windows.Input;
    using System.Windows.Media.Animation; 

    public partial class Default
    {
        private static bool resourceLoaded = false;
        ResourceDictionary _defaultTheme ; //리소스 만들기
        ResourceDictionary _lunaTheme;
        ResourceDictionary _toonsTheme ;
        ResourceDictionary _xBoxTheme;

        private void Init (object sender, System.EventArgs args)
        {           
            _defaultTheme = new Resources_Default();
            _lunaTheme = new Resources_Luna();
            _toonsTheme = new Resources_Toons();
            _xBoxTheme = new Resources_XBox();

            Application.Current.Resources = _defaultTheme;
        }

        private void OnMouseEnter(object sender, MouseEventArgs args)
        {
            resourceLoaded = true;
        }
           
        void ChangeUser (object sender, SelectionChangedEventArgs e)
        {
            if (!resourceLoaded)
                return;

            switch (UserTilesListBox.SelectedIndex)
            {
                case 0:
                    Application.Current.Resources = _defaultTheme;
                    break;

                case 1:
                    Application.Current.Resources = _lunaTheme;
                    break;

               case 2:
                   Application.Current.Resources = _xBoxTheme;
                   break;

                case 3:
                    Application.Current.Resources = _toonsTheme;
                    break; 
            }
        }
    }
}

+ Recent posts