|
|
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 까페)