स्केल एक बटन पर XAML में बदलने (एक ControlTemplate में) एक "ज़ूम" प्रदर्शन करने के लिए

Question

मैं इसे में एक छवि के साथ एक बटन मिल गया है और इसके द्वारा निम्नलिखित स्टाइल किया जा रहा है:

<ControlTemplate x:Key="IconButton" TargetType="Button"> 
      <Border> 
       <ContentPresenter Height="80" Width="80" /> 
      </Border> 
      <ControlTemplate.Triggers> 
       <EventTrigger RoutedEvent="Button.Click"> 
        <BeginStoryboard> 
         <Storyboard TargetProperty="Opacity"> 
          <DoubleAnimation From="1" To="0.5" Duration="0:0:0.5" /> 
          <DoubleAnimation From="0.5" To="1" Duration="0:0:0.5" /> 
         </Storyboard> 
        </BeginStoryboard> 
       </EventTrigger> 
       <EventTrigger RoutedEvent="Mouse.MouseEnter"> 
        <BeginStoryboard> 
         <Storyboard TargetProperty="Width"> 
          <DoubleAnimation From="80" To="95" Duration="0:0:0.2" /> 
         </Storyboard> 
        </BeginStoryboard> 
       </EventTrigger> 
       <Trigger Property="IsMouseOver" Value="True"> 
        <Setter Property="Cursor" Value="Hand"/> 
       </Trigger> 
      </ControlTemplate.Triggers> 
     </ControlTemplate> 

बटन के रूप में है निम्नानुसार:

  <Button Template="{StaticResource IconButton}" Name="btnExit"> 
       <Image Source="Images/Exit.png" /> 
      </Button> 

समस्या यह है कि जब मेरा माउस खत्म हो जाता है तो चौड़ाई नहीं बदलती है। (या कम से कम - छवि की चौड़ाई नहीं है ...)

मेरा मानना ​​है कि एक "स्केल" ट्रांसफॉर्म है जिसका उपयोग मैं बटन और उसके सभी सामग्रियों को बड़ा करने के लिए कर सकता हूं? मैं यहाँ कैसे करूँगा ...?

धन्यवाद।

Answer 1

आपका टेम्पलेट बहुत कम प्रतीत होता है लेकिन मुझे लगता है कि आप केवल इसे शुरू कर रहे हैं, हालांकि यह चौड़ाई को एनिमेट करने के विरोध में स्केलट्रांसफॉर्म का उपयोग करने में आपकी सहायता करेगा।

ScaleTransformRenderTransform पर या तो बटन या केवल अपने टेम्पलेट की सीमा के लिए लागू किया जा सकता है। यह TransformGroup हो सकता है यदि आप केवल स्केल से अधिक करना चाहते हैं (यानी एक समग्र परिवर्तन जिसमें अनुवाद, घुमावदार, स्काई जैसे अन्य ट्रैनफॉर्म शामिल हैं) लेकिन इसे सरल रखने के लिए और उदाहरणों के लिए कुछ निम्नलिखित स्केलट्रांसफॉर्म मान लागू होते हैं बटन:

<Button Template="{StaticResource IconButton}" Name="btnExit"> 
    <Button.RenderTransform> 
     <ScaleTransform ScaleX="1.0" ScaleY="1.0"></ScaleTransform> 
    </Button.RenderTransform> 
    <Image Source="Images/Exit.png" /> 
</Button> 

या इस ControlTemplate की सीमा को लागू करने के लिए:

<ControlTemplate x:Key="IconButton" TargetType="Button"> 
    <Border Background="Blue" x:Name="render"> 
     <Border.RenderTransform> 
      <ScaleTransform ScaleX="1.0" ScaleY="1.0"></ScaleTransform> 
     </Border.RenderTransform> 
     <ContentPresenter Height="80" Width="80" /> 
    </Border> 
    ... 
    ... 

इसके बाद आप उस संपत्ति को लक्ष्य बनाएं और चौड़ाई के लिए आप लक्षित करना चाहते जाएगा अपने mouseenter ट्रिगर बदलना चाहते हैं जाएगा स्केलट्रांसफॉर्म की स्केलएक्स संपत्ति। निम्नलिखित स्टोरीबोर्ड एक्स दिशा में बटन 2.5 बार स्केल करेगा (TargetName="render"<Storyboard... जोड़ें यदि आपने बटन के विपरीत सीमा में ट्रांसफॉर्म लागू करना चुना है)।

<EventTrigger RoutedEvent="Mouse.MouseEnter"> 
    <BeginStoryboard> 
     <Storyboard TargetProperty="RenderTransform.ScaleX"> 
      <DoubleAnimation To="2.5" Duration="0:0:0.2" /> 
     </Storyboard> 
    </BeginStoryboard> 
</EventTrigger> 

आप रूपांतरण के एक नंबर के साथ एक TransformGroup उपयोग किया है तो आप RenderTransform.(TransformGroup.Children)[0].ScaleX की तरह कुछ करने के लिए TargetProperty मूल्य बदल जाएगा ScaleTransform संभालने समूह का पहला बच्चा है।

यह आप और आप क्या जरूरत है और आप इसे लेने के लिए आप जहां से चाहते हैं कर सकते हैं के साथ चल मिलना चाहिए ...

HTH