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

来源：互联网发布：淘宝店铺短连接怎么弄编辑：程序博客网时间：2024/06/06 03:41

在一个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>

0 0