Wpf Custom Control: How to implement CustomContent

Question

I'm working on a CustomControl in WPF. I want to Implement a CardControl. I have two Contents "Front" and "Back" and I want to flip between them. But I can't define a Working Trigger in the Style to flip between the contents...

First I created a Custom Control, with 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

Then I defined the Style in Generic.xaml:

And I Implemented a Simple CardControl for Test-Purposes with a Button, which flips the isDetailed state:

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

Any Help is apreciated, I'm stuck...

ASh · Accepted Answer

you can benefit a lot if declare Front and Back with object type, not FrameworkElement - mostly because it will allow easy bidnings. you can keep rich visual appearance if you add corresponding templates for those two properties.

public class Card : Control
{
    static Card()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(Card), new FrameworkPropertyMetadata(typeof(Card)));
    }

    public object Front
    {
        get { return (object)GetValue(FrontProperty); }
        set { SetValue(FrontProperty, value); }
    }

    public static readonly DependencyProperty FrontProperty =
        DependencyProperty.Register("Front", typeof(object), typeof(Card), new PropertyMetadata(null));

    public DataTemplate FrontTemplate
    {
        get { return (DataTemplate)GetValue(FrontTemplateProperty); }
        set { SetValue(FrontTemplateProperty, value); }
    }

    public static readonly DependencyProperty FrontTemplateProperty =
        DependencyProperty.Register("FrontTemplate", typeof(DataTemplate), typeof(Card), new PropertyMetadata(null));

    public object Back
    {
        get { return (object)GetValue(BackProperty); }
        set { SetValue(BackProperty, value); }
    }

    public static readonly DependencyProperty BackProperty =
        DependencyProperty.Register("Back", typeof(object), typeof(Card), new PropertyMetadata(null));

    public DataTemplate BackTemplate
    {
        get { return (DataTemplate)GetValue(BackTemplateProperty); }
        set { SetValue(BackTemplateProperty, value); }
    }

    public static readonly DependencyProperty BackTemplateProperty =
        DependencyProperty.Register("BackTemplate", typeof(DataTemplate), typeof(Card), new PropertyMetadata(null));

    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), new PropertyMetadata(new CornerRadius(0)));
}

Use Trigger on IsDetailed property to flip Fron and Back:

use TemplateBindings inside Template, and RelativeSource TemplatedParent with normal Binding in Setters (TemplateBinding is not supported in Setter).

And here is two examples of usage - with and without binding:

result:

Wpf Custom Control: How to implement CustomContent

Answers (1)

Related Questions