I'd like to create a CustomWindow class that behaves this way:
1. Non-client area of window is utilized too, TabControl's tabs are present instead of window title like in Google Chrome.
2. Tabs are right-padded so when window is too small, min/max/close buttons don't collide with tabs - this should be doable in TabControl template.
3. There is a button after tabs much like a "new tab" button in Google Chrome. Again, this should be doable with custom implementation of TabControl and creating a fake child for rendering I guess.
4. My class inherits from Window class and every child in children collection is mapped to a TabControl tab like if TabControl.ItemsSource was bound to Window.Children.
5. Window exposes property ItemsSource that behaves like children collection too.
6. Window offers a way to style what TabControl recognizes as ItemTemplate. When I feed the window like CustomWindow.ItemsSource = new string[] { "a", "b", "c" }; and I populate a template for items, three tabs will be created where tab header style is hardcoded in CustomWindow class and tab item content area is templated by user.
As you can see this is basically a outline of Google Chrome window which is exactly what I am trying to accomplish. I know how to bend window's chrome the way I want with everything like system menu, double-click maximizing etc. handled. But I don't know how to make inherited class from Window that will force it's only child to be a TabControl of my choice (tabs headers are styled) but in reality it's child collection will be TabControls child collection. I am not as much experienced with WPF as I'd like and I want to start this the right way so I don't need to rewrite it in future.
Additionaly, when this is resolved, I want to give user the way to tell the tab it's pinned, which I guess is best accomplished by defining an attached property in CustomWindow, something like CustomWindow.IsPinned for any child control?
Thank you.
Add a DependencyProperty ItemsSource to your window (of type IEnumerable<object> and in your window Template set the tabcontrol with ItemsSource="{TemplateBinding ItemsSource}". That will make the window have its own child collection, which will then be rendered as tab items in the tabcontrol.
Related
A while I go, I made a demo application with Expression Blend.
My first screen is a big selections of Buttons, so when user click on any of button, it goes to the MainView.
Then in the MainView, I have a list of Menu items that user can click and shows up its corresponing DisplayView. (Appointment Menu Item will shows up AppointmentView etc).
Everything is good, I can click the MenuItem, the Views shows up with animation and transition effects.
But the thing is, with creating in Expression Blend, the MainView, Menu, AppointmentView etc every thing is predefined in the XAML. So when user load the first screen has to load everything into memory.
Now thinking of it, shouldn't the MainView etc be dynamically add into the screen?
How do I do it with Expression Blend? Or the only way to do is just....do it in code-behind myself (writting StoryBoard etc for the dynamic add/remove controls?)
If there is any example/tutorial of doing it, it will be great.
I guess you have very limited possibilities to conditionally load or unload controls exclusively in Blend without writing code-behind.
In general an opening tag in XAML is equivalent to a parameter-less constructor of some class object. As soon as you write the tags your are instantiating an object but that doesn't mean that it's visual appearance is loaded into memory. This only happens when the control is actually shown on the screen.
In my opinion the leanest way to control the appearance of some control is to use a single-child control. Take a Border control for example and add the user control you want to conditionally load to its child property, so you can decide for example whether to load or unload a control.
But unfortunately I think you have to do this in code as well. Take this easy code snippet:
// either instantiate in code or use from markuup
Border myBorder = new Border();
// the control you want to conditionally appear and disappear
UserControl myUserControl = new UserControl();
myBorder.Child.Add(myUserControl);
Of course a much more sophisticated approach is to use Grids. Here you have to use attached properties to add or remove child elements:
// either instantiate in code or use from markuup
Grid myGrid = new Grid();
// the control you want to conditionally appear and disappear
UserControl myUserControl = new UserControl();
// set the target position inside the Grid via the Grids attached properties
Grid.setRow(myUserControl, 1);
Grid.setColumn(myUserControl, 0);
// actually add the control
Grid.Children.Add(myUserControl);
Although I am pretty sure you were aware of all of that I am hoping it helped a bit :)
Assume that I need to create a class called PictureWall, which will be used to show pictures.
Now I find that Panel and ItemsControl can both be used to hold Children elements. So should the class PictureWall derive from Panel? or should it derive from ItemsControl.
Note: This is not a real requirement, it's just a hypothetical question. The real question is: when should I create a subclass of Control (or ItemsControl) and when should I create a subclass of Panel?
Note 2: This imagined picture wall control is not to be used in one application only. It may be used by other developers. If it derives from Panel or ItemsControl, it'll expose the property named Children to other developers. So in this case, deriving from Control is a better idea, right?
Note 3: This imagined picture wall control has its own default way of loading certain pictures (for example, pulling pictures from a server) and it does not want this way to be messed around. If this is the case, then we should not inherit ItemsControl, right?
Panel is a container that is used to arrange its children. For example: Grid with a title and one button on the bottom and an image on center - Grid is very flexible to help you move stuff and arrange them when you change the size of window etc.
ItemsControl is a control that helps you with a collection of items. Let's take a concrete example: Listbox. You can very easly show a list of items, applay template to all of them, so on and so forth.
Control class is basically a UI element that can have its own template.
Note that, it is a way much better to define own UserControl, edit template or style of your PictureWall, insted of subclassing (there are many advantages, for example you can use Blend to redefine the style).
Edit:
# note2
If I were you I would make my own User Control to reuse existing controls to make what I want. If that won't be enough I would subclass Control.
[StyleTypedProperty(Property = "FooStyle", StyleTargetType = typeof(Control))]
public partial class MyDangControl: Control
{
...
# note3
This is a bad idea to combine all in one. You should split the logic that fetch the data form yout Picture Wall. For instance, user presses thumbnail to download the image and whole UI hangs. Horrible UX.
To be crystal clear, let me quote Pro WPF in C# 2010
Control
This is the most common starting
point when building a control
from scratch. It’s the base class for
all user-interactive widgets. The
Control class adds properties for
setting the background and foreground,
as well as the font and alignment of
content. The control class also places
itself into the tab order (through the
IsTabStop property) and introduces the
notion of double-clicking (through the
MouseDoubleClick and
PreviewMouseDoubleClick events). But
most important, the Control class
defines the Template property that
allows its appearance to be swapped
out with a customized element tree for
endless flexibility.
ContentControl
This is the base class for controls
that can display a single piece of
arbitrary content. That content can be
an element or a custom object that’s
used in conjunction with a template.
(The content is set through the
Content property, and an optional
template can be provided in the
ContentTemplate property.) Many
controls wrap a specific, limited type
of content (like a string of text in a
text box). Because these controls
don’t support all elements, they
shouldn’t be defined as content
controls.
ItemsControl
ItemsControl is the base class for
controls that wrap a list of items but
don’t support selection, while
Selector is the more specialized base
class for controls that do support
selection. These classes aren’t often
used to create custom controls,
because the data templating features
of the ListBox, ListView, and TreeView
provide a great deal of flexibility.
Panel
This is the base class for controls
with layout logic. A layout control
can hold multiple children and
arranges them according to specific
layout semantics. Often, panels
include attached properties that can
be set on the children to configure
how the children are arranged.
They both can be used to display elements, but really an ItemsControl offers much more functionality. In addition, an ItemsControl doesn't really display it's elements, it leverages a Panel to do that.
An ItemsControl can display a list of items, which may or may not be UIElements/Visuals. The items can be templated using a configurable DataTemplate, which ultimately determines how the item is displayed. In addition, then items can be bound to an observable collection so it will automatically update.
Neither of these features are supported by a Panel. DataTemplates can be used, but you have to manually create an associated ContentControl/ContentPresenter and add it to your panel.
Ultimately, their functions are different. A Panel is used to display UIElements/Visuals. An ItemsControl is used to display any type of data and apply templates as needed.
What is the difference between a ContextMenu class and the Popup class?
The MSDN docs do a nice job of displaying the distinction:
The Popup Class:
Represents a pop-up window that has
content.
The ContextMenu Class:
Represents a pop-up menu that enables
a control to expose functionality that
is specific to the context of the
control.
So the ContextMenu is a more-specific version of a Popup - it's meant to be bound to a specific control, providing ways to interact with that control. Read further on the MSDN page: the ContextMenu has built-in facilities for displaying itself when you right-click on the associated control, and it is automatically displayed within a Popup.
The Popup class is much more general: it simply defines a barebones window (no default borders or decoration) that can display any arbitrary UIElement on top of other controls (notice that the Popup class is part of the Primitives namespace, meaning it's meant to be part of the composition of other controls, such as the ContextMenu).
I have WPF window that uses a dockpanel and the menu control. I have the code to create the menu options based on a user ID.
Within this window, I have a frame that contains a WPF page. I carry out all the authentication on the page and then have a user ID for the window to use. However, I cannot get the parent window to "refresh" and create the menu bar with the new ID information. When the window loads, I do not run through the commands to display the menu bar. I have tried putting that in its own, public, function and calling it from the page but that does not seem to work.
There must be a window method that I'm missing that can make the menu bar display based on the call from the page.
It sounds like you're still thinking in procedurally, in WinForms style. What you describe would be necessary in WinForms, but in WPF it is usually much easier: just use data binding. As long as your menu items are generated from a "UserID" dependency property (or enabled/disabled based on it), then all you need to do is set the UserID DependencyProperty and the UI will update itself with no additional code.
Here is how to get the UserID into a DependencyProperty of the Window or a context object:
In your Window or a context object create a "UserID" DP
Make your Window or your a context object the DataContext of the page
At the end of the authentication code, set DataContext.UserID (or alternatively create a UserID property on the page, and have the Window bind to it with a two way binding)
Once you have the UserID in a DependencyProperty, there are many ways to update the menu items automatically whenever it changes:
In each menu item, bind its visibility to the UserID DP on the window using an appropriate converter (using the converter parameter to distinguish between items), -OR-
Use a converter for setting ItemsSource so you filter your items, -OR-
Create a PropertyChangedCallback that sets a filter on the CollectionView you use for menu items, -OR-
Some other technique (there are many other good ways to do this)
For typical situations we're talking about less than 10 lines of C# here, not counting the DependencyProperty declarations.
I have implemented my MVVM error message as a message dialog that subscribes to error messages via a mediator class, so that other viewmodels can notify it if any errors occur.
When an error occurs, I set the visibility attribute in the viewmodel to Visible, to display the error window. This is all bound in the Error window from the viewmodel.
However, this window is NOT modal! I need to show it as a dialog and not just set the visibility to true - is there any kind of binding I can do, even if I have to extend the functionality of the window? I'd rather not break MVVM if I can avoid it.
Thanks!
The View/ViewModel split is meant to divide look from functionality. I firmly believe the Window is functionality and look rolled into one. For instance, what if in your ErrorMessageViewModel, you had this code that executes when there are errors:
class WindowViewModel : Window
{
}
.
.
.
WindowViewModel newDialog = new WindowViewModel();
newDialog.Content = myErrorListViewModel;
newDialog.Parent = mainWindowViewModel;
newDialog.ShowDialog();
So the contents of the dialog is the ViewModel for your error list. Define your View as a data template that automatically applies itself to the error list ViewModel.
Doesn't that look like MVVM?
The fact is, the Window class is a ViewModel for the Window you see on the screen. By changing the properties of the Window object, it affects the "view" just like if the properties of the WindowView were bound to a WindowViewModel. The only thing missing is the ability to "restyle" the Window using WPF, and it doesn't matter how hard you try to implement it, you're not going to be able to do that. The user can restyle a Window by modifying their desktop theme, but you're not in control of it. The best you can do is turn off the chrome and/or make it full screen.
You find an example how windows (don't matter if they are modal or not) are shown, in the ViewModel example of this project:
WPF Application Framework (WAF)
http://waf.codeplex.com
I am also working on a MVVM project where I need modal dialogboxes or messageboxes. I have found the following way of solving it:
The software uses only one window. The layout root element is a Grid with no row- or columndefinitions. The grid has three children:
A dockpanel that contains all the usual stuff like menus, tabbed views, status bar and so on.
A grid that has a gray background and a 50% opacity. This is used as a veil to cover the dockpanel when a modal box is in effect. The veil grid is usually collapsed.
A grid holding modal views, this is usually collapsed.
The viewmodel for the main window has a member called Modal. If this is null, the two grids for modal use are collapsed through databinding and a converter for Visibility.Collapsed.
When the program wants to display for example a modal message box, a MessageBoxViewModel is instantiated and assigned to MainViewModel.Modal. The MessageBoxViewModel has a Command for an OK-button. This Command raises an event that sets the MainViewModel.Modal to null again.
The veil grid occludes the main DockPanel, so that no controls outside the Modal control accept input.
Your program can either run a messagepump until OK is pressed, or the OK-Command can trigger the next. There are many ways of solving different needs, but the Model-ModelView solution should support them.
I feel that this is as good a model of the view in the modal mode as one can hope for.
I made a behhavior to tie some modal dialogs to the command.
http://www.clr-namespace.com/post/MVVMModal-dialog-before-running-Command.aspx
<Confirm:Confirm IsConfirm="{Binding ElementName=checkBoxConfirm, Path=IsChecked}"
Command="{Binding Path=ButtonCommand}"
CommandParameter="{Binding ElementName=textBoxParameter, Path=Text}"
ConfirmMessage="Are you sure you want to fire the command?"
ConfirmCaption="Question" >
</Confirm:Confirm>
In my recent blog post you can find simple solution for Modal Dialogs and Message Boxes in MVVM for Silverlight but this can be simply reused in WPF:
Modal dialogs with MVVM and Silverlight 4
i'm using the same method as Scott Whitlock.
there is just one more important property to set:
class ModalDialog: Window
{
}
.
.
.
var dlg = new ModalDialog {
Content = viewModelName,
**TopMost = true,**
Parent = mainWindowViewModel
};
dlg.ShowDialog();