Trigger, DataTrigger & EventTrigger

تاکنون ما با استایل‌ها از طریق تعیین یک مقدار پایا (static) برای یک خاصیت مشخص کار کرده‌ایم. لیکن، با استفاده از ماشه‌ها (Triggers) می‌توانید به محض تغییر یک وضعیت خاص مقدار یک خاصیت دلخواه را تغییر دهید. ماشه‌ها انواع مختلفی دارند: ماشه‌های خاصیت (Property triggers)، ماشه‌های رخداد (Event triggers) و ماشه‌های داده (Data triggers). این ماشه‌ها به شما اجازه می‌دهند تا کارهایی که معمولاً در کد پسین (code-behind) نوشته می‌شوند را به طور کامل در زبان نشانه‌گذاری (markup) انجام دهید که بخشی از فرآیند جداسازی استایل از کد به حساب می‌آید.

ماشه‌های خاصیت (Property triggers)

متداول‌ترین ماشه، ماشه‌ی خاصیت است که در زبان نشانه‌گذاری به سادگی با المان <Trigger> تعریف می‌شود. این ماشه خاصیتی مشخص از کنترل را زیر نظر گرفته و به مجرد اینکه مقدار آن خاصیت مساوی با مقدار تعیین شده گشت ماشه را رها می‌کند تا خاصیت‌های دلخواه تغییر یابند. این مکانیزم ممکن است در تئوری پیچیده به نظر آید، اما با توجه به مثال زیر می‌بینیم که در عمل استفاده از آن بسیار ساده است:

<Window x:Class="WpfTutorialSamples.Styles.StyleTriggersSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StyleTriggersSample" Height="100" Width="300">
    <Grid>
        <TextBlock Text="Hello, styled world!" FontSize="28" HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Setter Property="Foreground" Value="Blue"></Setter>
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Foreground" Value="Red" />
                            <Setter Property="TextDecorations" Value="Underline" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </Grid>
</Window>

در این استایل، ما خاصیت Foreground را برابر با رنگ آبی قرار می‌دهیم تا متن را شبیه به یک لینک کنیم. سپس، یک ماشه اضافه می‌کنیم تا خاصیت IsMouseOver را رصد کند — هنگامی که مقدار این خاصیت به True تغییر می‌کند، ما دو گذارنده (setter) را اعمال می‌کنیم: مقدار خاصیت Foreground متن را به رنگ قرمز تغییر می‌دهیم و سپس آن را زیرخط‌دار می‌کنیم. این مثال به خوبی نشان می‌دهد که استفاده از ماشه‌ها برای ایجاد تغییرات در طراحی بدون استفاده از کد پسین تا چه اندازه ساده است.

ما در این مثال برای این TextBlock استایل خاصی را تعریف می‌کنیم. با این حال، چنانچه قبلاً نشان داده شد، اگر می‌خواستیم می‌توانستیم این استایل را به صورت عمومی تعریف کنیم تا بر روی همه‌ی کنترل‌های TextBlock در برنامه اعمال شود.

ماشه‌های داده (Data triggers)

ماشه‌های داده که با المان <DataTrigger> نشان داده می‌شوند برای خاصیت‌هایی بکار می‌روند که لزوماً یک خاصیت وابستگی (Dependency property) نیستند. آنها با ایجاد یک قید (Binding) به یک خاصیت عادی کار می‌کنند تا آن خاصیت را مورد رصد قرار دهند. این مکانیزم امکان ایجاد قید به خاصیتی از یک کنترل دیگر را نیز فرآهم می‌کند. برای نمونه به مثال زیر توجه کنید:

<Window x:Class="WpfTutorialSamples.Styles.StyleDataTriggerSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StyleDataTriggerSample" Height="200" Width="200">
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <CheckBox Name="cbSample" Content="Hello, world?" />
        <TextBlock HorizontalAlignment="Center" Margin="0,20,0,0" FontSize="48">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Setter Property="Text" Value="No" />
                    <Setter Property="Foreground" Value="Red" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ElementName=cbSample, Path=IsChecked}" Value="True">
                            <Setter Property="Text" Value="Yes!" />
                            <Setter Property="Foreground" Value="Green" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </StackPanel>
</Window>

در این مثال، یک CheckBox و یک TextBlock داریم. با استفاده از یک DataTrigger ما TextBlock را به خاصیت IsChecked از CheckBox مقید می‌کنیم. ابتدا یک مقدار پیش‌فرض را تعیین می‌کنیم تا متن "No" و به رنگ قرمز باشد. سپس به کمک ماشه‌ی داده، استایلی را برای زمانی که مقدار خاصیت IsChecked مربوط به CheckBox به True تغییر کرد تعیین می‌کنیم؛ متن "!Yes" به رنگ سبز (تصویر مربوط به مثال را ببینید).

ماشه‌های رخداد (Event triggers)

ماشه‌های رخداد که با المان <EventTrigger> نشان داده می‌شوند _در پاسخ به یک رخداد فراخوانی شده_ بیشتر برای ایجاد انیمیشن بکار می‌روند. ما هنوز در مورد انیمیشن‌ها صحبت نکرده‌ایم، با این حال فقط برای اینکه نشان داده باشیم یک ماشه‌ی رخداد چگونه کار می‌کند مثالی می‌زنیم. برای اطلاعات بیشتر به فصلی که در مورد انیمیشن‌هاست مراجعه کنید. مثال:

<Window x:Class="WpfTutorialSamples.Styles.StyleEventTriggerSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="StyleEventTriggerSample" Height="100" Width="300">
    <Grid>
        <TextBlock Name="lblStyled" Text="Hello, styled world!" FontSize="18" HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Style.Triggers>
                        <EventTrigger RoutedEvent="MouseEnter">
                            <EventTrigger.Actions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.300" Storyboard.TargetProperty="FontSize" To="28" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="MouseLeave">
                            <EventTrigger.Actions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:0.800" Storyboard.TargetProperty="FontSize" To="18" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger.Actions>
                        </EventTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </Grid>
</Window>

این نشانه‌گذاری ممکن است تاحدی سخت به نظر آید، اما اگر این کد نمونه را اجرا کنید و به نتایج آن توجه کنید خواهید دید که ما در عمل یک انیمیشن دو سویه‌ی بسیار جذاب را با تقریباً 20 خط XAML پیاده‌سازی می‌کنیم. همانطور که می‌بینید، از یک ماشه‌ی رخداد برای مطلع شدن از وقوع دو رخداد MouseEnter و MouseLeave استفاده می‌کنیم. هنگامی که ماوس وارد می‌شود انیمیشنی روان بر روی FontSize اجرا می‌شود تا مقدار آن را در طول 300 میلی‌ثانیه به 28 برساند. سپس، هنگامی که ماوس خارج می‌شود FontSize را به مقدار 18 برمی‌گردانیم. منتهی این بازگشت را قدری آهسته‌تر انجام می‌دهیم تا انیمیشن جذاب‌تر شود.

خلاصه

استایل‌های WPF ایجاد ظاهری متناسب در تمام برنامه را به سادگی امکان‌پذیر کرده و به کمک ماشه‌ها می‌توان این ظاهر را پویا کرد. استایل‌ها به خودی خود در برنامه فوق‌العاده‌اند اما زمانی که در الگوی کنترل‌ها قرار می‌گیرند اثر حتی بهتری دارند. شما می‌توانید در بخش‌های دیگر این آموختار مطالب بیشتری در این خصوص بیابید.

در بخش بعد نگاهی به ماشه‌های چندگانه (Multi Triggers) می‌اندازیم که به ما اجازه‌ی اعمال استایل‌های مبتنی بر چندین خاصیت را می‌دهند.