Style

Chan·2021년 11월 28일
0

WPF

목록 보기
3/9

출처: https://tip1234.tistory.com/213?category=842024

Style

<Window x:Class="WpfApp2.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:WpfApp2"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel Orientation="Horizontal">
    	<Button Content="Button1" Width="100" Height="50" Margin="10,0,0,0"/>
        <Button Content="Button2" Width="100" Height="50" Margin="10,0,0,0"/>
        <Button Content="Button3" Width="100" Height="50" Margin="10,0,0,0"/>
        <Button Content="Button4" Width="100" Height="50" Margin="10,0,0,0"/>
        <Button Content="Button5" Width="100" Height="50" Margin="10,0,0,0"/>
        <Button Content="Button6" Width="100" Height="50" Margin="10,0,0,0"/>
    </StackPanel>
</Window>
  • StackPanel에 여러 버튼을 다는데 Width, Height, Margin이라는 3가지 속성이 전부 동일한 경우, 위 코드처럼 작성하면 유지관리하는데 버튼을 하나하나 수정해야 하므로 비효율적임

↓ 수정해서 사용하면,
<Window x:Class="WpfApp2.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:WpfApp2"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Windows.Resources>
        <Style TargetType="{x:Type Button}" x:Key="MyBtnStyle">
            <Setter Property="Width" Value="100"/>
            <Setter Property="Height" Value="50"/>
            <Setter Property="Margin" Value="10,0,0,0"/>
        </Style>
    </Windows.Resources>
    <StackPanel Orientation="Horizontal">
    	<Button Content="Button1" Style="{StaticResource MyBtnStyle}"/>
        <Button Content="Button2" Style="{StaticResource MyBtnStyle}"/>
        <Button Content="Button3" Style="{StaticResource MyBtnStyle}"/>
        <Button Content="Button4" Style="{StaticResource MyBtnStyle}"/>
        <Button Content="Button5" Style="{StaticResource MyBtnStyle}"/>
        <Button Content="Button6" Style="{StaticResource MyBtnStyle}"/>
    </StackPanel>
</Window>
  • 위와 같이 Button에 Style을 만들어 사용 가능
  • 스타일을 만들기 위해서는 스타일이 사용될 위치보다 상위 태그에서 Resources를 정의해줌
  • Resources 생성 후, Style 태그 열고 Target과 Key 설정
    (Target은 style이 적용될 컨트롤 정의, Key는 style을 사용할 떄 필요한 Key)
  • Setter 태그 열고 Property와 Value 설정 (상속 구조 이해)
  • 실제로 사용될 Button에 Style="{StaticResource MyBtnStyle}" 설정으로 적용
profile
Backend Web Developer

0개의 댓글