8/21/2020 0 Comments Xaml Design Tool
Notice that when a new control is dragged its background will be red.
Xaml Design Tool Free Hostable DesignDragging and dropping any control from the toolbox to the design surface Re-sizingmerging, removing controls AddRemove rows from the form Setting data bindings for each type of control through a properties window Setting display properties for each control through a properties window, filtering properties (showing only desired ones) This is just a sample of the type of forms that can be created with this application: Background This prototype was the result of a year-effort after giving up trying to find a free hostable Design Surface to create WPF forms, similar to the one available in Windows Forms.Unfortunately Visual Studio Cider designer is not open so developers cant include it in third party applications.However, code-behind had to be used in certain areas of the application due to heavy UI manipulation.I also wanted to point out that the real application was implemented using Avalon Dock library to provide IDE style docking, but it was removed from this prototype to reduce the scope and complexity of the article. The main concept behind this application is to build a fixed-column Grid where rows can be added dynamically and where controls can be dragged from a Toolbox to each grid cell. Right-clicking each control and then - Properties or single left click will display the chosen control properties in the properties panel. Xaml Design Tool Zip There AreUsing the code Here is the VS 2010 Solution: Download WPFFormDesigner.zip There are three main external librariesprojects used in this sample application: WPF Property Grid - Provides all the functionality for displaying control properties, with lots of customizable features, like grouping, filtering, creating extended editors, etc Simple MVVM Toolkit - Very easy to understand MVVM framework, provides message bus capability to communicate between ViewModels, simplifies property notifications FluidKit - Used only for DragDrop enhancements and simplification. This is how the main application looks like: The main project in the Visual Studio solution is called WPFFormDesigner. The name of the main View files are self-explanatory, an can be easily identified in the application screenshot above. Like the FormDesignerSurface, the PropertiesView, MainWindow and ToolboxView. Most of this views have a corresponding ViewModel located in the ViewModel folder. The subsequent rows can be added below by using the insert below icon: Removing rows Rows can be removed by clicking on the red (-) circle button shown in the image above. Contextual Menus By right-clicking a dragged control in the grid we get three options: Show Properties - Will set this as the selected control in the property grid Remove Control - Will remove the control from this cell and will prepare the cell to be drag destination again Merge Cells - This is an experimental feature, it only works setting the ColumnSpan of the selected control to 6 which is the number of ColumnDefinitions. This is useful when dragging an expander for example, we just merge the cells and the expander will occupy the whole row: Notice also that the Expander will also contain 6 internal columns where controls can be added. Control Re-sizing Adorners Again, Im not trying to re-invent the wheel here, for Control resizing I found a good alternative in Denis Vuyka article: WPF. ![]() The resize logic can be found in the FormDesignerSurface.xaml.cs, look for this line: font-size: 9pt; span region Resizing Adorner Section. This is useful for troubleshooting and making sure the form is correct. It uses the XamlSerializedOutputWindow.xaml control to display the XAML. Notice that the right panel is empty, this is meant to display the cleaned XAML. For that reason, a set of custom XAML Serialization classes were created under. This proxy classes are just wrapper classes that only expose certain properties of that control so they can be shown in the Properties View. In this sample application we just expose basic properties like Height, Width, Name, Background, etc. When right-clicking - Properties or left clicking on a control, the WPFPropertyGridProxyConverter will be invoked which will convert the selected control into its related proxy. For example the TextBoxProxy will require an extended template to configure.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |