WPF따라하기 3 - 데이터 트리거

강의 : https://youtu.be/KbNXBqTh_IM?list=PLxU-iZCqT52Cmj47aKB1T-SxI33YL7rYS

 

1. 체크박스를 클릭하면 TextBlock이 사라지게끔 함

<Window x:Class="DataTriggerExample.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:DataTriggerExample"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <Style x:Key="MyStyle" TargetType="TextBlock">
            <Setter Property="Visibility" Value="Visible"/>
            <Style.Triggers>
                <!-- cb1이 check되면 -->
                <DataTrigger Binding="{Binding ElementName=cb1, Path=IsChecked}"
                             Value="True">
                    <!-- 이 TextBlock의 Visibility를 false로-->
                    <Setter Property="Visibility" Value="Hidden"/>

                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <StackPanel>
        <CheckBox x:Name="cb1" Content="Click Me" HorizontalAlignment="Left" Margin="282,124,0,0" VerticalAlignment="Top"/>
        <TextBlock x:Name="textBlock" Text="Hello WPF!!!" TextWrapping="Wrap" Width="314"
                   Style="{StaticResource MyStyle}"/>

    </StackPanel>
</Window>

* cb1(CheckBox 이름)이 클릭하면 사라지는 TextBlock Style

 

 

2. 스크롤바를 움직이면 ProgressBar와 Textbox의 값이 바뀌게 되고,

    스크롤바의 값이 20이 되면 ProgressBar의 전경색이 붉은색이 된다

1) Progressbar 변경

<Window x:Class="DataTriggerExample.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:DataTriggerExample"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <!-- Progressbar는 이 Style을 적용한다-->
        <Style TargetType="{x:Type ProgressBar}">
            <Setter Property="Foreground" Value="Blue"/>
            <Style.Triggers>
                <!-- TheValue가 20이면 -->
                <DataTrigger Binding="{Binding TheValue}" Value="20">
                    <!-- 전경색을 Red로 바꿔라-->
                    <Setter Property="Foreground" Value="Red"/>

                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <Slider x:Name="MySlider" Margin="5" Minimum="10" Maximum="20"
                Value="{Binding TheValue}"/>
        <ProgressBar Grid.Row="1" Minimum="10" Maximum="20" Value="{Binding TheValue}" />
        <TextBox Grid.Row="2" Text="{Binding TheValue}" />
    </Grid>
</Window>

namespace DataTriggerExample
{
    public class DataObject
    {
        public int TheValue { get; set; }
    }


    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = new DataObject();
        }
    }
}

* Progressbar를 움직이면 TheValue가 DataObject.TheValue로 들어가게 되고,

그 값들이 Progressbar와 TextBox에 들어가게 된다

* TheValue가 20이 되면 전경색이 붉은색이 된다.