[24기 김선호] Trigger(MultiTrigger, Data Trigger)

[24기 김선호]

WPF Trigger (MultiTrigger, Data Trigger)	조: 4조
	작성일: 2012-09-04
	작성자: 김선호

Button에 대한 기본 스타일 지정

  

Window1.xaml

<Window.Resources>

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

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

            <Setter Property="Margin" Value="3"></Setter>

Button에 대한 기본 스타일을 지정해준다.

  

Window1.xaml

<Style.Triggers>

                <MultiTrigger>

                    <MultiTrigger.Conditions>

                        <Condition Property="IsMouseOver" Value="true"></Condition>

                        <Condition Property="IsFocused" Value="true"></Condition>

                    </MultiTrigger.Conditions>

                    <MultiTrigger.Setters>

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

                            <Setter Property="RenderTransform">

                                <Setter.Value>

                                    <RotateTransform Angle="20"></RotateTransform>

                                </Setter.Value>

                            </Setter>

                        </MultiTrigger.Setters>

                </MultiTrigger>

            </Style.Triggers>

MultiTrigger의 Condition 즉 조건으로 Condition Property를 IsMouseOver와 IsFocused를 설정함으로서 해당 버튼에 마우스가 올라가고 포커스가 맞쳐졌을 시 MultiTrigger의 Setter Property로 해당 버튼에 기울기를 주었다.

  

Window1.xaml

<StackPanel Width="200">

            <StackPanel.Resources>

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

                    <Style.Triggers>

                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Text}" Value="disabled">

                            <Setter Property="IsEnabled" Value="False"></Setter>

                        </DataTrigger>

                    </Style.Triggers>

                    <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource Self}, Path=Text}"/>

                  </Style>

            </StackPanel.Resources>

            <TextBox Height="28" Name="textBox1" Width="200" />

            <TextBox Height="31" Name="textBox2" Width="200" />

            <TextBox Height="31" Name="textBox3" Width="200" />

        </StackPanel>

StackPanel 설정 후 StackPanel 안에 TextBox를 배치 후 Style TargetType으로 TextBox로 설정해 놓고, Trigger 컬렉션에 DataTrigger를 추가한다. Text의 Value에 따른 Setter Property를 설정하는데 해당 Text Property에 disabled를 주면 Setter Property로 IsEnabled가 False로 변경된다.

 

MainWindow1.xaml

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

                <Setter Property="FontFamily" Value="궁서체"></Setter>

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

                <Setter Property="FontWeight" Value="Bold"></Setter>

                <Setter Property="Margin" Value="10"></Setter>

                <Setter Property="BorderBrush" Value="LightBlue"></Setter>

                <Setter Property="HorizontalAlignment" Value="Stretch"></Setter>

                <Setter Property="ItemTemplate">

ListBox에 대한 기본 스타일 정의 해준다. 마지막의 ItemTemplate는 데이터 개체의 시각화를 지정할 때 사용하는데, itemsControl이 컬렉션 개체에 바인딩 되어있는 경우 DataTemplate를 사용해서 특정명령을 제공하지 않으면 각 항목의 결과 UI는 내부 컬렉션에 있는 각 개체의 문자열 표현이 된다. ListBox의 컬렉션 컨트롤을 데이터 바인딩해야 되므로 ItemTemplate를 사용해서 DataTemplate을 이용해 개체들을 표시해줘야 한다.

MainWindow1.xaml

<Setter.Value>

        <DataTemplate>

             <Border x:Name="itemBorder" BorderBrush="LawnGreen" BorderThickness="3" Margin="3">

                                <Grid>

                                    <Grid.RowDefinitions>

                                        <RowDefinition></RowDefinition>

                                        <RowDefinition></RowDefinition>

                                    </Grid.RowDefinitions>

                                    <StackPanel Grid.Row="0" Orientation="Horizontal">

                                        <TextBlock>직급 :  </TextBlock>

                                        <TextBlock Text="{Binding Path=Rank}" ></TextBlock>

                                    </StackPanel>

                                    <StackPanel Grid.Row="1" Orientation="Horizontal">

                                        <TextBlock>연봉 :</TextBlock>

                                        <TextBlock Text="{Binding Path=Salary}"></TextBlock>

                                    </StackPanel>

                                </Grid>

                            </Border>

                            <DataTemplate.Triggers>

                                <DataTrigger Binding="{Binding Path=Rank}" Value="임원">

                                    <Setter TargetName="itemBorder" Property="BorderBrush" Value="Red"></Setter>

                                </DataTrigger>

                            </DataTemplate.Triggers>

Border부분을 itemBorder로 해주고 해당 데이터가 올 때마다 StackPanel로 직급과 연봉을 설정하고 데이터 바인딩하여 데이터를 넣어주었다. 데이터 트리거부분으로 바인딩 된 부분과 Value가 일치하면 BorderBrush를 Red로 바꿔주도록 설정하였다.

Window1.xaml.cs

public partial class Window1 : Window

    {

        public Window1()

        {

            InitializeComponent();

            List<Employee> data = new List<Employee>();

            for (int i = 0; i < 30; i++)

            {

                Employee employee = new Employee();

                employee.Salary = (i % 5 + 1) * 10000;

                int rank = employee.Salary = i % 10;

                if (rank == 0)

                {

                    employee.Rank = "임원";

                }

                else

                {

                    employee.Rank = "사원";

                }

                data.Add(employee);

            }

            this.listbox.ItemsSource = data;

        }

    }

List컬렉션을 이용해서 데이터 저장 및 ListBox의 itemsSource부분에 해당 List컬렉션을 넣어서 데이터바인딩 시켜준다.

참고 자료 : http://blog.naver.com/zzangrho(비트23기) 박기현 블로그

             http://cafe.naver.com/xlsvba/8424 (Evinious 까페)