WPF Style, EventSetter, 다수의 컨트롤에서 이벤트 공유, e.handled, 이벤트라우팅, WPF동영상교육, WPF학원, C#학원, 닷넷학원, 닷넷교육, C#교육, WPF교육

 WPF Style, EventSetter, 다수의 컨트롤에서 이벤트 공유, e.handled, 이벤트라우팅, WPF동영상교육, WPF학원, C#학원, 닷넷학원, 닷넷교육, C#교육, WPF교육

https://www.youtube.com/watch?v=5-5yzocgj84&list=PLxU-iZCqT52Cmj47aKB1T-SxI33YL7rYS&index=24 

https://www.youtube.com/watch?v=sTOKEenyaSI&list=PLxU-iZCqT52Cmj47aKB1T-SxI33YL7rYS&index=23 

https://www.youtube.com/watch?v=Qj26gdH651A&list=PLxU-iZCqT52Cmj47aKB1T-SxI33YL7rYS&index=22 

WPF Style

다수의 컨트롤에서 이벤트 공유

EventSetter

• Style의 EventSetter를 이용하여 이벤트에 대한 응답 핸들러 메소드를 지정할 수 있다.
• Setter가 Style의 자식중 대체로 이용 되지만 라우팅된 특정 이벤트(버튼의 Click등)의 이벤트핸들러를 설정하기 위해서는 EventSetter 엘리먼트를 이용할 수 있는데 다수의 엘리먼트에서 이벤트를 공유할 수 있다.

[실습]

아래 예제에서 3개의 버튼이 존재하는데 각 버튼은 자체적인 클릭 이벤트를 가지고 있어 클릭을 하면 그 이벤트 핸들러가 실행되고 그 이후 Style에 적용된  EventSetter가 적용되어서 빨강색 브러시가 적용되어 배경이 붉은색으로 변경이 됩니다. 하지만 Button3는 e.handled=true가 되어 이벤트 라우팅이 중단되어 EventSetter의 핸들러 메소드가 호출되지 않는다.

[MainWindow.xaml]

<Window x:Class="WpfApp6.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:WpfApp6"

        mc:Ignorable="d"

        Title="MainWindow" Height="350" Width="525">

    <Window.Resources>

        <Style TargetType="{x:Type Button}">

            <Setter Property="FontSize" Value="24" />

            <Setter Property="Background" Value="Yellow" />

            <EventSetter Event="Click" Handler="EventSetter_Click" />

        </Style>

    </Window.Resources>

    <StackPanel>       

        <Button Name="button1" Click="button_click">Button1</Button>

        <Button Name="button2" Click="button_click">Button2</Button>

        <Button Name="button3" Click="button3_click">Button3</Button>

    </StackPanel>

</Window>

[MainWindow.xaml.cs]

using System.Windows;

using System.Windows.Controls;

namespace WpfApp6

{

    public partial class MainWindow : Window

    {

        public MainWindow()

        {

            InitializeComponent();

        }

        public void EventSetter_Click(object sender, RoutedEventArgs e)

        {

            Button b = e.Source as Button;

            b.Background = new SolidColorBrush(Colors.Red);

        }

        public void button_click(object sender, RoutedEventArgs e)

        {

            Button btn = e.Source as Button;

            MessageBox.Show(btn.Content + " has been clicked", Title);

        }

        public void button3_click(object sender, RoutedEventArgs e)

        {

            Button btn = e.Source as Button;

            MessageBox.Show(btn.Content + " has been clicked", Title);

            e.Handled = true;  //이벤트 라우팅 종료

        }

    }

}

https://www.youtube.com/watch?v=MGOb9QXi6So&list=PLxU-iZCqT52Cmj47aKB1T-SxI33YL7rYS&index=5 

https://www.youtube.com/watch?v=KfY6DqWtcqs&list=PLxU-iZCqT52Cmj47aKB1T-SxI33YL7rYS&index=4 

#WPFStyle, #EventSetter, #e.handled, #이벤트라우팅, #WPF동영상, #WPF, #WPF교육, #WPF강좌, #WPF강의, #WPF학원, WPFStyle, EventSetter, e.handled, 이벤트라우팅, WPF동영상, WPF, WPF교육, WPF강좌, WPF강의, WPF학원,  

WPF 스타일(Style), TargetType, BasedOn, Setter, Static Resource, C#, WPF동영상

 WPF 스타일(Style), TargetType, BasedOn, Setter, Static Resource, C#, WPF동영상, C#학원, 닷넷학원, 자바학원, SQL학원, 닷넷교육, C#교육, 자바교육

http://ojc.asia/bbs/board.php?bo_table=WPF&wr_id=186 

WPF 스타일(Style), TargetType, BasedOn, Setter, Static Resource, C#, WPF동영상

WPF 스타일(Style), TargetType, BasedOn, Setter, Static Resource, C#, WPF동영상WPF StyleTargetType, BasedOnWPF 스타일은 여러 요소, 컨트롤에 일관된 UI를 적용할 수 있다.WPF 스타일은 의존속성과 그 속성값의 모임이라

ojc.asia

https://www.youtube.com/watch?v=K3v-A5d2fNI&list=PLxU-iZCqT52Cmj47aKB1T-SxI33YL7rYS&index=20 

https://www.youtube.com/watch?v=Qj26gdH651A&list=PLxU-iZCqT52Cmj47aKB1T-SxI33YL7rYS&index=22 

WPF Style

TargetType, BasedOn

 

• WPF 스타일은 여러 요소, 컨트롤에 일관된 UI를 적용할 수 있다.
• WPF 스타일은 의존속성과 그 속성값의 모임이라고 보면 되는데 대표적인 속성인 Setter는 의존속성과 그 값들을 가지고 있다.
• WPF Style 클래스는 6개의 속성을 정의하는데 그 중 Setter, Resources는 이미 다루어 보았다. 스타일을 적용할 타겟 엘리먼트의 타입을 기술하는 TargetType이라는 속성도 있는데 중괄호 안에 x:Type이라는 마크업 확장과 적용을 원하는 Type 클래스의 이름을 명시한다. 
• Target을 설정하면 x:Key 값을 명시할 필요가 없고 키는 TargetType을 통해 생성된다. x:key를 사용하지 않는다면 모든 하위 요소에 스타일이 적용되며 x:Key를 이용하면 키값을 이용하여 스타일을 적용하고픈 요소에서 정의해서 참조하면 된다.

<Style TargetType=”{x:Type TextBlock}” …>

…

</Style>

• TargetType을 사용하면 Setter 엘리먼트 내에서 프로퍼티 이름을 완전히 나열할 필요가 없다.

<Setter Property=”Button.FontSize” Value=”12”/>  

>>>>

<Setter Property=”FontSize” Value=”12”/>

• TargetType 예제

<Window x:Class="WpfApp6.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:WpfApp6"

        mc:Ignorable="d"

        Title="MainWindow" Height="350" Width="525">

    <StackPanel>

        <StackPanel.Resources>

            <Style TargetType="{x:Type Button}">

                <Setter Property="FontSize" Value="24" />

                <Setter Property="Foreground" Value="Blue" />

            </Style>

            <Style TargetType="{x:Type TextBlock}">

                <Setter Property="Foreground" Value="Red" />

            </Style>

        </StackPanel.Resources>

        <Button>

            Button 1

        </Button>

        <TextBlock>

        TextBlock 1

        </TextBlock>

        <Button>

            <TextBlock>

             Button with TextBlock Content

            </TextBlock>

        </Button>

    </StackPanel>

</Window>

• 엘리먼트에는 오직 하나의 Style만 적용되는데 이 Style은 비주얼 트리에서 키로 검색된 최초의 Style 이거나 엘리먼트의 클래스가 TargetType과 일치하는 Style 이다.
• 이미 만들어진 Style을 기반으로 약간의 프로퍼티 정의를 추가한 Style을 정의하는 것도 가능한데 이 경우 Style에서 기존 Style을 참조하기 위해 BasedOn 속성을 사용할 수  있다. 

<Window x:Class="WpfApp6.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:WpfApp6"

        mc:Ignorable="d"

        Title="MainWindow" Height="350" Width="525">

    <StackPanel>

        <StackPanel.Resources>

            <Style x:Key="norbtn">

                <Setter Property="Control.FontSize" Value="24" />

                <Setter Property="Control.Foreground" Value="Blue" />

                <Setter Property="Control.HorizontalAlignment" Value="Center" />

                <Setter Property="Control.Margin" Value="24" />

                <Setter Property="Control.Padding" Value="20, 10, 20, 10" />

            </Style>

            <Style x:Key="hotbtn" BasedOn="{StaticResource norbtn}">

                <Setter Property="Control.Foreground" Value="Red" />

            </Style>

        </StackPanel.Resources>

        <Button Style="{StaticResource norbtn}">

            Button Number 1

        </Button>

        <Button Style="{StaticResource hotbtn}">

            Button Number 2

        </Button>

        <Button Style="{StaticResource norbtn}">

            Button Number 3

        </Button>

    </StackPanel>

</Window>

• TargetType 속성을 가진 기존 스타일을 기본으로 해서 정의하는 것도 가능하지만 조금 복잡해 진다.

BasedOn=”{StaticResource {x:Type Button}}”

• 새로 정의한 Style에서는 스타일이 바탕으로 한 클래스나 그 클래스의 파생클래스로 TargetType을 설정해야 한다.

<Window x:Class="WpfApp6.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:WpfApp6"

        mc:Ignorable="d"

        Title="MainWindow" Height="350" Width="525">

    <StackPanel>

        <StackPanel.Resources>

            <Style TargetType="{x:Type Button}">

                <Setter Property="Control.FontSize" Value="24" />

                <Setter Property="Control.Foreground" Value="Blue" />

            </Style>

            두번째 정의하는 스타일은 충돌을 피하기 위해 x:Key 필요

            <Style x:Key="hotbtn"

               TargetType="{x:Type Button}"

               BasedOn="{StaticResource {x:Type Button}}">

                <Setter Property="Control.Foreground" Value="Red" />

            </Style>

        </StackPanel.Resources>

        <Button>

            Button Number 1

        </Button>

        <Button Style="{StaticResource hotbtn}">

            Button Number 2

        </Button>

        <Button>

            Button Number 3

        </Button>

    </StackPanel>

</Window>

 

• TargetType을 사용하면 특정 타입 엘리먼트는 항상 특정 스타일을 가지며 클래스의 계층과 일치하는 스타일의 계층을 다음과 같이 정의할 수 있다.

<Window x:Class="WpfApp6.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:WpfApp6"

        mc:Ignorable="d"

        Title="MainWindow" Height="350" Width="525">

    <StackPanel>

        <StackPanel.Resources>

            <Style TargetType="{x:Type Control}">

                <Setter Property="Control.FontSize" Value="24" />

                <Setter Property="Control.Foreground" Value="Blue" />

            </Style>

            <Style TargetType="{x:Type Button}"

               BasedOn="{StaticResource {x:Type Control}}">

                <Setter Property="Control.Foreground" Value="Red" />

            </Style>

            <Style TargetType="{x:Type Label}"

               BasedOn="{StaticResource {x:Type Control}}">

                <Setter Property="Control.Foreground" Value="Green" />

            </Style>

            <Style TargetType="{x:Type TextBox}"

               BasedOn="{StaticResource {x:Type Control}}">

            </Style>

        </StackPanel.Resources>

        <Button>

            Button Control

        </Button>

        <Label>

            Label Control

        </Label>

        <TextBox>

            TextBox Control

        </TextBox>

    </StackPanel>

</Window>

 #WPF, #WPF스타일, #WPFSTYLE, #TargetType, #BasedOn, #STYLESetter, #StaticResource, #WPF동영상, #WPF교육, #WPF학원, #WPF강좌, #닷넷교육, WPF, WPF스타일, WPFSTYLE, TargetType, BasedOn, STYLESetter, StaticResource, WPF동영상, WPF교육, WPF학원, WPF강좌, 닷넷교육,