【问题标题】:CustomControl Slide Window自定义控件滑动窗口
【发布时间】:2016-08-01 12:38:46
【问题描述】:

由于其他原因,我需要 WPF CustomControl。我的目标是 Slide Window,它具有 IsActive 属性。

如果此属性更改为 true,则幻灯片窗口从左向右滑入。如果此属性从 true 变回,则 SlideWindow 滑出。

此功能运行良好(我通过 XAML 文件中的 triggers 来实现)。我还需要将 visibility 设置为 Visibile(在滑入效果开始之前)或 Collapsed(在滑出效果完成后)。这就是问题所在。


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 Property(请参阅注释代码),但它破坏了整体触发器(不显示动画效果)。

如何实现可见性属性的改变?我需要绑定到其他组件中的Visibility Property

【问题讨论】:

    标签: c# wpf xaml custom-controls


    【解决方案1】:

    解决方案可能是:

    1. 将两个故事板创建为静态资源,并在 BeginStoryboard-Storyboard ({StaticResource SlideIn}) 中引用它们,而不是将它们作为内联子级。

    2. 实现他们的 Completed 事件

    3. 在 Completed-eventhandler 中,当 IsActive = false 时,您将 Visibility 设置为 Collapsed。
    4. 在 FadeIn-click 事件中,您必须在设置 IsActive = true 之前将 Visibility 设置为 Visible。

    这有点不对称,但它适用于我的测试用例。

        <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;
    
        }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2011-10-30
      • 1970-01-01
      • 2014-04-22
      • 1970-01-01
      • 2020-04-26
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多