Looking to write a note application in WPF/C# MVVM, not because we need another one but because it'll help me go over a few things I'm trying to become more familiar with.
My question is regarding some guidance on how to handle multiple windows. For example there will be multiple notes not tied to a main window. I'd like to keep track of all open windows, for example if one received focus, I may want to bring the other note windows to the front, but not remove focus from the one I selected, not looking for anyone to give me the code, just some guidance on how to handle it.
Maybe this can help you in some way: http://kentb.blogspot.nl/2011/11/application-im-currently-working-on-top.html
The important parts from the article:
What I did instead was had the WindowItemsControl create WindowItemsControlItem instances as containers. These containers are really just surrogates for the Window they represent. When they're initialized, they display the Window. When they're destroyed, they close the Window. In addition, if a Window is closed ahead of time, the corresponding data item is removed from the underlying collection and thus too the surrogate from the visual tree.
public class WindowItemsControl : ItemsControl
{
public static readonly DependencyProperty ShowDialogProperty = DependencyProperty.Register(
"ShowDialog",
typeof(bool),
typeof(WindowItemsControl));
public static readonly DependencyProperty OwnerProperty = DependencyProperty.Register(
"Owner",
typeof(Window),
typeof(WindowItemsControl),
new FrameworkPropertyMetadata(OnOwnerChanged));
public static readonly DependencyProperty WindowStartupLocationProperty = DependencyProperty.Register(
"WindowStartupLocation",
typeof(WindowStartupLocation),
typeof(WindowItemsControl));
public static readonly DependencyProperty RemoveDataItemWhenWindowClosedProperty = DependencyProperty.Register(
"RemoveDataItemWhenWindowClosed",
typeof(bool),
typeof(WindowItemsControl),
new FrameworkPropertyMetadata(true));
static WindowItemsControl()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(WindowItemsControl), new FrameworkPropertyMetadata(typeof(WindowItemsControl)));
}
public bool ShowDialog
{
get { return (bool)this.GetValue(ShowDialogProperty); }
set { this.SetValue(ShowDialogProperty, value); }
}
public Window Owner
{
get { return this.GetValue(OwnerProperty) as Window; }
set { this.SetValue(OwnerProperty, value); }
}
public WindowStartupLocation WindowStartupLocation
{
get { return (WindowStartupLocation)this.GetValue(WindowStartupLocationProperty); }
set { this.SetValue(WindowStartupLocationProperty, value); }
}
public bool RemoveDataItemWhenWindowClosed
{
get { return (bool)this.GetValue(RemoveDataItemWhenWindowClosedProperty); }
set { this.SetValue(RemoveDataItemWhenWindowClosedProperty, value); }
}
protected override DependencyObject GetContainerForItemOverride()
{
return new WindowItemsControlItem(this);
}
protected override bool IsItemItsOwnContainerOverride(object item)
{
return item is WindowItemsControlItem;
}
protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
{
(element as WindowItemsControlItem).Window.Content = item;
}
protected override bool ShouldApplyItemContainerStyle(DependencyObject container, object item)
{
// the item container style will be applied to the windows, not to the containers (which are surrogates for the window)
return false;
}
private static void OnOwnerChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs e)
{
var windowItemsControl = (WindowItemsControl)dependencyObject;
var owner = (Window)e.NewValue;
for (var i = 0; i < windowItemsControl.Items.Count; ++i)
{
var container = windowItemsControl.ItemContainerGenerator.ContainerFromIndex(i) as WindowItemsControlItem;
if (container == null)
{
continue;
}
container.Window.Owner = owner;
}
}
}
it declares some properties (ShowDialog, Owner, WindowStartupLocation) that assist it in the display of child Windows
it declares a RemoveDataItemWhenWindowClosed property that can be used to prevent the control from removing data items when a window is closed. This can be useful in shutdown or other situations where windows are being closed programmatically rather than by the user
I don't apply the ItemContainerStyle to the containers themselves, but instead hold out so that I can apply them to the Windows they represent
I also make sure that any change of Owner is applied to any existing Windows
the default style is overridden to remove unnecessary stuff like the Border, because the WindowItemsControl will never actually be visible on screen
public class WindowItemsControlItem : FrameworkElement
{
private readonly WindowItemsControl windowItemsControl;
private readonly Window window;
static WindowItemsControlItem()
{
// there is no need for these items to be visible as they are simply surrogates for the windows that they display
VisibilityProperty.OverrideMetadata(typeof(WindowItemsControlItem), new FrameworkPropertyMetadata(Visibility.Collapsed));
}
public WindowItemsControlItem(WindowItemsControl windowItemsControl)
{
windowItemsControl.AssertNotNull("windowItemsControl");
this.windowItemsControl = windowItemsControl;
this.window = this.CreateWindow(windowItemsControl);
this.Loaded += delegate
{
if (this.windowItemsControl.ShowDialog)
{
this.window.ShowDialog();
}
else
{
this.window.Show();
}
};
this.Unloaded += delegate
{
this.window.Close();
};
}
public Window Window
{
get { return this.window; }
}
private Window CreateWindow(WindowItemsControl windowItemsControl)
{
var window = new Window
{
Owner = windowItemsControl.Owner,
WindowStartupLocation = windowItemsControl.WindowStartupLocation
};
BindingOperations.SetBinding(window, Window.DataContextProperty, new Binding("Content") { Source = window });
BindingOperations.SetBinding(window, Window.StyleProperty, new Binding("ItemContainerStyle") { Source = windowItemsControl });
BindingOperations.SetBinding(window, Window.ContentTemplateProperty, new Binding("ItemTemplate") { Source = windowItemsControl });
BindingOperations.SetBinding(window, Window.ContentTemplateSelectorProperty, new Binding("ItemTemplateSelector") { Source = windowItemsControl });
window.Closed += delegate
{
// orphan the content because it might be hosted somewhere else later (including in another window)
window.Content = null;
// if the window closes, attempt to remove the original item from the underlying collection, which will result in this surrogate being removed too
if (windowItemsControl.RemoveDataItemWhenWindowClosed)
{
var editableItems = windowItemsControl.Items as IEditableCollectionView;
if (editableItems != null && editableItems.CanRemove)
{
editableItems.Remove(this.DataContext);
}
}
};
return window;
}
}
relevant properties on the WindowItemsControl are bound to the correct properties on the Windows themselves
Windows are displayed when the surrogate is initialized, and closed when the surrogate is unloaded
as mentioned earlier, Windows that are closed before the surrogate is destroyed (perhaps by the user clicking the close button) result in the related data item in the underlying collection being removed (unless the RemoveDataItemWhenWindowClosed property has been set to false). This, in turn, will cause the surrogate to be removed from the visual tree. In other words, if I close a widget Window, the corresponding WidgetViewModel will be removed from my collection of widget view models. Then, the ItemsControl will remove the related surrogate container from the visual tree.
Related
I want to find a way to implement different forms of modals in MVVM WPF application. Like dialogs with returning results, message boxes or modal sub-windows with some controls inside.
Can you give me an advice about an efficient and modern approach for it?
I rarely find much use for anything other than a confirmation request. "Do you really want to delete that?" kind of thing.
Things popping up and asking for extra input just aren't super useful in my experience.
To my mind though, what you're doing is splitting your code. There is code up to showing the dialog. There is then code happens if the user clicks OK or Yes or selects a thingummajig in the dialog.
I split these into separate pieces of code. So there is not necessarilly a need to stop code running. It's in a separate method ( or command ) which is only run if the user hits the right button.
My first approach uses a control which itself has no UI. It exists just to get something encapsulated into the view.
namespace UserInput
{
public class ConfirmationRequestor : Control, ICommandSource
{
public bool? ShowConfirmDialog
{
get
{
return (bool?)GetValue(ShowConfirmDialogProperty);
}
set
{
SetValue(ShowConfirmDialogProperty, value);
}
}
public static readonly DependencyProperty ShowConfirmDialogProperty =
DependencyProperty.Register("ShowConfirmDialog",
typeof(bool?),
typeof(ConfirmationRequestor),
new FrameworkPropertyMetadata(null
, new PropertyChangedCallback(ConfirmDialogChanged)
)
{ BindsTwoWayByDefault = true }
);
private static void ConfirmDialogChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if ((bool?)e.NewValue != true)
{
return;
}
ConfirmationRequestor cr = (ConfirmationRequestor)d;
Window parent = Window.GetWindow(cr) as Window;
MessageBoxResult result = MessageBox.Show(parent, cr.Message, cr.Caption, cr.MsgBoxButton, cr.MsgBoxImage);
if (result == MessageBoxResult.OK || result == MessageBoxResult.Yes)
{
if (cr.Command != null)
{
cr.Command.Execute(cr.CommandParameter);
}
}
cr.SetValue(ShowConfirmDialogProperty, false);
}
public MessageBoxButton MsgBoxButton
{
get { return (MessageBoxButton)GetValue(MsgBoxButtonProperty); }
set { SetValue(MsgBoxButtonProperty, value); }
}
public static readonly DependencyProperty MsgBoxButtonProperty =
DependencyProperty.Register("MsgBoxButton",
typeof(MessageBoxButton),
typeof(ConfirmationRequestor),
new PropertyMetadata(MessageBoxButton.OK));
public MessageBoxImage MsgBoxImage
{
get { return (MessageBoxImage)GetValue(MsgBoxImageProperty); }
set { SetValue(MsgBoxImageProperty, value); }
}
public static readonly DependencyProperty MsgBoxImageProperty =
DependencyProperty.Register("MsgBoxImage",
typeof(MessageBoxImage),
typeof(ConfirmationRequestor),
new PropertyMetadata(MessageBoxImage.Warning));
public string Caption
{
get { return (string)GetValue(CaptionProperty); }
set { SetValue(CaptionProperty, value); }
}
public static readonly DependencyProperty CaptionProperty =
DependencyProperty.Register("Caption",
typeof(string),
typeof(ConfirmationRequestor),
new PropertyMetadata(string.Empty));
public string Message
{
get { return (string)GetValue(MessageProperty); }
set { SetValue(MessageProperty, value); }
}
public static readonly DependencyProperty MessageProperty =
DependencyProperty.Register("Message",
typeof(string),
typeof(ConfirmationRequestor),
new PropertyMetadata(string.Empty));
public ICommand Command
{
get { return (ICommand)GetValue(CommandProperty); }
set { SetValue(CommandProperty, value); }
}
public static readonly DependencyProperty CommandProperty =
DependencyProperty.Register("Command", typeof(ICommand), typeof(ConfirmationRequestor), new UIPropertyMetadata(null));
public object CommandParameter
{
get { return (object)GetValue(CommandParameterProperty); }
set { SetValue(CommandParameterProperty, value); }
}
public static readonly DependencyProperty CommandParameterProperty =
DependencyProperty.Register("CommandParameter", typeof(object), typeof(ConfirmationRequestor), new UIPropertyMetadata(null));
public IInputElement CommandTarget
{
get { return (IInputElement)GetValue(CommandTargetProperty); }
set { SetValue(CommandTargetProperty, value); }
}
public static readonly DependencyProperty CommandTargetProperty =
DependencyProperty.Register("CommandTarget", typeof(IInputElement), typeof(ConfirmationRequestor), new UIPropertyMetadata(null));
}
}
I have a viewmodel designed to go with this which is exposed as a property on my window viewmodel. That viewmodel and the control encapsulate the confirmer functionality.
namespace UserInput
{
public class ConfirmationRequestorVM : INotifyPropertyChanged
{
private string caption;
public string Caption
{
get { return caption; }
set
{
caption = value;
NotifyPropertyChanged();
}
}
private string message;
public string Message
{
get { return message; }
set
{
message = value;
NotifyPropertyChanged();
}
}
private MessageBoxButton msgBoxButton;
public MessageBoxButton MsgBoxButton
{
get { return msgBoxButton; }
set
{
msgBoxButton = value;
NotifyPropertyChanged();
}
}
private MessageBoxImage msgBoxImage;
public MessageBoxImage MsgBoxImage
{
get { return msgBoxImage; }
set
{
msgBoxImage = value;
NotifyPropertyChanged();
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
}
Usage
In the relevant view
<input:ConfirmationRequestor
ShowConfirmDialog="{Binding ShowConfirmation, Mode=TwoWay}"
MsgBoxImage="{Binding confirmer.MsgBoxImage}"
MsgBoxButton="{Binding confirmer.MsgBoxButton}"
Message="{Binding confirmer.Message}"
Caption="{Binding confirmer.Caption}"
Command="{Binding OkCommand}"
/>
Most of that is fairly self explanatory.
When ShowConfirmation is set to true, that control will show a messagebox.
If the user clicks OK or Yes then the OkCommand will be executed.
Hence if you need deletion confirmation then you show your messagebox and the actual deletion would be in that OkCommand.
If you want more complicated UI then rather than using a messagebox at all you could show a window from similar control.
Let's call this a DialogueController. This could be rather simpler since we can rely on our own UI and bind commands.
This control would have a dependency property for view Type. This being the type of a usercontrol which needs to be shown.
Another bool dependency property and change handler would control showing the type.
When the showdialog bool becomes true.
A method instantiates a window ( or it could be a popup if you prefer ) instantiates a usercontrol of the type specified in our other DP. Sets the window datacontext to our current datacontext.
You could use getwindow to find the parent window and set that to parent of our new (dialogue) window instance.
Thus sharing the parent window viewmodel as datacontext.
Call showdialog on the window. Or you could just call show.
You then have whatever UI you wrote in your usercontrol shown in a window.
It has access to your parent window viewmodel so it can reference any of your data you need.
And... It's Yes or OK button can bind to whatever command you defined in that parent window viewmodel.
You could also do things like select from a list and bind selectedFoo in your parent window viewmodel as well.
If you don't showmodal then when you change shared properties anything bound in your parent window can get those changes.
Like I said though.
I've not really come across much demand for that sort of thing.
There are also some elephants in the not-dialog room.
A pop up referencing it's parent viewmodel.
And
An expander similarly.
And
Just overlaying a panel on top of everything inside your parent window. This is how I have done editing for data in datagrids in a number of apps.
The key thing I found was the realisation:
You can "just" split your code into code before the dialog. Show the dialog. Then the "doing" aspect of any dialog-like-UI can go in a separate command.
OK, it's not exactly a road to damascus moment. But it simplifies things. I like simple. More likely to work.
I have a user interface like Prism StockTrader RI application with some changes whrere
i put control panel in ResearchRegion contains list of items when i select one item
its details are displayed in the AnimatedTabControl in the main region.
I need to customize the AnimatedTabControl (from StockTrader RI) like this:
The AnimatedTabControl show tab header like normal tab control where header
will contain the selected item name
When new selection is applied from a control panel that resides in the ResearchRegion a
new tab open w/o removing the previous tab selection and w/o animation
Tab header contain close button to close any of the open tabs when required
Animation take place only when changing the control panel in the ResearchRegion
public class AnimatedTabControl : TabControl
{
public static readonly RoutedEvent SelectionChangingEvent = EventManager.RegisterRoutedEvent(
"SelectionChanging", RoutingStrategy.Direct, typeof(RoutedEventHandler), typeof (AnimatedTabControl));
private DispatcherTimer timer;
public AnimatedTabControl()
{
DefaultStyleKey = typeof(AnimatedTabControl);
}
public event RoutedEventHandler SelectionChanging
{
add { AddHandler(SelectionChangingEvent, value); }
remove { RemoveHandler(SelectionChangingEvent, value); }
}
protected override void OnSelectionChanged(SelectionChangedEventArgs e)
{
this.Dispatcher.BeginInvoke(
(Action)delegate
{
this.RaiseSelectionChangingEvent();
this.StopTimer();
this.timer = new DispatcherTimer { Interval = new TimeSpan(0, 0, 0, 0, 500) };
EventHandler handler = null;
handler = (sender, args) =>
{
this.StopTimer();
base.OnSelectionChanged(e);
};
this.timer.Tick += handler;
this.timer.Start();
});
}
// This method raises the Tap event
private void RaiseSelectionChangingEvent()
{
var args = new RoutedEventArgs(SelectionChangingEvent);
RaiseEvent(args);
}
private void StopTimer()
{
if (this.timer != null)
{
this.timer.Stop();
this.timer = null;
}
}
}
Thanks in Advance
I have answered part#3 of your question(Tab header contain close button to close any of the open tabs when required).
Have a look at my public folder in SkyDrive Account:-
(https://skydrive.live.com/redir?resid=656548C49A72B6CD!105)
Im'm using winform DevExpress library.
Now need to create a control, basing on PopupContainerEdit but this control must have some behaviors like when it's focused, the popup opens and when lost focus the popup closes.
This is the code I'm using but the popup dessapears after getting focus.
public class HelpEdit : PopupContainerEdit {
private PopupContainerControl _container;
private GridControl _gridControl;
private GridView _gridView;
[DefaultValue("")]
[DXCategory("Data")]
[AttributeProvider(typeof(IListSource))]
public object Datasource {
get { return _gridControl.DataSource; }
set { _gridControl.DataSource = value; }
}
public HelpEdit() : base() {
_container = new PopupContainerControl();
this.Properties.TextEditStyle = DevExpress.XtraEditors.Controls.TextEditStyles.Standard;
this._gridControl = new GridControl();
this._gridControl.Dock = DockStyle.Fill;
this._gridView = new GridView(_gridControl);
_container.Controls.Add(_gridControl);
_container.Size = new Size(this.Width, 250);
this.Properties.PopupControl = _container;
this.Properties.PopupControl.Size = new Size(this.Width, 250);
}
protected override void OnGotFocus(EventArgs e) {
base.OnGotFocus(e);
this.ShowPopup();
}
protected override void OnLostFocus(EventArgs e) {
base.OnLostFocus(e);
this.ClosePopup();
}
}
Your popup disappears because it closes by your code as soon as the popup container control(_container) got focus itself. You should not close popup within the OnLostFocus() override because the base.OnLostFocus method of PopupContainerEdit is already contains correct code for closing popup. Or close popup conditionally, using the following code:
protected override void OnLostFocus(EventArgs e) {
if(IsPopupOpen && !EditorContainsFocus)
ClosePopup(PopupCloseMode.Immediate);
base.OnLostFocus(e);
}
I'm new at Silverlight.
I've created a sort of master page using a Page with a frame where the content is loaded. As I handle multiple UserControls at the time (only one is shown, but I want to keep the state of the opened before) I'm setting Content property instead of Navigate method. That way I can assign a UserControl (already created, not a new one as it would be using Navigate with the Uri to the UserControl).
Now I want to take a picture as shown here from the frame when its content changes. If I do it immediately when the content set, the UserControl won't be shown in the picture because it takes a few secs. Frames have the event Navigated, but it doesn't fire with property Content (it just fires when the method Navigate is used, as it name says).
How can I know when new Content is loaded?
If it helps I'm using Silverligh 5.
I've a solution but I don't really like it, so I'm still looking for other ways.
public class CustomFrame : Frame
{
private readonly RoutedEventHandler loadedDelegate;
public static readonly DependencyProperty UseContentInsteadNavigationProperty =
DependencyProperty.Register("UseContentInsteadNavigation", typeof (bool), typeof (CustomFrame), new PropertyMetadata(true));
public bool UseContentInsteadNavigation
{
get { return (bool)GetValue(UseContentInsteadNavigationProperty); }
set { SetValue(UseContentInsteadNavigationProperty, value); }
}
public CustomFrame()
{
this.loadedDelegate = this.uc_Loaded;
}
public new object Content
{
get { return base.Content; }
set
{
if (UseContentInsteadNavigation)
{
FrameworkElement fe = (FrameworkElement)value;
fe.Loaded += loadedDelegate;
base.Content = fe;
}
else
{
base.Content = value;
}
}
}
void uc_Loaded(object sender, RoutedEventArgs e)
{
((UserControl)sender).Loaded -= loadedDelegate;
OnContentLoaded();
}
public delegate void ContentLoadedDelegate(Frame sender, EventArgs e);
public event ContentLoadedDelegate ContentLoaded;
private void OnContentLoaded()
{
if (ContentLoaded != null)
ContentLoaded(this, new EventArgs());
}
}
I have a simple implementation of a ListView in WPF that allows me to select multiple items in the list by holding the mouse button and dragging over the items. However, while holding the mouse button down, when I move the mouse outside the ListView, something strange happens with the selection. Ideally, I would just want the selection to remain the same, but instead it quickly cycles through all the selected items, leaving only the last item selected.
Here's the code, have any ideas?
public class MultiSelectListView : ListView
{
private bool m_isSelectionActive;
public bool IsSelectionActive
{
get { return m_isSelectionActive; }
}
protected override DependencyObject GetContainerForItemOverride()
{
return new MultiSelectListViewItem(this);
}
protected override void OnPreviewMouseLeftButtonDown(MouseButtonEventArgs e)
{
m_isSelectionActive = true;
}
protected override void OnPreviewMouseLeftButtonUp(MouseButtonEventArgs e)
{
m_isSelectionActive = false;
}
}
public class MultiSelectListViewItem : ListViewItem
{
private readonly MultiSelectListView m_parent;
public MultiSelectListViewItem(MultiSelectListView parent)
{
m_parent = parent;
}
protected override void OnMouseEnter(System.Windows.Input.MouseEventArgs e)
{
if (m_parent.IsSelectionActive)
IsSelected = true;
}
}
The funkiness you are experiencing happens when the mouse "drag" goes above the top of the list or below the bottom of the list. I think the behavior you set up will only work well if the selection mode is Multiple. The modifications to the MultiSelectListView below set the default selection mode to Multiple and assumes the user wants to start another selection with a left mouse click. You will still experience funkiness if the SelectionMode is set to Extended or Single in the XAML.
public class MultiSelectListView : ListView
{
private bool m_isSelectionActive;
public bool IsSelectionActive
{
get
{
return m_isSelectionActive;
}
}
protected override DependencyObject GetContainerForItemOverride()
{
return new MultiSelectListViewItem(this);
}
protected override void OnPreviewMouseLeftButtonDown(MouseButtonEventArgs e)
{
if (SelectionMode != SelectionMode.Single)
{
SelectedItems.Clear();
}
m_isSelectionActive = true;
}
protected override void OnPreviewMouseLeftButtonUp(MouseButtonEventArgs e)
{
m_isSelectionActive = false;
}
public MultiSelectListView() : base()
{
SelectionMode = SelectionMode.Multiple;
}
}