[WPF] 스타일(Xaml 리소스)

728x90

xaml 리소스는 여러곳에서 스타일을 재사용할 수 있도록 해주는 것입니다.

예제1)

xaml에서 window 태그 아래에 아래코드를 추가합니다.

x:Key는 리소스 호출시 필요한 이름입니다.

setter property는 정확하게 모르겠지만 컨트롤.속성으로 적습니다.

그런데 아래와 같이 Label의 Backgrount속성인데도 버튼 컨트롤에 적용됩니다.

setter.value에는 적용할 스타일을 입력합니다.

<Window.Resources>
    <Style x:Key="testStyle">
        <Setter Property="Label.Background">
            <Setter.Value>
                
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="Black"/>
                        <GradientStop Color="#FF16CEA8" Offset="1"/>
                        <GradientStop Color="#FF0C735E" Offset="0.563"/>
                        <GradientStop Color="#FF0B6C58" Offset="0.533"/>
                    </LinearGradientBrush>
                    
            </Setter.Value>
            
        </Setter>
    </Style>
</Window.Resources>

적용할 xaml태그에 아래와 같이 입력하면 됩니다.

Style="{StaticResource key값}"

아래코드는 전체코드입니다.

<Window x:Class="WpfApp1.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:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <Style x:Key="testStyle">
            <Setter Property="Button.Background">
                <Setter.Value>
                    
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="Black"/>
                            <GradientStop Color="#FF16CEA8" Offset="1"/>
                            <GradientStop Color="#FF0C735E" Offset="0.563"/>
                            <GradientStop Color="#FF0B6C58" Offset="0.533"/>
                        </LinearGradientBrush>
                        
                </Setter.Value>
                
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <DockPanel>

            <Label Content="제목" Width="50" Height="50" HorizontalAlignment="Left" Style="{StaticResource testStyle}"></Label>

            <Button Content="버튼" Style="{StaticResource testStyle}"/>
        
            <ListView d:ItemsSource="{d:SampleData ItemCount=5}" Margin="114,79,152,108" x:Name="listView1">
                <ListView.View>
                    <GridView>
                        <GridViewColumn Header="이미지" Width="300">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <StackPanel>
                                        <Image Width="60" Height="60" Source="{Binding UserImg}"></Image>
                                        <Button Content="이미지 버튼" Height="20" />
                                    </StackPanel>

                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                        <GridViewColumn Header="이름" DisplayMemberBinding="{Binding Name}"/>
                        <GridViewColumn Header="나이" DisplayMemberBinding="{Binding UserAge}"/>
                    </GridView>
                </ListView.View>
            </ListView>
        </DockPanel>
    </Grid>
</Window>

아래처럼 출력되는 것을 확인할 수 있습니다.

예제2)

Resource는 window든 page든 usercontrol이든 다 있습니다. 그러나 코드를 줄이기 위해서는 각각의 xaml에 지정하지 않아도 공통적으로 사용할 수 있는 방법이 필요합니다. 이러한 방법에는 두가지가 있습니다.

1. app.xaml에 입력하는 방법

app.xaml

<Application x:Class="WpfStyle.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WpfStyle"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <Style TargetType="Button" x:Key="btnStyle">
            <!--커서를 가져다 댔을때 손가락모양으로 변하는 스타일-->
            <Setter Property="Cursor" Value="Hand"></Setter>
            <Setter Property="Background" Value="Orange"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Width" Value="150"/>
            <Setter Property="Height" Value="50"/>
            <Setter Property="FontSize" Value="20"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="Margin" Value="10"/>
            <Setter Property="Template">
                <Setter.Value>
                    <!--ControlTemplate은 컨트롤의 모양이나 동작을 정의하는데 사용-->
                    <ControlTemplate TargetType="Button">
                        <!--TemplateBinding은 부모 컨트롤의 속성을 가져온다-->
                        <Border CornerRadius="20"
                        Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center"
                                      VerticalAlignment="Center">

                            </ContentPresenter>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>
</Application>

2.리소스 사전을 만드는 방법

프로젝트 우클릭 → 추가 → 리소스 사전을 만듭니다.

Dictionary1.xaml

버튼 스타일1과 버튼스타일2를 각각 만들었습니다.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style TargetType="Button" x:Key="btnStyle">
        <!--커서를 가져다 댔을때 손가락모양으로 변하는 스타일-->
        <Setter Property="Cursor" Value="Hand"></Setter>
        <Setter Property="Background" Value="Orange"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Width" Value="150"/>
        <Setter Property="Height" Value="50"/>
        <Setter Property="FontSize" Value="20"/>
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="Margin" Value="10"/>
        <Setter Property="Template">
            <Setter.Value>
                <!--ControlTemplate은 컨트롤의 모양이나 동작을 정의하는데 사용-->
                <ControlTemplate TargetType="Button">
                    <!--TemplateBinding은 부모 컨트롤의 속성을 가져온다-->
                    <Border CornerRadius="20"
                Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center"
                              VerticalAlignment="Center">

                        </ContentPresenter>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    
    <Style TargetType="Button" x:Key="btnStyle2">
        <!--커서를 가져다 댔을때 손가락모양으로 변하는 스타일-->
        <Setter Property="Cursor" Value="Hand"></Setter>
        <Setter Property="Background" Value="green"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="Width" Value="150"/>
        <Setter Property="Height" Value="50"/>
        <Setter Property="FontSize" Value="20"/>
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="Margin" Value="10"/>
        <Setter Property="Template">
            <Setter.Value>
                <!--ControlTemplate은 컨트롤의 모양이나 동작을 정의하는데 사용-->
                <ControlTemplate TargetType="Button">
                    <!--TemplateBinding은 부모 컨트롤의 속성을 가져온다-->
                    <Border CornerRadius="20"
            Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center"
                          VerticalAlignment="Center">

                        </ContentPresenter>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

App.xaml

<Application x:Class="WpfStyle.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WpfStyle"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <!--리소스 사전의 경로입력-->
                <ResourceDictionary Source="Dictionary1.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

MainWindow.xaml

<Window x:Class="WpfStyle.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:WpfStyle"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        
    </Window.Resources>
    <Grid>
        <StackPanel>
            <Button Style="{StaticResource btnStyle}">버튼</Button>
            <Button Style="{StaticResource btnStyle2}">버튼</Button>
        </StackPanel>
    </Grid>
</Window>

실행결과

'C# Programming > WPF' 카테고리의 다른 글

[WPF] 동기, 비동기 RelayCommand (0)	2024.05.16
[WPF] 트리거(Trigger) (0)	2024.05.16
[WPF] 모델 생성과 바인딩 (0)	2024.05.16
[WPF] 컨트롤 사용방법 (2)	2024.05.13
[WPF] 프로젝트 생성 (0)	2024.05.13

예제1)

예제2)

1. app.xaml에 입력하는 방법

2.리소스 사전을 만드는 방법

'C# Programming > WPF' 카테고리의 다른 글

티스토리툴바