wpf 에서 React 와 같은 컴포넌트 형식으로 디자인 요소를 관리 할 수 있나요?

🖥️ UI/UX 프로그래밍 Q&A WPF Q&A
1

WPF 로 작업을 진행하면서 뷰를 구성하는 단계에서 구성하려는 뷰가 4개정도가 있다면

같은 각 탭에 들어가는 같은 디자인의 요소들을 수정하려고 할 때에 하나의 디자인 요소를 수정하려면

4번의 일을 해야하다보니 작업시간에 너무 지체되는거 같아 리액트 처럼 하나의 컴포넌트 형식으로

부모 요소를 수정하게되면 자동으로 자식요소도 같이 바뀌게끔 할 수 있는 방법이 존재하는건가요??

1개의 좋아요
2

Style로 하면 되지 않을까요?

MainWindow.xaml

<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">

    <TabControl>
        <TabControl.Resources>
            <Style x:Key="BlueButtonStyle" TargetType="Button">
                <Setter Property="Background" Value="Blue"/>
                <Setter Property="Content" Value="Blue"/>
            </Style>

            <Style x:Key="GreenButtonStyle" TargetType="Button">
                <Setter Property="Background" Value="Green"/>
                <Setter Property="Content" Value="Green"/>
            </Style>
        </TabControl.Resources>
        
        <TabItem Header="Tab1">
            <Button Style="{StaticResource BlueButtonStyle}"/>
        </TabItem>
        <TabItem Header="Tab2">
            <Button Style="{StaticResource BlueButtonStyle}"/>
        </TabItem>
        <TabItem Header="Tab3">
            <Button Style="{StaticResource GreenButtonStyle}"/>
        </TabItem>
        <TabItem Header="Tab4">
            <Button Style="{StaticResource GreenButtonStyle}"/>
        </TabItem>
    </TabControl>
    
</Window>

1
2

Tab1,2번은 Blue버튼 Tab3,4번은 Green버튼의 스타일을 적용시킨 소스입니다.
Style에 x:Key 값을 줘서 StaticResource로 Style을 적용시켜도 되고
만약 그냥 해당 윈도우의 전체 버튼에 Style을 적용 시키시려면 x:Key를 빼시고 Style도 빼시고 Window.Resources 쪽으로 Style을 옮기시면 됩니다.

 <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="Background" Value="Green"/>
            <Setter Property="Content" Value="Green"/>
        </Style>
    </Window.Resources>

 <TabControl>        
        <TabItem Header="Tab1">
            <Button />
        </TabItem>
        <TabItem Header="Tab2">
            <Button />
        </TabItem>
        <TabItem Header="Tab3">
            <Button />
        </TabItem>
        <TabItem Header="Tab4">
            <Button />
        </TabItem>
    </TabControl>

그리고 좀더 상위 단으로 프로젝트 전체의 Button에 Style을 주고 싶으면 App.xaml에 Style을 x:Key없이 적용시켜 주면 됩니다.(x:Key를 주면 해당 Key를 적용시킨 Style만 적용 됩니다.)

App.xaml

<Application x:Class="WpfApp2.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WpfApp2"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <Style TargetType="Button">
            <Setter Property="Background" Value="Green"/>
            <Setter Property="Content" Value="Green"/>
        </Style>
    </Application.Resources>
</Application>
3개의 좋아요
3

@Nobody 님의 글 처럼 스타일로 할 수 있고 좀 더 간단히 접근 하시려면 UserControl을 이용하실 수도 있습니다.

UserControl을 이용한 예제를 혹시 원하시면 먼저 원하시는 예시를 만드셔서 공유 주시면 그것을 기반으로 제시해보겠습니다.

4개의 좋아요
4

내일 예제 공유 드리겟습니다!

2개의 좋아요