باستخدام XAML و WPF، كيف يمكنك تحريك خاصية على النقر، ثم عكس النقرات المتعاقبة

Question

أرغب في معرفة ما إذا كانت هناك طريقة لاستخدام XAML فقط لأداء الرسوم المتحركة على خاصية، ثم انقر فوق نقرة التالية أداء الرسوم المتحركة العكسي؟

إليك عينة من الزناد لدي على كائن حدود لإعطاء مظهر انزلاق خارج:

<!-- Animates the Width to Slide It Out. -->
<EventTrigger RoutedEvent="Border.MouseLeftButtonUp">
  <BeginStoryboard>
     <Storyboard>
        <DoubleAnimation Storyboard.TargetName="theFilterControl"
             Storyboard.TargetProperty="Width"
             From="16"
             To="170"
             Duration="0:0:.7" />
      </Storyboard>
    </BeginStoryboard>
 </EventTrigger>

Answer 1

يمكنك إنشاء عنصر تحكم للحصول على ToggleButton ووضع الحدود فيه. والزر التحكم في زر يمكن أن يوفر لك خاصية متساوية للرسوم المتحركة.

<ToggleButton>
    <ToggleButton.Template>
        <ControlTemplate  TargetType="{x:Type ToggleButton}">
            <Border x:Name="theFilterControl" Background="#FF686868" 
                BorderBrush="Black" Width="16" />
            <ControlTemplate.Triggers>
                <EventTrigger RoutedEvent="ToggleButton.Checked">
                    <BeginStoryboard> 
                    <Storyboard>
                          <DoubleAnimation Storyboard.TargetName="theFilterControl"
                                 Storyboard.TargetProperty="Width"
                                 From="16"
                                 To="170"
                                 Duration="0:0:.7" />
                    </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="ToggleButton.Unchecked">
                    <BeginStoryboard>
                        <Storyboard>
                          <DoubleAnimation Storyboard.TargetName="theFilterControl"
                                 Storyboard.TargetProperty="Width"
                                 From="170"
                                 To="16"
                                 Duration="0:0:.7" />
                          </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </ToggleButton.Template>
</ToggleButton>

Answer 2

فكرة لطيفة على togglebutton من جوبي، شكرا! يمكنك الحصول على مشكلة النطاق أيضا عن طريق تحديد المشغل من أجل TOGGLEBUTTON خارج Controltemplate وداخل منطقة المشغلات UserControl (أو الصفحة)، على سبيل المثال

  <UserControl.Triggers>
    <EventTrigger RoutedEvent="ToggleButton.Checked"
                  SourceName="ExpandCollapseToggleButton">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation 
                        Storyboard.TargetName="SidebarCanvas"
                        Storyboard.TargetProperty="Width"
                        To="0"
                        Duration="0:0:0.15" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
    <EventTrigger RoutedEvent="ToggleButton.Unchecked"
                  SourceName="ExpandCollapseToggleButton">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation 
                        Storyboard.TargetName="SidebarCanvas"
                        Storyboard.TargetProperty="Width"
                        To="250"
                        Duration="0:0:0.15" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
</UserControl.Triggers>

يبدو أن نطاق التحكم في التحكم يختلف تماما عن UserControl / الصفحة حتى لا تتمكن من الرجوع إلى الأهداف بين هذه النطاقات.