Wpf Reactive Extensions react when mouse is not over two elements - wpf

Question

I'm trying to learn more about reactive extensions but I find it quite hard to find a real world example so i can train myself.
I few days ago i found myself writing some ToggleButton Mouse Enter, Leave Checked Unchecked events, and now i am wondering if i could simplify it using reactive extensions.
Here is the goal:
Given a ToggleButton, when hovering over and it's not checked, a popup should show, the popup should close if the mouse is not over the button or the popup
If I press the toggle button (Checked) the popup should stay open until the button is unchecked (ignoring mouse enter leave events) after which the mouse hover behavior should kick in again.
And if the Popup is closed externaly the toggle button should be automatically unchecked. (I know that this could be implemented using a few bindings and data triggers but i want to exercise my reactive extensions logic)
Right now i have the following:
private void ToggleButton_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
{
if (!ToggleButton.IsChecked ?? false)
Popup.IsOpen = true;
}
private void ToggleButton_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)
{
if (!Popup.Child.IsMouseOver && !(TaskManagerTab.IsChecked ?? false))
{
Popup.IsOpen = false;
return;
}
popup.Child.MouseLeave += Popup_MouseLeave;
}
void Popup_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e)
{
Popup.Child.MouseLeave -= Popup_MouseLeave;
if (!ToggleButton.IsMouseOver && !(ToggleButton.IsChecked ?? false))
{
Popup.IsOpen = false;
return;
}
}
private void ToggleButton_CheckedChanged(object sender, System.Windows.RoutedEventArgs e)
{
Popup.IsOpen = ToggleButton.IsChecked ?? false;
if (Popup.IsOpen)
Popup.Closed += Popup_Closed;
}
void Popup_Closed(object sender, System.EventArgs e)
{
Popup.Closed -= Popup_Closed;
ToggleButton.IsChecked = false;
}
}
I would a rough version but i really don't know how to begin.
Thank you!
Update:
I did come up with this but I'm not sure about performance, and i can't seem to repeat if the toggle button is unchecked.
var mouseEnterSaveBtn = Observable.FromEventPattern<MouseEventHandler, MouseEventArgs>(h => SaveBtn.MouseEnter += h,
h => SaveBtn.MouseEnter -= h);
var mouseLeaveList = Observable.FromEventPattern<MouseEventHandler, MouseEventArgs>(h => popup.MouseLeave += h,
h => popup.MouseLeave -= h);
var toggleBtnChecked =
Observable.FromEventPattern<RoutedEventHandler, RoutedEventArgs>(h => SaveBtn.Checked += h,
h => SaveBtn.Checked -= h);
var allCloseEvents = mouseLeaveList.Merge(mouseLeaveList);
mouseEnterSaveBtn.TakeUntil(toggleBtnChecked).Subscribe(pattern =>
{
popup.Visibility = Visibility.Visible;
allCloseEvents.TakeUntil(toggleBtnChecked).
Subscribe(eventPattern =>
{
if (!popup.IsMouseOver && !popup.IsMouseOver)
popup.Visibility = Visibility.Collapsed;
});
});

Answer 1

That's pretty close to what I would do. One thing I would suggest, though, is that anytime you feel like you should subscribe to an observable within an observer (notice your nested Subscribe calls), you can probably combine those observables and then subscribe.
var mouseIn = Observable.FromEventPattern<MouseEventHandler, MouseEventArgs>
(
h => SaveBtn.MouseEnter += h,
h => SaveBtn.MouseEnter -= h
);
var mouseOut = Observable.FromEventPattern<MouseEventHandler, MouseEventArgs>
(
h => popup.MouseLeave += h,
h => popup.MouseLeave -= h
);
var isMouseOver = mouseIn
.Select((o,e) => true)
.Merge(mouseOut
.Select((o,e) => false));
var toggleBtnChecked = Observable.FromEventPattern<RoutedEventHandler, RoutedEventArgs>
(
h => SaveBtn.Checked += h,
h => SaveBtn.Checked -= h
)
.Select((o,e) => (o as ToggleButton).Checked);
var shouldShow = isMouseOver
.DistinctUntilChanged()
.CombineLatest(toggleBtnChecked, (mouse, pressed) => pressed || mouse);
shouldShow.Subscribe
(
shouldBeVisible =>
{
popup.Visibility = shouldBeVisible ? Visibility.Visible : Visibility.Collapsed;
}
);