I am working on a project where I have created 2 usercontrols . In one user control Using MVVM and Mircroft.Community.toolkit I have created a rectangle with some properties. In another user control, I have used propertygrid from extended.wpf.toolkit.

Question

I am working on a project where I have created 2 usercontrols . In one user control Using MVVM and Mircroft.Community.toolkit I have created a rectangle with some properties. In another user control, I have used propertygrid from extended.wpf.toolkit.

Saurabh 0

Problem is I have used these 2 controls in my main window using avalondock. On clicking the usercontrol1 of rectangle, I am able to see the properties in propertygrid but when I am changing any of the property like width and height, I am unable to reflect the change in the UI. Kindly find the code below and please provide the solution where I am facing the error.

For UserControl1:

class: My_CB_Diagram_Model

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Media;
using System.Windows;

namespace UC_Rectangle.Model
{
    public class My_CB_Diagram_Model : DependencyObject, INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        private void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }

        public int RadiusX
        {
            get { return (int)GetValue(RadiusXProperty); }
            set { SetValue(RadiusXProperty, value); OnPropertyChanged("RadiusX"); }
        }

        // Using a DependencyProperty as the backing store for MyProperty.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty RadiusXProperty =
            DependencyProperty.Register("RadiusX", typeof(int), typeof(My_CB_Diagram_Model), new PropertyMetadata(0));

        public int RadiusY
        {
            get { return (int)GetValue(RadiusYProperty); }
            set { SetValue(RadiusYProperty, value); OnPropertyChanged("RadiusY"); }
        }

        // Using a DependencyProperty as the backing store for MyProperty.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty RadiusYProperty =
            DependencyProperty.Register("RadiusY", typeof(int), typeof(My_CB_Diagram_Model), new PropertyMetadata(0));


        public int MyWidth
        {
            get { return (int)GetValue(MyWidthProperty); }
            set { SetValue(MyWidthProperty, value); OnPropertyChanged("MyWidth"); }
        }

        // Using a DependencyProperty as the backing store for MyProperty.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty MyWidthProperty =
            DependencyProperty.Register("MyWidth", typeof(int), typeof(My_CB_Diagram_Model), new PropertyMetadata(0));


        public int MyHeight
        {
            get { return (int)GetValue(MyHeightProperty); }
            set { SetValue(MyHeightProperty, value); OnPropertyChanged("MyHeight"); }
        }

        // Using a DependencyProperty as the backing store for MyProperty.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty MyHeightProperty =
            DependencyProperty.Register("MyHeight", typeof(int), typeof(My_CB_Diagram_Model), new PropertyMetadata(0));


        public int MyStrokeThickness
        {
            get { return (int)GetValue(MyStrokeThicknessProperty); }
            set { SetValue(MyStrokeThicknessProperty, value); OnPropertyChanged("MyStrokeThickness"); }
        }

        // Using a DependencyProperty as the backing store for MyProperty.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty MyStrokeThicknessProperty =
            DependencyProperty.Register("MyStrokeThickness", typeof(int), typeof(My_CB_Diagram_Model), new PropertyMetadata(0));


        private SolidColorBrush stroke;

        public SolidColorBrush MyStroke
        {
            get { return stroke; }
            set { stroke = value; OnPropertyChanged("MyStroke"); }
        }

        private SolidColorBrush mycolor;

        public SolidColorBrush MyColor
        {
            get { return mycolor; }
            set { mycolor = value; OnPropertyChanged("MyColor"); }
        }


    }
}

class: My_CB_Diagram_ModelService

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Media;

namespace UC_Rectangle.Model
{
    internal class My_CB_Diagram_ModelService
    {
        private static List<My_CB_Diagram_Model> mymodel_list;
        public My_CB_Diagram_ModelService()
        {
            mymodel_list = new List<My_CB_Diagram_Model>()
            {
                new My_CB_Diagram_Model{RadiusX=100, RadiusY=150,MyWidth=150, MyHeight=150, MyColor=new SolidColorBrush(Color.FromArgb(255,0, 255, 0)), MyStrokeThickness = 2,MyStroke= new SolidColorBrush(Color.FromArgb(255,0, 0, 0)) }

            };
        }


        public List<My_CB_Diagram_Model> GetCB()
        {
            return mymodel_list;
        }



        // addition of Move

        // addition of Stretch

        // addition of Rotate
    }
}

class: My_CB_Diagram_ViewModel

using CommunityToolkit.Mvvm.ComponentModel;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Media;
using UC_Rectangle.Model;

namespace UC_Rectangle.ViewModel
{
    [INotifyPropertyChanged]
    public partial class My_CB_Diagram_ViewModel
    {
        My_CB_Diagram_ModelService myservice;

        public My_CB_Diagram_ViewModel()
        {
            myservice = new My_CB_Diagram_ModelService();
            LoadData();
            Mycb = new My_CB_Diagram_Model();
            Mycb.MyWidth = 200;
            Mycb.MyHeight = 200;
            Mycb.MyStrokeThickness = 2;
            Mycb.MyColor = new SolidColorBrush(Color.FromArgb(255, 0, 0, 255));
            Mycb.RadiusX = 10;
            Mycb.RadiusY = 10;
            Mycb.MyStroke = new SolidColorBrush(Color.FromArgb(255, 0, 0, 0));
        }

        [ObservableProperty]
        private My_CB_Diagram_Model mycb;


        #region GetData
        [ObservableProperty]
        private ObservableCollection<My_CB_Diagram_Model> mt_rect_list;

        private void LoadData()
        {
            Mt_rect_list = new ObservableCollection<My_CB_Diagram_Model>(myservice.GetCB());
        }
        #endregion
    }
}

MyRect.xaml

<UserControl x:Class="UC_Rectangle.myRect"
             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:UC_Rectangle"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Canvas 
                                Background="Gray"
                                x:Name="DesignerCanvas" 
                                ClipToBounds="True"
                                SnapsToDevicePixels="True">
        <ContentControl Width="{Binding Mycb.MyWidth}" 
                                    Height="{Binding Mycb.MyHeight}"
                                    
                                    Canvas.Left="10" 
                                    Canvas.Top="50">
            <Rectangle IsHitTestVisible="False" x:Name="rccontrol" 
                                                Stroke="{Binding Mycb.MyStroke}"
                                                StrokeThickness="{Binding Mycb.MyStrokeThickness}"
                                                RadiusX="{Binding Mycb.RadiusX}"
                                                RadiusY="{Binding Mycb.RadiusY}"
                                                >
                <Rectangle.Fill>
                    <SolidColorBrush Color="{Binding Mycb.MyColor.Color}" />
                </Rectangle.Fill>

            </Rectangle>

        </ContentControl>

    </Canvas>
</UserControl>

MyRect.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using UC_Rectangle.Model;
using UC_Rectangle.ViewModel;


namespace UC_Rectangle
{
    /// <summary>
    /// Interaction logic for UserControl1.xaml
    /// </summary>
    public partial class myRect : UserControl
    {
        My_CB_Diagram_ViewModel viewmodel;
        public myRect()
        {
            InitializeComponent();
            viewmodel = new My_CB_Diagram_ViewModel();
            this.DataContext = viewmodel;

        }

    }
}

For UserControl2:

UserControl1.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using UC_Rectangle;
using UC_Rectangle.Model;
using UC_Rectangle.ViewModel;

namespace UC_pg
{
    /// <summary>
    /// Interaction logic for UserControl1.xaml
    /// </summary>
    public partial class MYUC_PG : UserControl
    {
        My_CB_Diagram_ViewModel myviewmodel = new My_CB_Diagram_ViewModel();
        public MYUC_PG()
        {
            InitializeComponent();

        }

        public void MyselectedObject()
        {
        
          //  pg.SelectedObject = myviewmodel.Mycb;
            // Set the DataContext of the window
            this.DataContext =  myviewmodel;
        //    pg.SetBinding(Xceed.Wpf.Toolkit.PropertyGrid.PropertyGrid.SelectedObjectProperty, new Binding("Mycb"));
        }

    }
}

UserControl1.xaml

<UserControl x:Class="UC_pg.MYUC_PG"
             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:UC_pg"
             xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
             xmlns:myrectanglecontrol="clr-namespace:UC_Rectangle;assembly=UC_Rectangle" xmlns:model="clr-namespace:UC_Rectangle.Model;assembly=UC_Rectangle" d:DataContext="{d:DesignInstance Type=model:My_CB_Diagram_Model}"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    
    <Grid>
        <xctk:PropertyGrid  x:Name="pg" 
                            SelectedObject="{Binding Mycb}" >

        </xctk:PropertyGrid>
    </Grid>
</UserControl>

MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using UC_Rectangle;
using UC_Rectangle.Model;
using UC_Rectangle.ViewModel;

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

        private void myRect_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            myRect myrect = new myRect();
            mypg.MyselectedObject();
           
        }
    }
}

MainWindow.xaml

<UserControl x:Class="UC_pg.MYUC_PG"

             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:UC_pg"

             xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"

             xmlns:myrectanglecontrol="clr-namespace:UC_Rectangle;assembly=UC_Rectangle" xmlns:model="clr-namespace:UC_Rectangle.Model;assembly=UC_Rectangle" d:DataContext="{d:DesignInstance Type=model:My_CB_Diagram_Model}"

             mc:Ignorable="d" 

             d:DesignHeight="450" d:DesignWidth="800">

    

    <Grid>

        <xctk:PropertyGrid  x:Name="pg" 

                            SelectedObject="{Binding Mycb}" >



        </xctk:PropertyGrid>

    </Grid>

</UserControl>

Hui Liu-MSFT 48,681 Reputation points Microsoft External Staff

2023-06-16T07:15:34.1433333+00:00

Hi,@Saurabh .Welcome Microsoft Q&A. Could you edit and re-paste your MainWindow.xaml code? The MainWindow.xaml code is wrongly pasted. What are your expected and actual results? Is it possible to take a screenshot to show it?

Saurabh 0

Dear Sir,

Thank you for the updated correction. Kindly find the MainWindow.xaml code:

<Window x:Class="WpfApp10.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp10"
        xmlns:myuc="clr-namespace:UC_Rectangle;assembly=UC_Rectangle"
        xmlns:pg="clr-namespace:UC_pg;assembly=UC_pg"
        xmlns:avalonDock="https://github.com/Dirkster99/AvalonDock"
        mc:Ignorable="d"
        Title="MainWindow" Height="800" Width="800">
    <!--<Grid Grid.Row="1" Margin="0,0,10,518">
        <myuc:myRect ></myuc:myRect>
    </Grid>-->
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="22*"/>
            <RowDefinition Height="397*"/>
        </Grid.RowDefinitions>

        <CheckBox 
              Content=" select"
              Margin="511,11,0,0"
              Foreground="Red"
              FontFamily="UISegoe"
              FontSize="15"
              HorizontalAlignment="Left"
              VerticalAlignment="Top" Grid.Row="0"/>

        <avalonDock:DockingManager x:Name="uxDockingManager" AllowMixedOrientation="True" Grid.Row="1">

            <avalonDock:LayoutRoot>

                <avalonDock:LayoutPanel Orientation="Vertical" >

                    <avalonDock:LayoutDocumentPane x:Name="uxDocumentPane">

                        <avalonDock:LayoutDocument Title="Document1" ContentId="Document1">
                            <myuc:myRect MouseLeftButtonUp="myRect_MouseLeftButtonUp" ></myuc:myRect>
                        </avalonDock:LayoutDocument>

                    </avalonDock:LayoutDocumentPane>

                    <avalonDock:LayoutAnchorablePane DockHeight="250"  x:Name="uxAnchorablePane2">

                        <avalonDock:LayoutAnchorable Title="ToolWindow2" ContentId="ToolWindow2">
                            <pg:MYUC_PG x:Name="mypg" >
                                
                            </pg:MYUC_PG>
                        </avalonDock:LayoutAnchorable>

                    </avalonDock:LayoutAnchorablePane>

                </avalonDock:LayoutPanel>

            </avalonDock:LayoutRoot>

        </avalonDock:DockingManager>
    </Grid>
</Window>

Saurabh 0 Reputation points

2023-06-16T08:25:46.7966667+00:00

Also, sir @Hui Liu-MSFT , I have used these 2 usercontrols as dll. I have added these 2 dlls in the mainwindow project. If we will use these 2 as usercontrols in mainwindow it will work. But when used as dll, I am facing problem. Kindly guide me the error and proper solution sir.
Saurabh 0 Reputation points

2023-06-16T08:29:01.8033333+00:00

Also, si @Hui Liu-MSFT , I have used these 2 usercontrols as dll and added to the project of MainWindow. If I am using these as usercontrols then no problem. I am able to modify the look and feel of UI. Kindly help me sir, where I am facing problem when used as dll.

1 answer

Your answer

Hui Liu-MSFT 48,681 Reputation points Microsoft External Staff

2023-06-16T07:15:34.1433333+00:00

Hi,@Saurabh .Welcome Microsoft Q&A. Could you edit and re-paste your MainWindow.xaml code? The MainWindow.xaml code is wrongly pasted. What are your expected and actual results? Is it possible to take a screenshot to show it?
Saurabh 0 Reputation points

2023-06-16T08:09:31.5066667+00:00

Dear Sir,

Thank you for the updated correction. Kindly find the MainWindow.xaml code:

<Window x:Class="WpfApp10.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WpfApp10" xmlns:myuc="clr-namespace:UC_Rectangle;assembly=UC_Rectangle" xmlns:pg="clr-namespace:UC_pg;assembly=UC_pg" xmlns:avalonDock="https://github.com/Dirkster99/AvalonDock" mc:Ignorable="d" Title="MainWindow" Height="800" Width="800">  <Grid> <Grid.RowDefinitions> <RowDefinition Height="22*"/> <RowDefinition Height="397*"/> </Grid.RowDefinitions> <CheckBox Content=" select" Margin="511,11,0,0" Foreground="Red" FontFamily="UISegoe" FontSize="15" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="0"/> <avalonDock:DockingManager x:Name="uxDockingManager" AllowMixedOrientation="True" Grid.Row="1"> <avalonDock:LayoutRoot> <avalonDock:LayoutPanel Orientation="Vertical" > <avalonDock:LayoutDocumentPane x:Name="uxDocumentPane"> <avalonDock:LayoutDocument Title="Document1" ContentId="Document1"> <myuc:myRect MouseLeftButtonUp="myRect_MouseLeftButtonUp" ></myuc:myRect> </avalonDock:LayoutDocument> </avalonDock:LayoutDocumentPane> <avalonDock:LayoutAnchorablePane DockHeight="250" x:Name="uxAnchorablePane2"> <avalonDock:LayoutAnchorable Title="ToolWindow2" ContentId="ToolWindow2"> <pg:MYUC_PG x:Name="mypg" > </pg:MYUC_PG> </avalonDock:LayoutAnchorable> </avalonDock:LayoutAnchorablePane> </avalonDock:LayoutPanel> </avalonDock:LayoutRoot> </avalonDock:DockingManager> </Grid> </Window>
Saurabh 0 Reputation points

2023-06-16T08:25:46.7966667+00:00

Also, sir @Hui Liu-MSFT , I have used these 2 usercontrols as dll. I have added these 2 dlls in the mainwindow project. If we will use these 2 as usercontrols in mainwindow it will work. But when used as dll, I am facing problem. Kindly guide me the error and proper solution sir.
Saurabh 0 Reputation points

2023-06-16T08:29:01.8033333+00:00

Also, si @Hui Liu-MSFT , I have used these 2 usercontrols as dll and added to the project of MainWindow. If I am using these as usercontrols then no problem. I am able to modify the look and feel of UI. Kindly help me sir, where I am facing problem when used as dll.

Answer 1

Hui Liu-MSFT 48,681 Microsoft External Staff

Hi,@Saurabh . You could setup your UserControl in both UserControl library as below. Then add their dlls to the test project.

User's image

UC_pg.MYUC_PG:

<UserControl x:Class="UC_pg.MYUC_PG"

             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:UC_pg"
              xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
             xmlns:myrectanglecontrol="clr-namespace:UC_Rectangle;assembly=UC_Rectangle" 
             xmlns:model="clr-namespace:UC_Rectangle.Model;assembly=UC_Rectangle" 
             d:DataContext="{d:DesignInstance model:My_CB_Diagram_Model}"
             mc:Ignorable="d" 
             
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <xctk:PropertyGrid  x:Name="pg"    SelectedObject="{Binding Mycb}" >

        </xctk:PropertyGrid>
    </Grid>
</UserControl>

The result:

User's image

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Hui Liu-MSFT 48,681 Reputation points Microsoft External Staff

2023-06-28T01:24:23.26+00:00

Hi,@Saurabh .Is there any update to the question? Did my answer solve your problem? If so, you could accept it as the answer. It's helpful for community members with related questions.
Saurabh 0 Reputation points

2023-07-15T07:54:23.8066667+00:00

Hello Sir,

@Hui Liu-MSFT

Thank you for the reply. I did the correction and worked out. Suppose Tomorrow I want to create one more user control say Circle. I want to update those Circle properties on property grid on user selection of that usercontrol. So, in total we will have 2 usercontrols Rectangle and Circle whose properties will be updated in their propertygrid on selection. How to do that? (This is linked to dynamic runtime selection of their viewmodels) Also, sir suppose I want to save this entire project using avalondock into any format and open it using openfiledialog, I am not getting any proper code on that with whatever contents are being change at runtime. If you can guide us I will be thankful to you ?

Share via

I am working on a project where I have created 2 usercontrols . In one user control Using MVVM and Mircroft.Community.toolkit I have created a rectangle with some properties. In another user control, I have used propertygrid from extended.wpf.toolkit.

1 answer

Your answer