C# WPF DataTrigger用于重新模板化的子控制

C# WPF DataTrigger用于重新模板化的子控制,c#,wpf,xaml,mvvm,datatrigger,C#,Wpf,Xaml,Mvvm,Datatrigger,我在第一个问题的基础上提出了另一个问题,以明确一个扩展的需求@Sheridan用DataTrigger给我指出了正确的方向,但触发器似乎没有启动。。。 总而言之: 我用ControlTemplate重新模板化了Button控件(用ContentPresenter中的彩色矩形和文本块替换经典按钮) 在ControlTemplate.Triggers中,我得到了一个EventTrigger,可以在彩色矩形上启动宽度动画(这是可行的) 正如我所说,在ControlTemplate.Triggers中

我在第一个问题的基础上提出了另一个问题,以明确一个扩展的需求@Sheridan用DataTrigger给我指出了正确的方向,但触发器似乎没有启动。。。 总而言之:

  • 我用ControlTemplate重新模板化了Button控件(用ContentPresenter中的彩色矩形和文本块替换经典按钮)
  • 在ControlTemplate.Triggers中,我得到了一个EventTrigger,可以在彩色矩形上启动宽度动画(这是可行的)
  • 正如我所说,在ControlTemplate.Triggers中,我得到了一个数据触发器绑定到IsActive属性(在ControlTemplate datacontext中定义)以反转宽度动画。这不起作用
下面是我的代码:

MainMenuView.xaml

<UserControl x:Class="OfficeTourismeBrantome.Views.MainMenuView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="800" d:DesignWidth="300">
<UserControl.Resources>
    <Style x:Key="MenuItemButtonStyle" TargetType="Button">
        <Setter Property="FontSize" Value="60" />
        <Setter Property="FontFamily" Value="Segoe" />
        <Setter Property="FontWeight" Value="UltraLight" />
        <Setter Property="Foreground" Value="#FFEBEDEA" />
        <!--<Setter Property="Height" Value="{Binding MenuLayout.MenuItemSize.Height}" />-->
        <Setter Property="HorizontalContentAlignment" Value="Right" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <ControlTemplate.Triggers>
                        <EventTrigger RoutedEvent="Button.Click">
                            <EventTrigger.Actions>
                                <BeginStoryboard>
                                    <Storyboard Name="themeSelectionAnimation">
                                        <DoubleAnimation 
                                            Storyboard.TargetName="coloredRectangle"
                                            Storyboard.TargetProperty="Width"
                                            From="30.0" 
                                            To="250.0" 
                                            Duration="0:0:0.3" />
                                    </Storyboard>
                                </BeginStoryboard>                                    
                            </EventTrigger.Actions>
                        </EventTrigger>
                        <DataTrigger Binding="{Binding IsActive}" Value="False">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation
                                            Storyboard.TargetName="coloredRectangle"            
                                            Storyboard.TargetProperty="Width"
                                            From="250.0" 
                                            To="30.0" 
                                            Duration="0:0:0.3" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                        </DataTrigger>
                    </ControlTemplate.Triggers>
                    <Canvas HorizontalAlignment="Stretch" ClipToBounds="False" >
                        <ContentPresenter Canvas.Left="{Binding MenuLayout.MenuItemLeftMargin}" HorizontalAlignment="Center"                                                  
                                        VerticalAlignment="Center" Canvas.ZIndex="1"/>
                        <TextBlock 
                            Text="{Binding SecondaryText}" 
                            Canvas.Top="50"
                            Canvas.Left="10"
                            FontSize="30"
                            FontWeight="ExtraLight"
                            FontStyle="Italic"
                            Canvas.ZIndex="1"
                            />
                        <Rectangle
                            Canvas.Top="30"
                            Canvas.Left="10"
                            Name="coloredRectangle"
                            Width="30"
                            Height="10"
                            Canvas.ZIndex="0"
                            Fill="{Binding Color}">                                
                        </Rectangle>
                    </Canvas>
                </ControlTemplate>                    
            </Setter.Value>
        </Setter>
    </Style>        
</UserControl.Resources>
<ItemsControl Name="menuButtonContainer" ItemsSource="{Binding Items}" Margin="{Binding MenuLayout.MenuMargin}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Vertical" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>        
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Button 
                Style="{StaticResource ResourceKey=MenuItemButtonStyle}" 
                Margin="{Binding ElementName=menuButtonContainer, 
                                    Path=DataContext.MenuLayout.MenuItemMargin}"                    
                Height="{Binding ElementName=menuButtonContainer, 
                                    Path=DataContext.MenuLayout.MenuItemSize.Height}"
                Content="{Binding Text}"                    
                Command="{Binding ElementName=menuButtonContainer, 
                                    Path=DataContext.ChangeThemeCommand}"
                CommandParameter="{Binding Id}"
                />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

MainMenuViewModel:

 /// <summary>
    /// Menu items list
    /// </summary>
    private ObservableCollection<MenuItem> _items;  

 /// <summary>
    /// Menu items list property
    /// </summary>
    public ObservableCollection<MenuItem> Items
    {
        get { return _items; }
        set { _items = value; }
    }
//
///菜单项列表
/// 
私人可观测收集项目;
/// 
///菜单项列表属性
/// 
公共可观测收集项目
{
获取{return\u items;}
设置{u items=value;}
}
菜单项类:

 /// <summary>
    /// Handle MenuItem activation state
    /// </summary>
    private bool _isActive;
 /// <summary>
    /// Activation property
    /// </summary>
    public bool IsActive
    {
        get { return _isActive; }
        set 
        {
            // Update simultaneously IsAvailable property
            IsAvailable = !value;
            _isActive = value;
            NotifyPropertyChanged("IsActive");
        }
    }
//
///句柄菜单项激活状态
/// 
私人楼宇是活跃的;
/// 
///活化特性
/// 
公共福利活动
{
获取{return\u isActive;}
设置
{
//同时更新IsAvailable属性
IsAvailable=!value;
_i活跃=价值;
NotifyPropertyChanged(“IsActive”);
}
}

非常感谢您的回答或建议

经过深入调查,我终于关注了DataTrigger.entreaction和ExitActions。在我的例子中,这正是在IsActvie属性的两个值上设置动画所需要的。这是一个仅限XAML的解决方案(为了简洁起见,我刚刚放回了触发器部分):