I have a custom control (let's say MyContainer) that simply is a ScrollViewer with a Canvas inside.
I'm able to add controls to MyContainer like in a Canvas but in XAML designer this controls aren't movable like in a normal Canvas; they can't be moved with the mouse.
Here's the MyContainer code:
[ContentProperty("Children")]
public class MyContainer : ScrollViewer, IAddChild
{
private Canvas _innerCanvas;
[DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
public UIElementCollection Children
{
get { return _innerCanvas.Children; }
}
public MyContainer()
{
this._innerCanvas = new Canvas();
this.Content = _innerCanvas;
this.Loaded += MyContainer_Loaded;
}
void MyContainer_Loaded(object sender, RoutedEventArgs e)
{
_innerCanvas.Height = this.ActualHeight;
_innerCanvas.Width = this.ActualWidth;
}
void IAddChild.AddChild(object value)
{
if (value == null)
{
throw new ArgumentNullException("value");
}
UIElement uie = value as UIElement;
if (uie == null)
{
throw new ArgumentNullException("value");
}
_innerCanvas.Children.Add(value as UIElement);
}
void IAddChild.AddText(string text)
{
;
}
}
Where am I wrong?
PS: please avoid replies like "don't use editor, use XAML code only"; I need to make a User Control usable via graphic interface.
I think that you did not choose the correct base class. In WPF there are certain extensibility points that you should use for certain types of UI elements and I guess that the designer is hard-wired to these classes.
The different types of UI Elements are:
Visuals: they usually derive from FrameworkElement and their purpose is to display something that the user normally does not interact with (e.g. a text block).
Controls: they represent something that the user can interact with, like buttons, check boxes, text boxes, scroll viewers, etc. They usually derive from Control or ContentControl.
Panels: their purpose is to layout other UI Elements, Grid or StackPanel are examples. They all derive from the Panel base class.
Items controls: they usually provide selection for a number of items. ListBox, ComboBox, and TreeView are examples for them. All of them derive from ItemsControl.
Another important thing is that ContentControls and ItemsControls can display any object, not only those that can render themselves. They use the WPF Data Templating mechanism for that (the default is calling ToString on a non-renderable object and putting the resulting string in a TextBlock).
According to your code, I would assume that you either want to implement a panel or an items control. For panels, you should know about the Measure - Arrange - Render cycle of WPF and how you can use it to layout the panel's children.
Implementing an items control is a little bit harder because essentially an items control uses items that wrap the actual content of each displayed object (e.g. ListBoxItem), a panel to layout these items, an items container generator to dynamically create the child items, and of course you can use styles and templates. Most of the items controls also incorporate a scroll viewer. If you want to learn more about items controls, I strongly encourage you to read the "Items Controls: A to Z" blog series by Dr. WPF.
I haven't tried it out but I'm sure if you choose the correct base class to extend from, then you can use your control with the designer properly.
Related
I'm currently working on refactoring a lot of duplicated code in a couple of UserControls in Windows Forms project.
The architecture leaves much to be desired with a lot of logic implemented inside the UI layer. This will be fixed eventually, I'm now working on improving what I have on my hands now.
The problem is, that a lot of duplicated code relates directly to controls, for instance:
private void InitDestinationPathControls(string path)
{
if (someField)
{
tbOne.Enabled = false;
tbOne.Visible = false;
btnTwo.Enabled = false;
btnTwo.Visible = false;
tbOne.Text = string.Empty;
return;
}
// (...)
}
Don't get too attached to the cited code itself, it is just an example.
I'd like to move this code to a common base class, but it relies directly on specific fields (even though they are exactly the same in all controls too). Those fields, on the other hand, are generated by the designer, so I cannot extract them to the base class.
The only thing that comes to my mind is to pass those fields as parameters to a method in base class, but then if some method uses a lot of them, I'll end up with a monstrous interface part and that won't actually improve the readability too much.
How can I deal with such common parts of user controls in Windows Forms?
Apparently you have a combination of several controls that appears in several forms. In other words: you have for instance some buttons, comboboxes, etc, that you want to show on different forms, and you want them to have the same behaviour.
If not only the behaviour of these controls is the same on all forms, but also the layout, then consider to create a class derived from UserControl.
The UserControl hides from the outside world which controls are shown, how they are visualized and how they behave.
I assume that you already pulled the model out of the visualisation of the data.
If all instances of this user control should all call the same functions of possibly a different object of the same class, then give your special user control a property that represents this class, or at least an interface. During construction you can plug in the actual class that should handle the actions after operator input.
If, on the other hand, the layout differs on each form, but the collection of buttons, comboboxes, etc and their behaviour is similar on all forms that show this collection of controls and they have a lot of common behaviour, consider to create your own ControlCollection.
For instance, if on several forms you have a button to select a (text) file, labels with the name, size and creation date of the selected file, and an edit box that shows the content of the text file, but you want to layout them differently, consider something like this:
class FileDisplayControls : IDisposable
{
public Button ButtonSelectFile {get;} = new Button();
public Label labelFileName {get; } = new Label();
public Label labelFileSize {get; } = new Label();
public TextBox textFileContents {get; } = new FileContents();
private void ButtonSelectFile_Clicked(object sender, ...)
{
// TODO: open file dialog, display result in labels and text box
}
}
Constructor can set initial layout properties of the controls, and subscribe to events, such that the controls will react on user input.
The user of the class (= code, not operator) immediately has a collection of controls that have some standard behaviour, like react on button click. All he has to do is set the location of the items in his own form. If desired change other layout properties (colour, background) and put them on his own form.
If you want to prevent that others change other visual aspects of the controls than the position, don't publish the control themselves, only the position of the control:
public System.Drawing.Point LocationSelectFileButton
{
get => this.buttonSelectFile.Location;
set => this.buttonSelectFile.Location = value;
}
public System.Drawing.Point LocationFileContentTextBox
{
get => this.textBoxFileContent.Location;
set => this.textBoxFileContent.Location = value;
}
etc.
If needed, you can add events for users:
public event EventHandler SelectedFileChanged;
public string FileName => this.labelFileName.Text;
public string FileContents => this.textBoxFileContent.Text;
etc.
Conclusion
The solution that you choose depends on the similarity between the controls on the various forms:
if Behaviour and Layout are all the same: UserControl
If only position and a few properties different: special class with the properties that are different. This way you can force a more similar style: all "Select File" buttons look similar.
If only one or two behaviours are different: add Action<...> properties or events
If you want full control of the layout: expose the Controls.
The behaviour that is common for all you forms that show these controls (in my example: how to select a file and what to do when a file is selected) is inside the class.
repeated code can be extracted to method (possibly in base class, or as static method in helper class)
public void DisableControls(params Control[] controls)
{
foreach(var c in Controls)
{
c.Enabled = false;
c.Visible = false;
if (c is TextBox t)
{
t.Text = string.Empty;
}
}
}
private void InitDestinationPathControls(string path)
{
if (someField)
{
DisableControls(tbOne, btnTwo);
return;
}
// (...)
}
First part of my question
I am creating a UWP app which uses the NavigationView class and need a little help as to building a good approach as to how I manage control creation in code behind (not in a markup language).
I decided as opposed to adding controls in the markup language xaml that I would create a list of controls in C# and add these control as part of my NavView_Loaded method.
I understand there are benefits to simply working with xaml to create the UI. However, I intend to have various different circumstances under which controls are visible or collapsed and I find it easier to maintain the status of controls by working in code behind or in C# using my mainpage class.
Currently, I have something like the following
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
public ObservableCollection<NavigationViewItem> SetNavViewItems()
{
var navitems = new ObservableCollection<NavigationViewItem>
{
new NavigationViewItem()
{
Content = "Home",
Icon = new SymbolIcon(Symbol.Home),
Tag = "home",
Visibility = Visibility.Visible,
},
new NavigationViewItem()
{
Content = "Documents",
Icon = new SymbolIcon(Symbol.Document),
Tag = "documents",
Visibility = Visibility.Visible,
},
new NavigationViewItem()
{
Content = "Library",
Icon = new SymbolIcon(Symbol.Library),
Tag = "library",
Visibility = Visibility.Visible,
}
};
return navitemsHome;
}
private void NavView_Loaded(object sender, RoutedEventArgs e)
{
navitems = SetNavViewItems();
foreach (var navitem in navitems)
{
NavView.MenuItems.Add(navitem);
}
}
}
As I understand it, in this example I have used a strongly typed collection in order to contain a collection of NavigationViewItem's. My issue here is that I wish to create a collection, list or arraylist of various types of controls (i.e. NavigationViewItemHeader, NavigationViewItem, NavigationViewList, NavigationViewItemSeparator).... and I'm not sure what is most appropriate; a list, a collection (weakly typed), an arraylist or if there is a better option.
To round out my explanation.
I then have a separate list (of strings) which contains all of the navigation item tags which I use to test conditions and set whether a corresponding control is visible or not.
Second part of my question
One other UI control I'm struggling with which may or may not be fully implemented as part of the NavigationView class, is expanding an Item or Header to display a list of sub items. My current understanding is that NavigationViewItem is the most appropriate control to use as the main heading/item. The sub items should be using the NavigationViewList. I can then write a method for setting the visibility of the NavigationViewList controls which is triggered when the user clicks on the corresponding NavigationViewItem.
Third and final part
Whenever I create a control in my NavigationView (i.e. a stack panel), it appears to automatically create a NavigationViewItem with the content stack panel which has the default style (i.e. height). I expect that this is intended and any control created in the NavigationView inherets from the NavigationViewBase. Frustratingly I seem to have difficult displaying multiple rows of a stack panel or grid which inherets from NavigationViewBase. Can anyone shed some light? Is this in my imgaination or is there something important to understand when creating a control in the NavigationView class.
Any help much appreciated!!!
Thanks!
I would like to know how I could possibly modulate my views in an application. Let me explain.
Instead of building my view and adding all the components in one screen. I want to say put each panel in its own class / form and then have a main form where I can add and remove these 'modular' panels.
Is this possible and how would I go about doing it?
In Windows Forms there is the concept of an empty component called UserControl, that can be freely designed and added at any time to another component or form container. UserControls are used very often in order to create flexible and exchangable UI. You can create a UserControl item in Visual Studio like this:
Name the new control:
After that you can design your UI control:
When your are done with the design, compile your project/solution and go to the form where you want to add your newly designed control. In the toolbar panel you will see your new UserControl, which can be added to the form with drag & drop (with the mouse):
You can create as many UserControls as you want and add/remove them to/from your form.
All of this steps can be done completely in the code. In order to create new view of this kind, you need to create a new class that inherits the predefined UserControl class:
public class EditorUserControl : UserControl
{
}
Every Control element has a ControlsCollection that holds/contains components of type Control that are drawn when the UI is shown. In order to add your new control to the main panel you need to add it to the controls collection:
public partial class EditorUserControl : UserControl
{
public EditorUserControl()
{
var button = new Button();
button.Text = "Import";
this.Controls.Add(button);
}
}
Note, that when adding components manually, you are responsible for sizing and position them. Predefined layout panels can help you here:
TableLayoutPanel - layout with cells
SplitPanel - horizontal or vertical predefined resizable panels
etc.
Now all that left is to add the new user control to the main form just like you added the UI elements to your own control:
var simpleEditor = new EditorUserControl();
simpleEditor.Dock = DockStyle.Fill;
this.Controls.Add(simpleEditor);
You can adjust the UI control settings through its predefined properties.
You can mix predefined containers and UserControls in order to achieve the desired UI:
There are a lot of good beginners tutorials for C# and VS and .NET:
Channel9 tutorials
MSDN Visual Studio UI tutorials
Composite UserControl tutorial
Developing with Windows Forms Documentation and Examples
This is definitely possible. I will use WinForms but there are similar ways in WPF such as frames.
In WinForms you can create a new User Control for each 'modular' panel which will automatically create .cs and .designer.cs files just like in a normal Form. You can then add logic and functionality to the panels as if they were forms themselves. All that would then remain is to add the logic to the form to load the default panel on startup and think of ways of how other panels can be brought into view (e.g. a next button or having a panel on each tab in a tab control). Showing a panel in a form (or any other user control for that matter) is achieved by creating an instance of your desired panel and adding it to you form/control's Controls property like so:
public Form1()
{
InitializeComponent();
MyPanel panel = new MyPanel();
this.Controls.Add(panel);
}
I'm trying to write a form theme class library to adjust the form layout in a simple way for any project I'll be working on.
This is basically an idea of what it should look like:
http://www.beaverdistrict.nl/form_layout.png
In essence, the plugin works as follows:
// form class, which inherits the plugin class
class FormToTheme : ThemedForm
{
public FormToTheme()
{
// some code here
}
}
// plugin class itself
class ThemedForm: Form
{
public ThemedForm()
{
// some code here
}
}
Basically I set the FormBorderStyle to None, and drew the layout by code.
But now, the controls that are added can be placed over the custom titlebar, which isn't possible in a normal form if you keep the default FormBorderStyle.
So I figured that I could work around this by automatically adding the controls to the content panel, instead of the usercontrol.
So what I tried to do was this:
private void ThemedForm_ControlAdded(Object sender, ControlEventArgs e)
{
// some simple code to set the control to the current theme I'm using
e.Control.BackColor = Color.FromArgb(66, 66, 66);
e.Control.ForeColor = Color.White;
// the code where I try to place the control in the contentPanel controls array,
// and remove it from it's parent's controls array.
if (e.Control.Name != contentPanel.Name)
{
e.Control.Parent.Controls.Remove(e.Control);
contentPanel.Controls.Add(e.Control);
}
}
But when I try to add a new control in the main form as well as in the visual editor, i get the following error:
child is not a child control of this parent
So my question is: is there a way to work around this error, and move the controls from the usercontrol to the content panel?
Note that I do want this to be automated in the ThemedForm class, instead of calling methods from the main form.
EDIT:
I tried this:
http://forums.asp.net/t/617980.aspx
But that will only cause visual studio to freeze, and then I need to restart.
I know that it is not really appropriate to answer ones own question, however the solution I came up with will take quite some explaining, which will be too much to add in my question with an edit.
So here we go:
Inside the inherited 'ThemedForm' class, I created a private variable, in order to be able to return the variable when the Controls property would be called:
private Controls controls = null;
I set the variable to null, because I need to pass variables to the class in the 'ThemedForm' class constructor. I will create a new instance of the class later on.
Then I created a class to replace the Controls property:
public class Controls
{
private Control contentPanel = null;
private ThemedForm themedform = null;
public Controls(ThemedForm form, Control panel)
{
contentPanel = panel;
themedform = form;
}
public void Add(Control control)
{
if (control != contentPanel)
{
contentPanel.Controls.Add(control);
}
else
{
themedform.Controls_Add(control);
}
}
public void Remove(Control control)
{
if (control != contentPanel)
{
contentPanel.Controls.Remove(control);
}
else
{
themedform.Controls_Remove(control);
}
}
}
I know this class holds far from all functionality of the original Controls property, but for now this will have to do, and if you like, you can add your own functionality.
As you can see in the Add and Remove methods in the Controls class, I try to determine wether the control that needs to be added is either the content panel I want to add the rest of the controls to, or any other control that needs to be added to the content panel.
If the control actually is the content panel, I add or remove it to or from the Controls property of the base class of the 'ThemedForm' class, which is a 'Form' class. Otherwise, I just add the control to the content panel's Controls property.
Then I added the Controls_Add and Controls_Remove methods to the 'ThemedForm' class, in order to be able to add or remove a control from the Controls property of the 'ThemedForm' base class.
public void Controls_Add(Control control)
{
base.Controls.Add(control);
}
public void Controls_Remove(Control control)
{
base.Controls.Remove(control);
}
They are quite self-explanatory.
In order to call the Controls.Add or the Controls.Remove methods from an external class, I needed to add a public property that hid the current Controls property, and returned the private variable that I assigned to the replacing class.
new public Controls Controls
{
get { return controls; }
}
And finally I created a new instance of the Controls class, passing the current 'ThemedForm' class, and the contentPanel control, in order to get it all to run.
_controls = new Controls(this, contentPanel);
After doing all this, I was able to 'redirect' any controls that were added to the UserControl (even inside the visual editor) to the content panel. This allowed me to use the Dock property of any control, and it would dock inside the content panel, instead of over my entire form.
This is still a little bit buggy, because inside the visual editor the docked controls still seem like they are docked over the entire form, but when running the application the result is as I wanted.
I really hope this helps anyone.
My MainPage.xaml is a pivot page with 3 PivotItems. Currently it is loading all of the necessary stuff for each of the PivotItems on the MainPage constructor. This is bad because it loads a lot of stuff that are not necessary.
Reading here and here suggests that I only load the first PivotItem and after it loads, load the rest of the items. Specifically :
Improve the performance of the pivot application by loading Pivot control content on-demand as opposed to loading everything at startup. One solution is to take the content from each PivotItem control and convert into UserControls. You can then subscribe to the LoadingPivotItem event on the root pivot control. Next, in the event handler, instantiate the proper UserControl and set it as the PivotItem content.
If I follow the suggestion:
private void OnLoadingPivotItem(object sender, PivotItemEventArgs e)
{
if (e.Item.Content != null)
{
// Content loaded already
return;
}
Pivot pivot = (Pivot)sender;
if (e.Item == pivot.Items[0])
{
e.Item.Content = new Page1Control();
}
else if (e.Item == pivot.Items[1])
{
e.Item.Content = new Page2Control();
}
else if (e.Item == pivot.Items[2])
{
e.Item.Content = new Page3Control();
}
}
I should use create class PageXControl ? Should it inherit somehow from main-page class ?
How do i take the content from each PivotItem control and convert into UserControls ?
Thanks
Extracting the content of your PivotItems into UserControls is actually very simple. First, create a new UserControl for each of your PivotItems. Then move the content of the PivotItems from the PivotItem into the UserControls. Then you create the controls in the OnLoadingPivotItem method as you specified. I have a created a small project on GitHub to show you how to do this. See: https://github.com/ErikSchierboom/pivotcontentdemo
As you can see, I derived the UserControls from a base class as they are semantically the same. However, this is by no means necessary, it is fine to just inherit from UserControl.
I prefer this approach over the approach where the PivotItems themselves are extracted into custom controls.
You could create your own Pivot items, which would inherit from PivotItem. I have put together a sample, based on the default Pivot project in VS, which splits out the two Pivot items into their own classes :-
http://www.smartmobiledevice.co.uk/projects/PivotItemUserControlSample.zip