zoukankan      html  css  js  c++  java
  • Silverlight笔记:模态窗体的实现

    Silverlight2下本身没有模态窗体的实现,虽然本身有Messagebox.Show但是对于复杂的应用来说是很难满足需求的。这个时候我们就需要自己来实现模态窗体这样的效果。实际上实现的原理是很简单的,我们的主界面在一个Grid容器里,而模态窗体在一个Grid容器里,这个时候逻辑实际上就变成了Grid里一个按钮被单击后,以及模态窗体的关闭按钮被单击后,它们哪一个层在上面哪一个在下面的问题了,这里我们需要用到一个属性:

    Canvas.ZIndex

    数字越大就越排在上面。

    各层的排列如下图:

    gdParent为父容器层。

    gdBody为主界面曾。

    gdMessage为模态窗体层。

    image

    <Grid Height="300" x:Name="gdParent" Width="400">
        <Grid x:Name="gdBody" Canvas.ZIndex="1" d:IsHidden="True">
            <Rectangle Fill="#FFFFFFFF" Stroke="#FF000000"/>
            <Button Height="32" Width="96" Content="单击" x:Name="btnTest" HorizontalAlignment="Left" Margin="24,16,0,0" VerticalAlignment="Top"/>
        </Grid>
        <Grid x:Name="gdMessage" Opacity="1" Canvas.ZIndex="0">
            <Rectangle Stroke="#FF000000" Opacity="0.2" Fill="#FFC8D4E6"/>
            <Rectangle Stroke="#FF000000" Margin="72,40,88,66" Fill="#FFFFFFFF"/>
            <TextBlock Text="我是一个模态窗体" TextWrapping="Wrap" FontSize="20" Margin="90,103,106.359,125"/>
            <Button Height="25" Width="48" Content="关闭" x:Name="btnClose" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,32,96,0"/>
        </Grid>
    </Grid>

    gdBody层在Blend里预览如下所示:

    image

    画这个层的时候需要注意的是,即使没有背景颜色,最好也给背景色指定成白色,这样当主界面显示的时候,下面的模态窗体层才不会显示出来。

    gdMessage层在Blend里预览如下所示:

    image

    这个层需要注意的是,我们为了不让模态窗体出现的时候主界面的按钮被单击到(但是还要被看到,类似vista下的UAC),需要一个东西来做遮罩。我考虑过在Grid上直接加,但问题是,它需要有一个透明度,这样一来里面所有的元素都会具有这个不透明度属性。所以这里我是单独添加的一个Rectangle,用它来做遮罩,从而避免了这个问题。

    另,即使这个遮罩不想使用任何颜色,那么也要给它强制指定一个背景颜色,然后把其透明度设置成0,因为假如在WPF下画一个矩形,只给它指定了边框颜色而没有填充颜色的话,那么鼠标能触发的区域实际上只是一个边框,只有有背景色后,哪怕其是完全透明的,那么这个矩形里面的区域才可以被鼠标触发.

    以下是后台代码的实现:

    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
            btnClose.Click += new RoutedEventHandler(btnClose_Click);
            btnTest.Click += new RoutedEventHandler(btnTest_Click);
        }

        void btnTest_Click(object sender, RoutedEventArgs e)
        {
            gdBody.SetValue(Canvas.ZIndexProperty, 0);
            gdMessage.SetValue(Canvas.ZIndexProperty,1);
        }

        void btnClose_Click(object sender, RoutedEventArgs e)
        {
            gdBody.SetValue(Canvas.ZIndexProperty, 1);
            gdMessage.SetValue(Canvas.ZIndexProperty, 0);
        }
    }

    以下是运行效果图:

    image

    刚开始运行的时候只有一个Button,点击之后,出现如上界面。这个时候刚才的那个按钮是无法背点击的。

    本文示例代码在这里下载

  • 相关阅读:
    redis 批量删除key
    控制台直接执行sql语句
    item2 快捷键
    mac mamp环境 PHP命令行反应缓慢解决
    composer gitlab 搭建私包
    PostgreSql命令
    maven 程序包com.sun.image.codec.jpeg
    lumen配置日志daily模式
    PHPStorm怎么修改选中的背景颜色呢?
    vim 配置文件.vimrc,高亮+自动缩进+行号+折叠+优化
  • 原文地址:https://www.cnblogs.com/aspnetx/p/1447030.html
Copyright © 2011-2022 走看看