ट्रिगर, डेटाट्रिगर और इवेंटट्रिगर

अब तक, हमने एक विशिष्ट प्रॉपर्टी के लिए एक स्टेटिक मान रख कर स्टाइल्स पर काम किया। हालांकि, एक बार शर्त बदलने पर, ट्रिगर्स का उपयोग करके आप एक प्रॉपर्टी का मान बदल सकते हैं। ट्रिगर्स कईं फ्लेवर्स में आते हैं: प्रॉपर्टी ट्रिगर्स, इवेंट ट्रिगर्स और डेटा ट्रिगर्स। वे आपको वह चीज़ें पूरी तरह से मार्कअप में करने देते हैं जो की सामान्य रूप से code-behind में की जाती हैं, जो स्टाइल और कोड को अलग करने की चल रही प्रक्रिया का एक हिस्सा है।

प्रॉपर्टी ट्रिगर

सबसे आम ट्रिगर है प्रॉपर्टी ट्रिगर, जो मार्कअप में केवल एक <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>

इस स्टाइल में, इसे hyperlink दिखाने के लिए, हम Foreground प्रॉपर्टी को नीले पर सेट करते हैं। फिर हम एक ट्रिगर जोड़ते हैं, जो की IsMouseOver प्रॉपर्टी को सुनता हो - एक बार यह प्रॉपर्टी True में बदल जाए, तो हम 2 सेटर्स लागू करते हैं: हम Foreground को लाल में बदलते हैं और फिर इसे रेखांकित करते हैं। डिज़ाइन में परिवर्तन लागू करने के लिए ट्रिगर्स को उपयोग करना कितना आसान है इसका यह एक बहुत बढ़िया उदाहरण है, पूरी तरह से बिना किसी code-behind कोड के।

हम इस विशिष्ट टेक्सटब्लॉक के लिए एक लोकल स्टाइल निर्धारित करते हैं, लेकिन पिछले लेख में जैसा बताया गया, स्टाइल को ग्लोबली भी निर्धारित किया जा सकता था, यदि हम चाहते की यह ऍप्लिकेशन में सभी टेक्स्टब्लॉक कंट्रोल में लागू हो।

डेटा ट्रिगर्स

डेटा ट्रिगर्स, <DataTrigger> एलिमेंट द्वारा दर्शाये जाने वाले, उन प्रॉपर्टीज के लिए उपयोग होता है जो की ज़रूरी तौर पर डिपेंडेंसी प्रॉपर्टीज न हों। यह एक रेगुलर प्रॉपर्टी से जुड़कर कार्य करती हैं, जिस पर फिर परिवर्तनों के लिए नज़र रखी जाती है। यह आपके ट्रिगर को किसी अन्य प्रॉपर्टी पर जोड़ने के लिए भी होता है। उदाहरण के लिए, निम्नलिखित उदाहरण पर विचार कीजिये:

<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 का उपयोग कर, हम टेक्सटब्लॉक को चेकबॉक्स की IsChecked प्रॉपर्टी से जोड़ते हैं। फिर हम एक डिफ़ॉल्ट स्टाइल सप्लाई करते हैं, जहाँ टेक्स्ट "No" हो और अग्र-भाग का रंग लाल हो, फिर, एक डेटाट्रिगर का उपयोग करके, जब चेकबॉक्स की इसचेक्ड प्रॉपर्टी ट्रू पर बदले तब के लिए एक स्टाइल सप्लाई करते हैं, जिस स्थिति में हम इसे एक टेक्स्ट के साथ हरा कर देते हैं। "यस!" कहना (जैसा की स्क्रीनशॉट पर देखा गया)।

इवेंट ट्रिगर्स

इवेंट ट्रिगर्स, <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>

मार्कअप थोड़ा भारी लग सकता है, लेकिन यदि आप इस नमूने को चलाए और नतीजा देखें तो, तो आप देखेंगे कि हमने एक काफ़ी बढ़िया एनीमेशन पूरा कर लिया है, दोनों तरफ जाते हुए, XAML की ~20 लाइनों में। जैसा की आप देख सकते हैं, मैं एक इवेंटट्रिगर का उपयोग करके 2 इवेंट्स से सब्सक्राइब करता हूँ: MouseEnter और MouseLeave। जब माउस एंटर होता है, मैं 300 मिलीसेकंड में 28 पिक्सल के फ़ॉन्ट साइज़ में एक स्मूथ और एनिमेटेड ट्रांजीशन करता हूं। जब माउस लीव करता है, मैं फ़ॉन्ट साइज़ को फिर से 18 में बदल देता हूँ लेकिन यह थोड़ा धीरे से करता हूँ, ताकि यह बढ़िया लगे।

सार

WPF स्टाइल्स कंसिस्टेंट लुक पाने को आसान बनाता है, और ट्रिगर्स के साथ, यह लुक डायनामिक बन जाता है। स्टाइल्स आपकी ऍप्लिकेशन में बढ़िया है, लेकिन यह और भी बेहतर होती हैं जब कंट्रोल टेम्पलेट आदि में उपयोग होती हैं। आप उसके बारे में इस ट्यूटोरियल में किसी और जगह अधिक पढ़ सकते हैं।

अगले लेख में, हम जानेगे मल्टी ट्रिगर्स, जो की हमें कई प्रॉपर्टीज के आधार पर स्टाइल्स लागू करने देता है।