[WPF] how to create custom control that have multiple state, each state is completely different from others

Trọng Tín Võ 20

Hello experts! Please help me on creating custom control with multiple appearances, each appearance is complete different from others (each appearance combining of different components, not just slightly change of style).

I'm making a custom control called BudgetCircleControl, that display a circle and an arc, that present the current value with max value of budget. Let me describe what I currently have.

The code is so long that I put it in a github repository, please take a look:
https://github.com/bananaback/LearnHowToMakeCustomControl
I created BudgetCircleControl that implement Control, define my custom control style in BudgetCircleControl.xaml, it all in Components folder.

This works fine but when I want to have some improvements like when CurrentValue exceed MaxValue, don't show the circle anymore, show text and other things to warning. I tried to use VisualStateManager but it just good for slightly change in style in my opinion. In my case I need complex combination of components, completely different. I try to implement something like ControlTemplate, DataTemplate to dynamically switch template in code, I also try ControlTemplate Trigger but that didn't work and really messy so I think I shouldn't put it here. I need your help. Please show me how to achieve that please, create custom control with different appearances depend on some property. Thank you so much.

Viorel 118.9K Reputation points

2023-12-26T09:12:03.6533333+00:00

In principle, the child controls and user controls can be manipulated programmatically.
Hui Liu-MSFT 48,596 Reputation points Microsoft Vendor

2023-12-26T09:20:29.54+00:00
Hi,@Trọng Tín Võ. Welcome to Microsoft Q&A. Could you share the code of your control where CurrentValue exceeds MaxValue?

When I update the code as below, it also works fine.

<components:BudgetCircleControl Grid.Row="4" CenterX="150" CenterY="150" Radius="150" ArcThickness="10" CurrentValue="151" MaxValue="100">

The result:

Can you share a screenshot or GIF of the results of your question and more details of your requirement?

Trọng Tín Võ 20

Thank you for your response. I edited the BudgetCircleControl.xaml file to look like this:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:converters="clr-namespace:LearnHowToMakeCustomControl.Converters"
                    xmlns:local="clr-namespace:LearnHowToMakeCustomControl.Components">
    <converters:PointMultiConverter x:Key="PointMultiConverter" />
    <converters:RadiusToSizeConverter x:Key="RadiusToSizeConverter" />

    <ControlTemplate x:Key="NormalTemplate"
                     TargetType="local:BudgetCircleControl">
        <Grid x:Name="PART_CustomControlGrid">
            <!-- Full Circle EllipseGeometry -->
            <Path Stroke="Gray"
                  StrokeThickness="{Binding ArcThickness, RelativeSource={RelativeSource TemplatedParent}}">
                <Path.Data>
                    <EllipseGeometry>
                        <EllipseGeometry.Center>
                            <MultiBinding Converter="{StaticResource PointMultiConverter}">
                                <Binding Path="CenterX"
                                         RelativeSource="{RelativeSource TemplatedParent}" />
                                <Binding Path="CenterY"
                                         RelativeSource="{RelativeSource TemplatedParent}" />
                                <Binding Path="ArcThickness"
                                         RelativeSource="{RelativeSource TemplatedParent}" />
                            </MultiBinding>
                        </EllipseGeometry.Center>
                        <EllipseGeometry.RadiusX>
                            <Binding Path="Radius"
                                     RelativeSource="{RelativeSource TemplatedParent}" />
                        </EllipseGeometry.RadiusX>
                        <EllipseGeometry.RadiusY>
                            <Binding Path="Radius"
                                     RelativeSource="{RelativeSource TemplatedParent}" />
                        </EllipseGeometry.RadiusY>
                    </EllipseGeometry>
                </Path.Data>
            </Path>
            <!-- Define the arc representing the current value -->
            <Path x:Name="MyArc"
                  Stroke="Green">

            </Path>

            <!-- Canvas for aligning the TextBlock -->

            <TextBlock Text="{Binding PercentageValue, RelativeSource={RelativeSource TemplatedParent}}"
                       VerticalAlignment="Center"
                       HorizontalAlignment="Center"
                       FontSize="20"
                       Foreground="Black" />

        </Grid>
    </ControlTemplate>

    <ControlTemplate x:Key="WarningTemplate"
                     TargetType="local:BudgetCircleControl">
        <Grid>
            <TextBlock Text="Budget limit exceed!"/>
            <Button Content="View expenses details"></Button>
            <!--Some more UI component I would add soon-->
        </Grid>
    </ControlTemplate>

    <Style TargetType="local:BudgetCircleControl">
        <Setter Property="Template"
                Value="{StaticResource NormalTemplate}" />
    </Style>
</ResourceDictionary>

I changed the structure of my control UI to this to switching template programmatically
I also remove the animation in HomeView, so that file look like this:

<UserControl x:Class="LearnHowToMakeCustomControl.Views.HomeView"
             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" 
             xmlns:local="clr-namespace:LearnHowToMakeCustomControl.Views"
             xmlns:components="clr-namespace:LearnHowToMakeCustomControl.Components"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <components:BudgetCircleControl Grid.Row="4"
                                        CenterX="50"
                                        CenterY="50"
                                        Radius="50"
                                        ArcThickness="10"
                                        CurrentValue="151"
                                        MaxValue="100">
            
        </components:BudgetCircleControl>
    </Grid>
</UserControl>

Note that current value is > max value.
I set the default template to NormalTemplate and it still fine. But then, I adding some logic in BudgetCircleControl.cs to switch template:

using LearnHowToMakeCustomControl.Converters;
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Media;
using System.Windows.Shapes;

namespace LearnHowToMakeCustomControl.Components
{
    public class BudgetCircleControl : Control
    {
        private Grid customControlGrid;
        private Path myArc;
        static BudgetCircleControl()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(BudgetCircleControl), new FrameworkPropertyMetadata(typeof(BudgetCircleControl)));
        }

        public BudgetCircleControl()
        {
            ApplyTemplate();
            InitializeBindings();
        }

        private void ApplyTemplate()
        {
            if (CurrentValue > MaxValue)
            {
                // Apply WarningTemplate
                Template = FindResource("WarningTemplate") as ControlTemplate;
            }
            else
            {
                // Apply NormalTemplate
                Template = FindResource("NormalTemplate") as ControlTemplate;
            }
        }

        private void InitializeBindings()
        {


        }

        public static readonly DependencyProperty ArcThicknessProperty =
            DependencyProperty.Register("ArcThickness", typeof(double), typeof(BudgetCircleControl),
                new FrameworkPropertyMetadata(10.0, FrameworkPropertyMetadataOptions.AffectsRender));

        public double ArcThickness
        {
            get => (double)(GetValue(ArcThicknessProperty));
            set => SetValue(ArcThicknessProperty, value);
        }

        public static readonly DependencyProperty CenterXProperty =
        DependencyProperty.Register("CenterX", typeof(double), typeof(BudgetCircleControl),
            new FrameworkPropertyMetadata(0.0, FrameworkPropertyMetadataOptions.AffectsRender));

        public double CenterX
        {
            get => (double)GetValue(CenterXProperty) + ArcThickness / 2;
            set => SetValue(CenterXProperty, value + ArcThickness / 2);
        }

        public static readonly DependencyProperty CenterYProperty =
        DependencyProperty.Register("CenterY", typeof(double), typeof(BudgetCircleControl),
            new FrameworkPropertyMetadata(0.0, FrameworkPropertyMetadataOptions.AffectsRender));
        public double CenterY
        {
            get => (double)GetValue(CenterYProperty) + ArcThickness / 2;
            set => SetValue(CenterYProperty, value + ArcThickness / 2);
        }

        public static readonly DependencyProperty StartAngleProperty =
            DependencyProperty.Register("StartAngle", typeof(double), typeof(BudgetCircleControl),
                new FrameworkPropertyMetadata(0.0, FrameworkPropertyMetadataOptions.AffectsRender));

        public double StartAngle
        {
            get => (double)GetValue(StartAngleProperty);
            set => SetValue(StartAngleProperty, value);
        }


        public static readonly DependencyProperty RadiusProperty =
            DependencyProperty.Register("Radius", typeof(double), typeof(BudgetCircleControl),
                new FrameworkPropertyMetadata(10.0, FrameworkPropertyMetadataOptions.AffectsRender));

        public double Radius
        {
            get => (double)(GetValue(RadiusProperty));
            set => SetValue(RadiusProperty, value);
        }

        public static readonly DependencyProperty LargeAngleProperty =
            DependencyProperty.Register("LargeAngle", typeof(bool), typeof(BudgetCircleControl),
                new FrameworkPropertyMetadata(true, FrameworkPropertyMetadataOptions.AffectsRender));

        public bool LargeAngle
        {
            get => (bool)(GetValue(LargeAngleProperty));
            set => SetValue(LargeAngleProperty, value);
        }

        public static readonly DependencyProperty CurrentValueProperty =
            DependencyProperty.Register("CurrentValue", typeof(double), typeof(BudgetCircleControl),
                new FrameworkPropertyMetadata(0.0, FrameworkPropertyMetadataOptions.AffectsRender));

        public double CurrentValue
        {
            get => (double)(GetValue(CurrentValueProperty));
            set => SetValue(CurrentValueProperty, value);
        }

        public static readonly DependencyProperty MaxValueProperty =
            DependencyProperty.Register("MaxValue", typeof(double), typeof(BudgetCircleControl),
                new FrameworkPropertyMetadata(0.0, FrameworkPropertyMetadataOptions.AffectsRender));

        public double MaxValue
        {
            get => (double)(GetValue(MaxValueProperty));
            set => SetValue(MaxValueProperty, value);
        }

        public static readonly DependencyProperty StartPointProperty =
        DependencyProperty.Register("StartPoint", typeof(Point), typeof(BudgetCircleControl),
            new FrameworkPropertyMetadata(new Point(0, 0), FrameworkPropertyMetadataOptions.AffectsRender));

        public Point StartPoint
        {
            get => (Point)GetValue(StartPointProperty);
            set => SetValue(StartPointProperty, value);
        }

        public static readonly DependencyProperty EndPointProperty =
            DependencyProperty.Register("EndPoint", typeof(Point), typeof(BudgetCircleControl),
                new FrameworkPropertyMetadata(new Point(0, 0), FrameworkPropertyMetadataOptions.AffectsRender));

        public Point EndPoint
        {
            get => (Point)GetValue(EndPointProperty);
            set => SetValue(EndPointProperty, value);
        }

        public static readonly DependencyProperty RadiusSizeProperty =
            DependencyProperty.Register("RadiusSize", typeof(Size), typeof(BudgetCircleControl),
                new FrameworkPropertyMetadata(new Size(10, 10), FrameworkPropertyMetadataOptions.AffectsRender));

        public Size RadiusSize
        {
            get => (Size)GetValue(RadiusSizeProperty);
            set => SetValue(RadiusSizeProperty, value);
        }

        public static readonly DependencyProperty PercentageValueProperty =
        DependencyProperty.Register("PercentageValue", typeof(string), typeof(BudgetCircleControl),
            new FrameworkPropertyMetadata("0%"));

        public string PercentageValue
        {
            get => (string)GetValue(PercentageValueProperty);
            set => SetValue(PercentageValueProperty, value);
        }

        public bool IsMaxValueReached => CurrentValue >= MaxValue;


        private Point CalculatePointForValue(double value)
        {
            double percentage = (value / MaxValue) * 360;

            if (percentage == 360)
            {
                percentage = 359.99;
            }

            double angle = (percentage + 90) * (Math.PI / 180); // Convert to radians

            double x = CenterX + Radius * Math.Cos(-angle);
            double y = CenterY + Radius * Math.Sin(-angle);
            return new Point(x, y);
        }

        // Calculating start and end points based on provided properties
        private void CalculatePoints()
        {
            StartPoint = CalculatePointForValue(0);
            EndPoint = CalculatePointForValue(CurrentValue);
            RadiusSize = new Size(Radius, Radius);
        }

        protected override void OnPropertyChanged(DependencyPropertyChangedEventArgs e)
        {
            if (e.Property == CurrentValueProperty || e.Property == MaxValueProperty ||
                e.Property == CenterXProperty || e.Property == CenterYProperty ||
                e.Property == RadiusProperty || e.Property == LargeAngleProperty)
            {
                CalculatePoints();
                LargeAngle = ((CurrentValue / MaxValue) * 100 > 50);
                PercentageValue = ((int)((CurrentValue / MaxValue) * 100)).ToString() + "%";
            }
            UpdateArcSegment();

            base.OnPropertyChanged(e);
        }

        public override void OnApplyTemplate()
        {
            customControlGrid = Template.FindName("PART_CustomControlGrid", this) as Grid;
            myArc = Template.FindName("MyArc", this) as Path;

            var radiusToSizeConverter = new RadiusToSizeConverter();

            var gridWidthBinding = new MultiBinding();
            gridWidthBinding.Converter = radiusToSizeConverter;
            gridWidthBinding.Bindings.Add(new Binding
            {
                Path = new PropertyPath(nameof(Radius)),
                Source = this,
            });
            gridWidthBinding.Bindings.Add(new Binding
            {
                Path = new PropertyPath(nameof(ArcThickness)),
                Source = this,
            });

            var gridHeightBinding = new MultiBinding();
            gridHeightBinding.Converter = radiusToSizeConverter;
            gridHeightBinding.Bindings.Add(new Binding
            {
                Path = new PropertyPath(nameof(Radius)),
                Source = this,
            });
            gridHeightBinding.Bindings.Add(new Binding
            {
                Path = new PropertyPath(nameof(ArcThickness)),
                Source = this,
            });

            customControlGrid.SetBinding(WidthProperty, gridWidthBinding);
            customControlGrid.SetBinding(HeightProperty, gridHeightBinding);

            var arcStrokeBinding = new Binding
            {
                Path = new PropertyPath(nameof(ArcThickness)),
                Source = this,
            };

            myArc.SetBinding(Path.StrokeThicknessProperty, arcStrokeBinding);

            UpdateArcSegment(); // Create or update the ArcSegment




            CalculatePoints();
            LargeAngle = ((CurrentValue / MaxValue) * 100 > 50);
            PercentageValue = ((int)((CurrentValue / MaxValue) * 100)).ToString() + "%";
            base.OnApplyTemplate();
        }

        private void UpdateArcSegment()
        {
            var myArcPath = GetTemplateChild("MyArc") as Path;

            if (myArcPath != null)
            {
                // Create the PathGeometry, PathFigure, and ArcSegment
                PathGeometry pathGeometry = new PathGeometry();
                PathFigure pathFigure = new PathFigure();
                ArcSegment arcSegment = new ArcSegment();

                // Set the properties of the ArcSegment
                arcSegment.Point = EndPoint; // Use your EndPoint property here
                arcSegment.Size = RadiusSize; // Use your RadiusSize property here
                arcSegment.SweepDirection = SweepDirection.Counterclockwise; // Or your desired SweepDirection
                arcSegment.IsLargeArc = LargeAngle; // Use your LargeAngle property here

                // Set the StartPoint in PathFigure (should be set based on your logic)
                pathFigure.StartPoint = StartPoint; // Use your StartPoint property here

                // Add the ArcSegment to the PathFigure
                pathFigure.Segments.Add(arcSegment);

                // Add the PathFigure to the PathGeometry
                pathGeometry.Figures.Add(pathFigure);

                // Apply the created PathGeometry to the MyArc Path
                myArcPath.Data = pathGeometry;
            }
        }

    }
}

Other code remain the same, I just add ApplyTemplate() method to choose the template depend on CurrentValue, and I call it in the constructor

I put breakpoint and see CurrentValue = 0, MaxValue = 0, it invoke the else, and throw exception that

System.Windows.ResourceReferenceKeyNotFoundException
  HResult=0x80131509
  Message='NormalTemplate' resource not found.
  Source=PresentationFramework
  StackTrace:
   at MS.Internal.Helper.FindResourceHelper.DoTryCatchWhen(Object arg)
   at System.Windows.Threading.ExceptionWrapper.InternalRealCall(Delegate callback, Object args, Int32 numArgs)
   at System.Windows.Threading.ExceptionWrapper.TryCatchWhen(Object source, Delegate callback, Object args, Int32 numArgs, Delegate catchHandler)
   at System.Windows.Threading.Dispatcher.WrappedInvoke(Delegate callback, Object args, Int32 numArgs, Delegate catchHandler)
   at MS.Internal.Helper.FindResourceHelper.TryCatchWhen()
   at System.Windows.FrameworkElement.FindResource(Object resourceKey)
   at LearnHowToMakeCustomControl.Components.BudgetCircleControl.ApplyTemplate() in D:\.NET_related\LearnHowToMakeCustomControl\Components\BudgetCircleControl.cs:line 36
   at LearnHowToMakeCustomControl.Components.BudgetCircleControl..ctor() in D:\.NET_related\LearnHowToMakeCustomControl\Components\BudgetCircleControl.cs:line 22
   at System.RuntimeType.CreateInstanceDefaultCtor(Boolean publicOnly, Boolean wrapExceptions)

I think the ApplyTemplate method is called before the UI init so it result to this behavior. Please help me fix this. Also, does my approach reasonable? If have some better way, please teach me. I want to do thing with the ways that experts recommended.
My requirements is making a custom control then I could use it by pass some value like:

<components:BudgetCircleControl Grid.Row="4"                                        
CenterX="50"                                        
CenterY="50"                                        
Radius="50"                                        
ArcThickness="10"                                        
CurrentValue="151"                                        
MaxValue="100">                    
</components:BudgetCircleControl>

And I don't need to care about the appearance switch logic, let the custom control handle it inside. Just use the custom control inside my user control, my view,... My current problem is handle the switching appearance logic inside my custom control as I just mentioned. Thank you so much.

Trọng Tín Võ 20

In HomeView.xaml, I remove the animation

<UserControl x:Class="LearnHowToMakeCustomControl.Views.HomeView"
             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" 
             xmlns:local="clr-namespace:LearnHowToMakeCustomControl.Views"
             xmlns:components="clr-namespace:LearnHowToMakeCustomControl.Components"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <components:BudgetCircleControl Grid.Row="4"
                                        CenterX="50"
                                        CenterY="50"
                                        Radius="50"
                                        ArcThickness="10"
                                        CurrentValue="51"
                                        MaxValue="100">
            
        </components:BudgetCircleControl>
    </Grid>
</UserControl>

then I refactor BudgetCircleControl like this:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:converters="clr-namespace:LearnHowToMakeCustomControl.Converters"
                    xmlns:local="clr-namespace:LearnHowToMakeCustomControl.Components">
    <converters:PointMultiConverter x:Key="PointMultiConverter" />
    <converters:RadiusToSizeConverter x:Key="RadiusToSizeConverter" />

    <ControlTemplate x:Key="NormalTemplate"
                     TargetType="local:BudgetCircleControl">
        <Grid x:Name="PART_CustomControlGrid">
            <!-- Full Circle EllipseGeometry -->
            <Path Stroke="Gray"
                  StrokeThickness="{Binding ArcThickness, RelativeSource={RelativeSource TemplatedParent}}">
                <Path.Data>
                    <EllipseGeometry>
                        <EllipseGeometry.Center>
                            <MultiBinding Converter="{StaticResource PointMultiConverter}">
                                <Binding Path="CenterX"
                                         RelativeSource="{RelativeSource TemplatedParent}" />
                                <Binding Path="CenterY"
                                         RelativeSource="{RelativeSource TemplatedParent}" />
                                <Binding Path="ArcThickness"
                                         RelativeSource="{RelativeSource TemplatedParent}" />
                            </MultiBinding>
                        </EllipseGeometry.Center>
                        <EllipseGeometry.RadiusX>
                            <Binding Path="Radius"
                                     RelativeSource="{RelativeSource TemplatedParent}" />
                        </EllipseGeometry.RadiusX>
                        <EllipseGeometry.RadiusY>
                            <Binding Path="Radius"
                                     RelativeSource="{RelativeSource TemplatedParent}" />
                        </EllipseGeometry.RadiusY>
                    </EllipseGeometry>
                </Path.Data>
            </Path>
            <!-- Define the arc representing the current value -->
            <Path x:Name="MyArc"
                  Stroke="Green">

            </Path>

            <!-- Canvas for aligning the TextBlock -->

            <TextBlock Text="{Binding PercentageValue, RelativeSource={RelativeSource TemplatedParent}}"
                       VerticalAlignment="Center"
                       HorizontalAlignment="Center"
                       FontSize="20"
                       Foreground="Black" />

        </Grid>
    </ControlTemplate>

    <ControlTemplate x:Key="WarningTemplate"
                     TargetType="local:BudgetCircleControl">
        <Grid>
            <TextBlock Text="Budget limit exceed!"/>
            <Button Content="View expenses details"></Button>
            <!--Some more UI component I would add soon-->
        </Grid>
    </ControlTemplate>

    <Style TargetType="local:BudgetCircleControl">
        <Setter Property="Template"
                Value="{StaticResource NormalTemplate}" />
    </Style>
</ResourceDictionary>

I define two control templates, and set normal template as default

using LearnHowToMakeCustomControl.Converters;
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Media;
using System.Windows.Shapes;

namespace LearnHowToMakeCustomControl.Components
{
    public class BudgetCircleControl : Control
    {
        private Grid customControlGrid;
        private Path myArc;
        static BudgetCircleControl()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(BudgetCircleControl), new FrameworkPropertyMetadata(typeof(BudgetCircleControl)));
        }

        public BudgetCircleControl()
        {
            InitializeBindings();
        }

        private void OnControlLoaded(object sender, RoutedEventArgs e)
        {
            ApplyTemplate();
        }

        private void ApplyTemplate()
        {
            if (CurrentValue > MaxValue)
            {
                // Apply WarningTemplate
                Template = this.FindResource("WarningTemplate") as ControlTemplate;
            }
            else
            {
                // Apply NormalTemplate
                Template = this.FindResource("NormalTemplate") as ControlTemplate;
            }
        }

        private void InitializeBindings()
        {


        }

        public static readonly DependencyProperty ArcThicknessProperty =
            DependencyProperty.Register("ArcThickness", typeof(double), typeof(BudgetCircleControl),
                new FrameworkPropertyMetadata(10.0, FrameworkPropertyMetadataOptions.AffectsRender));

        public double ArcThickness
        {
            get => (double)(GetValue(ArcThicknessProperty));
            set => SetValue(ArcThicknessProperty, value);
        }

        public static readonly DependencyProperty CenterXProperty =
        DependencyProperty.Register("CenterX", typeof(double), typeof(BudgetCircleControl),
            new FrameworkPropertyMetadata(0.0, FrameworkPropertyMetadataOptions.AffectsRender));

        public double CenterX
        {
            get => (double)GetValue(CenterXProperty) + ArcThickness / 2;
            set => SetValue(CenterXProperty, value + ArcThickness / 2);
        }

        public static readonly DependencyProperty CenterYProperty =
        DependencyProperty.Register("CenterY", typeof(double), typeof(BudgetCircleControl),
            new FrameworkPropertyMetadata(0.0, FrameworkPropertyMetadataOptions.AffectsRender));
        public double CenterY
        {
            get => (double)GetValue(CenterYProperty) + ArcThickness / 2;
            set => SetValue(CenterYProperty, value + ArcThickness / 2);
        }

        public static readonly DependencyProperty StartAngleProperty =
            DependencyProperty.Register("StartAngle", typeof(double), typeof(BudgetCircleControl),
                new FrameworkPropertyMetadata(0.0, FrameworkPropertyMetadataOptions.AffectsRender));

        public double StartAngle
        {
            get => (double)GetValue(StartAngleProperty);
            set => SetValue(StartAngleProperty, value);
        }


        public static readonly DependencyProperty RadiusProperty =
            DependencyProperty.Register("Radius", typeof(double), typeof(BudgetCircleControl),
                new FrameworkPropertyMetadata(10.0, FrameworkPropertyMetadataOptions.AffectsRender));

        public double Radius
        {
            get => (double)(GetValue(RadiusProperty));
            set => SetValue(RadiusProperty, value);
        }

        public static readonly DependencyProperty LargeAngleProperty =
            DependencyProperty.Register("LargeAngle", typeof(bool), typeof(BudgetCircleControl),
                new FrameworkPropertyMetadata(true, FrameworkPropertyMetadataOptions.AffectsRender));

        public bool LargeAngle
        {
            get => (bool)(GetValue(LargeAngleProperty));
            set => SetValue(LargeAngleProperty, value);
        }

        public static readonly DependencyProperty CurrentValueProperty =
            DependencyProperty.Register("CurrentValue", typeof(double), typeof(BudgetCircleControl),
                new FrameworkPropertyMetadata(0.0, FrameworkPropertyMetadataOptions.AffectsRender));

        public double CurrentValue
        {
            get => (double)(GetValue(CurrentValueProperty));
            set => SetValue(CurrentValueProperty, value);
        }

        public static readonly DependencyProperty MaxValueProperty =
            DependencyProperty.Register("MaxValue", typeof(double), typeof(BudgetCircleControl),
                new FrameworkPropertyMetadata(0.0, FrameworkPropertyMetadataOptions.AffectsRender));

        public double MaxValue
        {
            get => (double)(GetValue(MaxValueProperty));
            set => SetValue(MaxValueProperty, value);
        }

        public static readonly DependencyProperty StartPointProperty =
        DependencyProperty.Register("StartPoint", typeof(Point), typeof(BudgetCircleControl),
            new FrameworkPropertyMetadata(new Point(0, 0), FrameworkPropertyMetadataOptions.AffectsRender));

        public Point StartPoint
        {
            get => (Point)GetValue(StartPointProperty);
            set => SetValue(StartPointProperty, value);
        }

        public static readonly DependencyProperty EndPointProperty =
            DependencyProperty.Register("EndPoint", typeof(Point), typeof(BudgetCircleControl),
                new FrameworkPropertyMetadata(new Point(0, 0), FrameworkPropertyMetadataOptions.AffectsRender));

        public Point EndPoint
        {
            get => (Point)GetValue(EndPointProperty);
            set => SetValue(EndPointProperty, value);
        }

        public static readonly DependencyProperty RadiusSizeProperty =
            DependencyProperty.Register("RadiusSize", typeof(Size), typeof(BudgetCircleControl),
                new FrameworkPropertyMetadata(new Size(10, 10), FrameworkPropertyMetadataOptions.AffectsRender));

        public Size RadiusSize
        {
            get => (Size)GetValue(RadiusSizeProperty);
            set => SetValue(RadiusSizeProperty, value);
        }

        public static readonly DependencyProperty PercentageValueProperty =
        DependencyProperty.Register("PercentageValue", typeof(string), typeof(BudgetCircleControl),
            new FrameworkPropertyMetadata("0%"));

        public string PercentageValue
        {
            get => (string)GetValue(PercentageValueProperty);
            set => SetValue(PercentageValueProperty, value);
        }

        public bool IsMaxValueReached => CurrentValue >= MaxValue;


        private Point CalculatePointForValue(double value)
        {
            double percentage = (value / MaxValue) * 360;

            if (percentage == 360)
            {
                percentage = 359.99;
            }

            double angle = (percentage + 90) * (Math.PI / 180); // Convert to radians

            double x = CenterX + Radius * Math.Cos(-angle);
            double y = CenterY + Radius * Math.Sin(-angle);
            return new Point(x, y);
        }

        // Calculating start and end points based on provided properties
        private void CalculatePoints()
        {
            StartPoint = CalculatePointForValue(0);
            EndPoint = CalculatePointForValue(CurrentValue);
            RadiusSize = new Size(Radius, Radius);
        }

        protected override void OnPropertyChanged(DependencyPropertyChangedEventArgs e)
        {
            if (e.Property == CurrentValueProperty || e.Property == MaxValueProperty ||
                e.Property == CenterXProperty || e.Property == CenterYProperty ||
                e.Property == RadiusProperty || e.Property == LargeAngleProperty)
            {
                CalculatePoints();
                LargeAngle = ((CurrentValue / MaxValue) * 100 > 50);
                PercentageValue = ((int)((CurrentValue / MaxValue) * 100)).ToString() + "%";
            }
            UpdateArcSegment();

            base.OnPropertyChanged(e);
        }

        public override void OnApplyTemplate()
        {
            customControlGrid = Template.FindName("PART_CustomControlGrid", this) as Grid;
            myArc = Template.FindName("MyArc", this) as Path;

            var radiusToSizeConverter = new RadiusToSizeConverter();

            var gridWidthBinding = new MultiBinding();
            gridWidthBinding.Converter = radiusToSizeConverter;
            gridWidthBinding.Bindings.Add(new Binding
            {
                Path = new PropertyPath(nameof(Radius)),
                Source = this,
            });
            gridWidthBinding.Bindings.Add(new Binding
            {
                Path = new PropertyPath(nameof(ArcThickness)),
                Source = this,
            });

            var gridHeightBinding = new MultiBinding();
            gridHeightBinding.Converter = radiusToSizeConverter;
            gridHeightBinding.Bindings.Add(new Binding
            {
                Path = new PropertyPath(nameof(Radius)),
                Source = this,
            });
            gridHeightBinding.Bindings.Add(new Binding
            {
                Path = new PropertyPath(nameof(ArcThickness)),
                Source = this,
            });

            customControlGrid.SetBinding(WidthProperty, gridWidthBinding);
            customControlGrid.SetBinding(HeightProperty, gridHeightBinding);

            var arcStrokeBinding = new Binding
            {
                Path = new PropertyPath(nameof(ArcThickness)),
                Source = this,
            };

            myArc.SetBinding(Path.StrokeThicknessProperty, arcStrokeBinding);

            UpdateArcSegment(); // Create or update the ArcSegment




            CalculatePoints();
            LargeAngle = ((CurrentValue / MaxValue) * 100 > 50);
            PercentageValue = ((int)((CurrentValue / MaxValue) * 100)).ToString() + "%";

            Loaded += OnControlLoaded;

            base.OnApplyTemplate();
        }

        private void UpdateArcSegment()
        {
            var myArcPath = GetTemplateChild("MyArc") as Path;

            if (myArcPath != null)
            {
                // Create the PathGeometry, PathFigure, and ArcSegment
                PathGeometry pathGeometry = new PathGeometry();
                PathFigure pathFigure = new PathFigure();
                ArcSegment arcSegment = new ArcSegment();

                // Set the properties of the ArcSegment
                arcSegment.Point = EndPoint; // Use your EndPoint property here
                arcSegment.Size = RadiusSize; // Use your RadiusSize property here
                arcSegment.SweepDirection = SweepDirection.Counterclockwise; // Or your desired SweepDirection
                arcSegment.IsLargeArc = LargeAngle; // Use your LargeAngle property here

                // Set the StartPoint in PathFigure (should be set based on your logic)
                pathFigure.StartPoint = StartPoint; // Use your StartPoint property here

                // Add the ArcSegment to the PathFigure
                pathFigure.Segments.Add(arcSegment);

                // Add the PathFigure to the PathGeometry
                pathGeometry.Figures.Add(pathFigure);

                // Apply the created PathGeometry to the MyArc Path
                myArcPath.Data = pathGeometry;
            }
        }

    }
}

Then, in code behind, I subcribe for Loaded event, I try to get the control template but it throw exception that

System.Windows.ResourceReferenceKeyNotFoundException
  HResult=0x80131509
  Message='NormalTemplate' resource not found.
  Source=PresentationFramework
  StackTrace:
   at MS.Internal.Helper.FindResourceHelper.DoTryCatchWhen(Object arg)
   at System.Windows.Threading.ExceptionWrapper.InternalRealCall(Delegate callback, Object args, Int32 numArgs)
   at System.Windows.Threading.ExceptionWrapper.TryCatchWhen(Object source, Delegate callback, Object args, Int32 numArgs, Delegate catchHandler)
   at System.Windows.Threading.Dispatcher.WrappedInvoke(Delegate callback, Object args, Int32 numArgs, Delegate catchHandler)
   at MS.Internal.Helper.FindResourceHelper.TryCatchWhen()
   at System.Windows.FrameworkElement.FindResource(Object resourceKey)
   at LearnHowToMakeCustomControl.Components.BudgetCircleControl.ApplyTemplate() in D:\.NET_related\LearnHowToMakeCustomControl\Components\BudgetCircleControl.cs:line 40
   at LearnHowToMakeCustomControl.Components.BudgetCircleControl.OnControlLoaded(Object sender, RoutedEventArgs e) in D:\.NET_related\LearnHowToMakeCustomControl\Components\BudgetCircleControl.cs:line 27
   at System.Windows.EventRoute.InvokeHandlersImpl(Object source, RoutedEventArgs args, Boolean reRaised)
   at System.Windows.UIElement.RaiseEventImpl(DependencyObject sender, RoutedEventArgs args)
   at System.Windows.BroadcastEventHelper.BroadcastEvent(DependencyObject root, RoutedEvent routedEvent)
   at System.Windows.BroadcastEventHelper.BroadcastLoadedEvent(Object root)
   at System.Windows.Media.MediaContext.FireLoadedPendingCallbacks()
   at System.Windows.Media.MediaContext.FireInvokeOnRenderCallbacks()
   at System.Windows.Media.MediaContext.RenderMessageHandlerCore(Object resizedCompositionTarget)
   at System.Windows.Media.MediaContext.RenderMessageHandler(Object resizedCompositionTarget)
   at System.Windows.Media.MediaContext.Resize(ICompositionTarget resizedCompositionTarget)
   at System.Windows.Interop.HwndTarget.OnResize()
   at System.Windows.Interop.HwndTarget.HandleMessage(WindowMessage msg, IntPtr wparam, IntPtr lparam)
   at System.Windows.Interop.HwndSource.HwndTargetFilterMessage(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam, Boolean& handled)
   at MS.Win32.HwndWrapper.WndProc(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam, Boolean& handled)
   at MS.Win32.HwndSubclass.DispatcherCallbackOperation(Object o)
   at System.Windows.Threading.ExceptionWrapper.InternalRealCall(Delegate callback, Object args, Int32 numArgs)
   at System.Windows.Threading.ExceptionWrapper.TryCatchWhen(Object source, Delegate callback, Object args, Int32 numArgs, Delegate catchHandler)
   at System.Windows.Threading.Dispatcher.LegacyInvokeImpl(DispatcherPriority priority, TimeSpan timeout, Delegate method, Object args, Int32 numArgs)
   at MS.Win32.HwndSubclass.SubclassWndProc(IntPtr hwnd, Int32 msg, IntPtr wParam, IntPtr lParam)

1 answer

Trọng Tín Võ 20

I just found the solution for my case. I get the resource dictionary and access the template through the key. And it work well. Thanks for your help.

private void ApplyTemplate()
{
    var myResourceDictionary = new ResourceDictionary();
    myResourceDictionary.Source =
        new Uri("/Components/BudgetCircleControl.xaml",
                UriKind.RelativeOrAbsolute);
    if (CurrentValue > MaxValue)
    {

        // Apply WarningTemplate
        Template = myResourceDictionary["WarningTemplate"] as ControlTemplate;
    }
    else
    {
        // Apply NormalTemplate
        Template = myResourceDictionary["NormalTemplate"] as ControlTemplate;
    }
}

Share via

[WPF] how to create custom control that have multiple state, each state is completely different from others

1 answer

Your answer