CustomControl幻灯片窗口

本文关键字：窗口 幻灯片 CustomControl | 更新日期: 2023-09-27 17:59:45

由于其他原因，我需要WPF CustomControl。我的目标是滑动窗口，它具有IsActive属性。

如果此属性更改为true，则"幻灯片窗口"将从左向右滑动。如果此属性从true改回，则SlideWindow将滑出。

此功能运行良好（我通过XAML文件中的触发器来实现此功能）。我还需要将可见性设置为Visibile（滑入效果开始前）或折叠

SlideWindowControl.cs

using System;
using System.Windows;
using System.Windows.Controls;
namespace SlideWindowTest
{
    public class SlideWindowControl : ContentControl
    {
        public static readonly DependencyProperty IsActiveProperty = DependencyProperty.Register(
          "IsActive", typeof(Boolean), typeof(SlideWindowControl), new PropertyMetadata(true));
        static SlideWindowControl()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(SlideWindowControl), new FrameworkPropertyMetadata(typeof(SlideWindowControl)));
        }
        public Boolean IsActive
        {
            get { return (Boolean)GetValue(IsActiveProperty); }
            set { SetValue(IsActiveProperty, value); }
        }
    }
}

SlideWindowControl对应的Generic.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:SlideWindowTest">
    <Style TargetType="{x:Type local:SlideWindowControl}">
        <Setter Property="RenderTransform">
            <Setter.Value>
                <ScaleTransform ScaleX="1"/>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:SlideWindowControl}">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            x:Name="Root">
                        <StackPanel Orientation="Vertical">
                            <Grid Background="Black">
                                <TextBlock Text="HEADER" Foreground="White" Margin="17" FontSize="20pt" />
                            </Grid>
                            <ContentPresenter />
                        </StackPanel>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsActive" Value="True">
                            <!-- Show -->
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <!-- Visibility change cause trouble
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Duration="0" BeginTime="0">
                                            <DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        -->
                                        <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" From="0" Duration="0:00:00.5" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <!-- Hide -->
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" From="1" To="0" Duration="0:00:00.5"/>
                                        <!-- Visibility change cause trouble
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Duration="0" BeginTime="0:00:00.5">
                                            <DiscreteObjectKeyFrame Value="{x:Static Visibility.Collapsed}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        -->
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

MainWindow.xaml中SlideWindowControl的使用示例

<Window x:Class="SlideWindowTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:SlideWindowTest"
        Title="MainWindow" Height="350" Width="525">
    <StackPanel Orientation="Vertical">
        <StackPanel Orientation="Horizontal">
            <Button Content="Slide In" Click="SlideInButton_Click"/> <!-- InMainWindow.xaml.cs set MySlideWindow.IsActive = true; -->
            <Button Content="Slide Out" Click="SlideOutButton_Click" /> <!-- InMainWindow.xaml.cs set MySlideWindow.IsActive = false; -->
        </StackPanel>
        <local:SlideWindowControl x:Name="MySlideWindow">
            <TextBlock FontSize="40pt">Super Content!</TextBlock>
        </local:SlideWindowControl>
    </StackPanel>
</Window>

我尝试在Generic.xaml的触发器中为SlideWindowControl设置Visibility属性（请参阅注释代码中的），但它破坏了整个触发器（没有显示动画效果）。

如何更改可见性属性？我需要绑定到其他组件中的可见性属性。

CustomControl幻灯片窗口

解决方案可以是：

  1. 将这两个情节提要创建为静态资源，并在BeginStoryboard情节提要（｛StaticResource SlideIn｝）中引用它们，而不是将它们作为内联子级。

  2. 实施他们完成的事件

  3. 在Completed事件处理程序中，当IsActive=false时，将Visibility设置为Collapsed
  4. 在淡入淡出单击事件中，必须先将"可见性"设置为"可见"，然后才能将IsActive设置为true

这有点不对称，但它在我的测试用例中有效。

    <Window x:Class="SO38699140.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:SO38699140"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
  <Window.Resources>
    <Storyboard x:Key="SlideIn" Completed="Storyboard_Completed" >
      <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" From="0" Duration="0:00:00.5"  />
    </Storyboard>
    <Storyboard x:Key="SlideOut" Completed="Storyboard_Completed">
      <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX" From="1" To="0" Duration="0:00:00.5" />
    </Storyboard>

    <Style TargetType="{x:Type local:SlideWindowControl}">
      <Setter Property="RenderTransform">
        <Setter.Value>
          <ScaleTransform ScaleX="1"/>
        </Setter.Value>
      </Setter>
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type local:SlideWindowControl}">
            <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            x:Name="Root">
              <StackPanel Orientation="Vertical">
                <Grid Background="Black">
                  <TextBlock Text="HEADER" Foreground="White" Margin="17" FontSize="20pt" />
                </Grid>
                <ContentPresenter />
              </StackPanel>
            </Border>
            <ControlTemplate.Triggers>
              <Trigger Property="IsActive" Value="True">
                <!-- Show -->
                <Trigger.EnterActions>
                  <BeginStoryboard Storyboard="{StaticResource SlideIn}">
                  </BeginStoryboard>
                </Trigger.EnterActions>
                <!-- Hide -->
                <Trigger.ExitActions>
                  <BeginStoryboard Storyboard="{StaticResource SlideOut}">
                  </BeginStoryboard>
                </Trigger.ExitActions>
              </Trigger>
            </ControlTemplate.Triggers>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </Window.Resources>
    <StackPanel Orientation="Vertical">
      <StackPanel Orientation="Horizontal">
        <Button Content="Slide In" Click="SlideInButton_Click"/>
        <!-- InMainWindow.xaml.cs set MySlideWindow.IsActive = true; -->
        <Button Content="Slide Out" Click="SlideOutButton_Click" />
        <!-- InMainWindow.xaml.cs set MySlideWindow.IsActive = false; -->
      <TextBlock Text="{Binding ElementName=MySlideWindow, Path=Visibility}" />
    </StackPanel>
      <local:SlideWindowControl x:Name="MySlideWindow">
        <TextBlock FontSize="40pt">Super Content!</TextBlock>
      </local:SlideWindowControl>
  </StackPanel>
</Window>
        }
    private void SlideInButton_Click(object sender, RoutedEventArgs e)
    {
      MySlideWindow.Visibility = Visibility.Visible;
      MySlideWindow.IsActive = true;
    }
    private void SlideOutButton_Click(object sender, RoutedEventArgs e)
    {
      MySlideWindow.IsActive = false;
    }
    private void Storyboard_Completed(object sender, EventArgs e)
    {
      if (!MySlideWindow.IsActive)
        MySlideWindow.Visibility = Visibility.Collapsed;
    }
相关文章：