WPF通过Trigger更改UserControl中的ContentTemplate

时间:2014-12-06 00:25:10

标签: c# wpf xaml user-controls

期望

我的控件应显示在Figure 1中。单击标题为“Second”的按钮后,控件的内容将发生变化,如Figure 2所示。在此图中,状态应该再次满足,以便在发送密钥后更改回来输入文本框。

解决方案

我创建了两个DataTemplate。这些DataTemplates应根据属性IsEditable的更改进行更改。默认DataTemplate称为 CompactDataTemplate ,应在值 IsEditable 等于FALSE时使用。 当 IsEditable 变为TRUE时,应使用 EditableDataTemplate

文件 TestUserControl.xaml

<UserControl x:Class="JP4.Controls.TestControl"
         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="26" d:DesignWidth="200" Style="{DynamicResource TestControlStyle}">
<UserControl.Resources>

CompactDataTemplate

<DataTemplate x:Key="CompactDataTemplate" DataType="{x:Type UserControl}">
    <StackPanel Orientation="Horizontal">
        <Button Content="First Button" />
        <Button Content="Second Button" Click="SecondButton_Click" />
    </StackPanel>
</DataTemplate>

EditableDataTemplate

<DataTemplate x:Key="EditableDataTemplate" DataType="{x:Type UserControl}">
    <StackPanel Orientation="Horizontal">
        <TextBox Text="Press enter" />
    </StackPanel>
</DataTemplate>

TestControlStyle 包含在IsEditable已更改的情况下应触发的触发器

<Style x:Key="TestControlStyle" TargetType="{x:Type UserControl}">
        <Setter Property="ContentTemplate" Value="{StaticResource CompactDataTemplate}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type UserControl}">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <DataTrigger Binding="{Binding IsEditable}" Value="true">
                            <Setter Property="ContentTemplate" Value="{StaticResource EditableDataTemplate}" />
                        </DataTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>

            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

</UserControl>

文件 TestUserControl.xaml.cs

using System.ComponentModel;
using System.Windows;
using System.Windows.Controls;

namespace TestControl
{
/// <summary>
/// Interaction logic for TestControl.xaml
/// </summary>
public partial class TestUserControl : UserControl, INotifyPropertyChanged, INotifyPropertyChanging
{
    /// <summary>
    /// Constructors
    /// </summary>
    public TestUserControl()
    {
        InitializeComponent();
    }

    // Properties
    private bool _IsEditable;

    public bool IsEditable
    {
        get { return _IsEditable; }
        set
        {

            _IsEditable = value;
            NotifyPropertyChanged("IsEditable");
        }
    }

    // Controls events
    private void SecondButton_Click(object sender, RoutedEventArgs e)
    {
        IsEditable = true;
    }

    private void TextBox_KeyDown(object sender, System.Windows.Input.KeyEventArgs e)
    {
        if (e.Key == System.Windows.Input.Key.Enter)
            IsEditable = false;
    }

    // INotifyPropertyChanged implementation
    public void NotifyPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
            PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    public void NotifyPropertyChanging(string propertyName)
    {
        if (PropertyChanging != null)
            PropertyChanging.Invoke(this, new PropertyChangingEventArgs(propertyName));
    }

    public event PropertyChangedEventHandler PropertyChanged;

    public event PropertyChangingEventHandler PropertyChanging;


  }
}

MainWindow.xaml

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:TestControl" x:Class="TestControl.MainWindow"
    Title="MainWindow" Height="170" Width="328">
    <Grid>
        <local:TestUserControl HorizontalAlignment="Left" Margin="76,57,0,0" VerticalAlignment="Top" Width="148"/>
    </Grid>
</Window>

最后 MainWindow.xaml.cs

using System.Windows;

namespace TestControl
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }
}
}

希望,现在很清楚,我想要什么。我想更改 UserControl ContentTemplate 。应该通过监视属性 IsEditable 的触发器触发此更改。

问题

IsEditable 属性正在更改,但触发器未触发。问题在哪里?

对不起我以前不清楚的帖子。

所有项目文件都可以从图中相同的位置下载,只需将文件名更改为TestControl.zip(不能发布两个以上的链接)

1 个答案:

答案 0 :(得分:1)

<强>解决!!!

我只是将我的用户控件ContentControl的内容放在

<ContentControl Style="{StaticResource UserControlStyle1}" />

ContentControl的样式如下所示:

<Style x:Key="UserControlStyle1" TargetType="{x:Type ContentControl}">

这是定义的默认模板

        <Setter Property="ContentTemplate" Value="{StaticResource CompactStyle}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ContentControl}">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>

这是一个非常好用的触发器

                    <ControlTemplate.Triggers>
                        <DataTrigger Binding="{Binding IsEditable, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:PathNavigator}}}"  Value="True">
                            <Setter Property="ContentTemplate" PresentationTraceSources.TraceLevel="High" Value="{StaticResource EditableStyle}"  />
                        </DataTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>

            </Setter.Value>
        </Setter>
    </Style>

当然,我从UserControl中删除了该样式