Wpf自定义控件：如何实现CustomContent

Question

我正在使用WPF中的CustomControl。我想实现CardControl。我有两个目录“ Front”和“ Back”，我想在它们之间翻转。但是我无法在样式中定义工作触发器来在内容之间进行切换...

首先，我创建了一个具有DependencyProperties的自定义控件：

public class Card : Control {

        #region initializer

        static Card() {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(Card), new FrameworkPropertyMetadata(typeof(Card)));
        }

        #endregion

        #region dependencyProperties

        public FrameworkElement CustomContent {
            get { return (FrameworkElement)GetValue(CustomContentProperty); }
            set { SetValue(CustomContentProperty, value); }
        }
        public static DependencyProperty CustomContentProperty =
            DependencyProperty.Register(nameof(CustomContent), typeof(FrameworkElement), typeof(Card), new PropertyMetadata());

        public FrameworkElement Front {
            get { return (FrameworkElement)GetValue(FrontProperty); }
            set { SetValue(FrontProperty, value); }
        }
        public static DependencyProperty FrontProperty =
            DependencyProperty.Register(nameof(Front), typeof(FrameworkElement), typeof(Card), new PropertyMetadata());

        public FrameworkElement Back {
            get { return (FrameworkElement)GetValue(BackProperty); }
            set { SetValue(BackProperty, value); }
        }
        public static DependencyProperty BackProperty =
            DependencyProperty.Register(nameof(Back), typeof(FrameworkElement), typeof(Card), new PropertyMetadata());



        public bool isDetailed {
            get { return (bool)GetValue(isDetailedProperty); }
            set { SetValue(isDetailedProperty, value); }
        }
        public static readonly DependencyProperty isDetailedProperty =
            DependencyProperty.Register(nameof(isDetailed), typeof(bool), typeof(Card), new PropertyMetadata(false));



        public CornerRadius CornerRadius {
            get { return (CornerRadius)GetValue(CornerRadiusProperty); }
            set { SetValue(CornerRadiusProperty, value); }
        }
        public static readonly DependencyProperty CornerRadiusProperty =
            DependencyProperty.Register(nameof(CornerRadius), typeof(CornerRadius), typeof(Card));

        #endregion

然后我在Generic.xaml中定义了样式：

<Style TargetType="{x:Type local:Card}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:Card}">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="{TemplateBinding CornerRadius}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"
                                          Content="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:Card}}, Path=CustomContent, 
                                            Converter={StaticResource Debugger}, UpdateSourceTrigger=PropertyChanged}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource 
                                        AncestorType={x:Type local:Card}}, 
                                        Path=isDetailed, 
                                        Converter={StaticResource Debugger}}" 
                                     Value="True">
                            <Setter Property="CustomContent" 
                                    Value="{Binding RelativeSource={RelativeSource 
                                        AncestorType={x:Type local:Card}}, 
                                        Path=Back}"/>
                        </DataTrigger>

                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource 
                                        AncestorType={x:Type local:Card}}, 
                                        Path=isDetailed}" 
                                     Value="False">

                            <Setter Property="CustomContent" 
                                    Value="{Binding RelativeSource={RelativeSource 
                                        AncestorType={x:Type local:Card}}, 
                                        Path=Front}"/>
                        </DataTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

并且我用一个按钮实现了一个用于测试目的的简单CardControl，该按钮翻转了isDetailed状态：

<StackPanel>
    <CustomCharts:Card Name="TestCard">
        <CustomCharts:Card.CustomContent>
            <TextBlock Text="Hello World!"/>
        </CustomCharts:Card.CustomContent>
        <CustomCharts:Card.Front>
            <TextBlock Text="Wow vordere sache!"/>
        </CustomCharts:Card.Front>
        <CustomCharts:Card.Back>
            <TextBlock Text="Wow hintere sache!"/>
        </CustomCharts:Card.Back>
    </CustomCharts:Card>

    <Button Click="Button_Click" Width="50" Height="20" Content="Test"/>
</StackPanel>

private void Button_Click( object sender, RoutedEventArgs e ) {
    this.TestCard.isDetailed = !this.TestCard.isDetailed;
}

任何帮助都很高兴，我被困住了...

Answer 1

1）设计问题。对属性使用大写命名。

public bool IsDetailed {
    get { return (bool)GetValue(IsDetailedProperty); }
    set { SetValue(IsDetailedProperty, value); }
}
public static readonly DependencyProperty IsDetailedProperty =
    DependencyProperty.Register(nameof(IsDetailed), typeof(bool), typeof(Card), new PropertyMetadata(false));

2）要绑定DepencyProperty中的ControlTemplate，请使用TemplateBinding而不是Binding，因为您没有与模板相关的控件专用的DataContext。

<DataTrigger Binding="{TemplateBinding IsDetailed}" Value="True">