WPF 添加半透明的遮罩层AdornerLayer，微信搜索效

最新推荐文章于 2024-07-19 10:29:15 发布

原创最新推荐文章于 2024-07-19 10:29:15 发布 · 6.9k 阅读

1 ·

CC 4.0 BY-SA版权

C# 同时被 2 个专栏收录

12 篇文章

订阅专栏

WPF

10 篇文章

订阅专栏

在一个page页面上添加一个半透明的遮罩层，遮罩层里显示一个用户控件。效果就是微信的winows版的搜索功能。

这里要借助AdornerLayer实现弹出遮罩层，半透效果在用户控件中定义。

1、首先自定义一个用户控件。这里就不描述了。怎么制作半透明的控件和窗体，请参照我的另外一个博文：

2、然后定义一个类，继承Adorner。

代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Documents;
using System.Windows.Media;
using Doit.Chat.Views.Control.SearchResultControl;

namespace Doit.Chat.Views.Adorners {
public class SearchAdorner: Adorner {

    private SearchResultControl searchResultControl;
    private VisualCollection visualCollection;
    public SearchResultControl ResultControl {
        get {
            return searchResultControl;
        }
    }

    public SearchAdorner(UIElement adornedElement) : base(adornedElement) {
        visualCollection = new VisualCollection(this);
        searchResultControl = new SearchResultControl();
        visualCollection.Add(searchResultControl);
    }

    protected override int VisualChildrenCount {
        get {
            return visualCollection.Count;
        }
    }

    protected override Visual GetVisualChild(int index) {
        return visualCollection[index];
    }

    protected override void OnRender(DrawingContext drawingContext) {
    }

    protected override Size ArrangeOverride(Size finalSize) {
        // where to position the customControl...this is relative to the element you are adorning
        double x = 0;
        double y = 0;
        searchResultControl.Arrange(new Rect(x, y, finalSize.Width - 1, finalSize.Height)); // you need to arrange

        // Return the final size.
        return finalSize;
    }
}
}

SearchResultControl 就是定义的控件。

3、添加该遮罩层到目标的控件上。

定义遮罩层对象和AdornerLayer对象：

    private AdornerLayer searchAdornerLayer = null;
    private SearchAdorner searchAdorner = null;

取得AdornerLayer对象，并把遮罩层对象添加进去，ScrollViewer 是遮罩层要覆盖的控件对象：

        
// 初始化搜索窗体
        searchAdornerLayer = AdornerLayer.GetAdornerLayer(ScrollViewer);
        searchAdorner = new SearchAdorner(ScrollViewer);
        searchAdorner.ResultControl.SetMouseDoubleClickEvent(new MouseButtonEventHandler(SearchResult_MouseDoubleClick));
        searchAdornerLayer.Add(searchAdorner);
        searchAdornerLayer.Visibility = Visibility.Hidden; // 初始化隐藏遮罩层

4、显示和隐藏遮罩层：

searchAdornerLayer.Visibility = Visibility.Visible; // 显示遮罩层
searchAdornerLayer.Visibility = Visibility.Hidden; // 初始化隐藏遮罩层

其中取得GetAdornerLayer会返回null。原因是：自定义窗体样式的时候把AdornerDecorator弄丢了。

解决方法就是，添加进窗体：

<Page>
    <AdornerDecorator Margin="0">
        <Grid>
            // 窗体或page内容
        </Grid>
    </AdornerDecorator>
</Page>