本文介紹一種點擊空白處使控制元件隱藏的實作方法，
問題描述
考慮如下場景，在白板類軟體中，點擊按鈕彈出一個View，希望在點擊空白處直接隱藏掉View，同時可以直接書寫，如下圖：
實作該需求，可以通過View間通信解決，但這樣會增加代碼耦合且使邏輯顯得復雜，
本文通過派生UserControl，將處理邏輯封裝在View內部，從而降低代碼耦合度，
解決方案
通過分析需求可以想到，點擊空白處時，該View會失去焦點，因此可以通過監聽LostFocus事件來處理，
首先，需要設定Focusable屬性為true，其默認值為false，然后監聽LostFocus事件，當View失去焦點時，Visibility屬性置為Collapsed，
此處有個問題，如果點擊View內部的子控制元件，View會先LostFocus，然后立馬GotFocus，通過測驗間隔在20ms內，因此還要回應下GotFocus事件，獲取到焦點時，Visibility屬性置為Visible，
另外，當點擊按鈕顯示View時，此View并未獲取焦點，因此需要監聽IsVisibleChanged事件，當NewValue為true時，通過呼叫Focus使View獲取焦點，
還需要處理一個問題，如上文動圖所示，需點擊按鈕顯示，再次點擊按鈕隱藏，但再次點擊按鈕時，View已經失去了焦點，此時已隱藏，所以再次點擊會導致View隱藏后立馬顯示，經過測驗統計，點擊按鈕執行命令，到View回應命令執行顯示/隱藏，時間在(50,200)ms范圍內，因此如果在該范圍內View先隱藏后顯示，需將其Visibility置為Collapsed，
至此，邏輯基本處理完了，但是還有一個坑，如果使用bool值系結Visibility（Mode需設定為TwoWay），點擊按鈕修改bool時，PropertyChanged事件會通知監聽者屬性改變，此時由上個步驟中的邏輯知道，我們需要修改Visibility的值，這理論上又會導致bool值的改變，但bool值并未修改（屬性未修改完再次修改），這就導致Visibility與bool值不一致，再次點擊按鈕不會顯示View，我們只需要異步執行上個步驟，就可以解決，
通過上述處理，點擊空白處隱藏View的邏輯就封裝到View里面了，核心代碼如下所示，感興趣的可以下載完整demo試試，如果有其它好的方法，歡迎交流（WPF或開源庫或許有更好的解決方案），
// 派生UserControl
public class MyAutoHideControl : UserControl
{
public MyAutoHideControl()
: base()
{
Focusable = true;
_lastTimeCollapsed = DateTime.Now.Ticks / 10000;
IsVisibleChanged += AutoHideControl_IsVisibleChanged;
GotFocus += AutoHideControl_GotFocus;
LostFocus += AutoHideControl_LostFocus;
}
private void AutoHideControl_GotFocus(object sender, RoutedEventArgs e)
{
if (Visibility != Visibility.Visible)
Visibility = Visibility.Visible;
}
private void AutoHideControl_LostFocus(object sender, RoutedEventArgs e)
{
if (Visibility == Visibility.Visible)
Visibility = Visibility.Collapsed;
}
private void AutoHideControl_IsVisibleChanged(object sender, DependencyPropertyChangedEventArgs e)
{
if ((bool)e.NewValue =https://www.cnblogs.com/louzixl/p/= (bool)e.OldValue)
return;
if ((bool)e.NewValue)
{
long interval = DateTime.Now.Ticks / 10000 - _lastTimeCollapsed;
if (interval > MinInterval && interval < MaxInterval)
{
if (Visibility == Visibility.Visible)
{
Dispatcher.BeginInvoke(new Action(() =>
{
Visibility = Visibility.Collapsed;
}));
}
}
else
Focus();
}
else
_lastTimeCollapsed = DateTime.Now.Ticks / 10000;
}
private long _lastTimeCollapsed;
// 需處理再次點擊按鈕隱藏的情況
private const long MinInterval = 50;
private const long MaxInterval = 200;
}
// View
<Window ...
xmlns:c="clr-namespace:CalcBinding;assembly=CalcBinding"
xmlns:local="clr-namespace:AutoHideControl"
Title="AutoHideControl" Height="200" Width="350">
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibility"/>
</Window.Resources>
<Grid>
<InkCanvas Background="LightCyan"/>
<DockPanel VerticalAlignment="Bottom" Margin="10" Height="Auto">
<local:MyAutoHideView DockPanel.Dock="Top" Width="150" Height="50" Margin="10"
Visibility="{Binding ShowView,Converter={StaticResource BooleanToVisibility},Mode=TwoWay}"/>
<Button Width="80" Height="30" Command="{Binding ButtonClickedCommand}"
Content="{c:Binding ShowView ? \'Hide\' : \'Show\'}"/>
</DockPanel>
</Grid>
</Window>
// ViewModel
public class MainWindowViewModel : INotifyPropertyChanged
{
public bool ShowView
{
get => _showView;
set
{
_showView = value;
OnPropertyChanged();
}
}
public DelegateCommand ButtonClickedCommand =>
_buttonClickedCommand ?? (_buttonClickedCommand = new DelegateCommand
{
ExecuteAction = (_)=> ShowView = !_showView
});
public void OnPropertyChanged([CallerMemberName] string name = "")=>
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
public event PropertyChangedEventHandler PropertyChanged;
private bool _showView;
private DelegateCommand _buttonClickedCommand;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/288405.html
標籤：WPF