zoukankan      html  css  js  c++  java
  • WPF如何在同一个区域依次叠加显示多张图片呢?

    正如标题的问题,有时需要在已显示的图片的右上角(或其他区域)显示小图标,譬如下图的患者头像右上角显示病情图标:(这里不采用事先用PS编排成一个图片文件的方式,因为此方式普适性不好)

    解决方案:绘制该复合图像(不希望覆盖上一张图片的区域需要将当前图片相应区域处理成透明,不赘述),创建一个 ImageDrawing 并设置它的 ImageDrawing.ImageSource 和 ImageDrawing.Rect 属性。  ImageDrawing.ImageSource    属性指定要绘制的图像,ImageDrawing.Rect 属性指定每个图像的位置和大小。

    <Border Grid.ColumnSpan="3" BorderBrush="Transparent" BorderThickness="2" 
            Visibility="{Binding Converter={x:Static js:Converters.BooleanToVisibility}, Path=IsNormal}">
        <Image Stretch="None" Opacity="{Binding ImageOpacity}">
            <Image.Source>
                <DrawingImage >
                    <DrawingImage.Drawing>
                        <DrawingGroup>
                            <ImageDrawing Rect="0,0,48,48" ImageSource="{Binding Image}"/>
                            <ImageDrawing Rect="38,0,20,20" ImageSource="{Binding Converter={StaticResource IllnessSeverityToImageConverter}, Path=Encounter.IllnessSeverity}"/>
                        </DrawingGroup>
                    </DrawingImage.Drawing>
                </DrawingImage>
            </Image.Source>
        </Image>
    </Border>

    DrawingGroup还可以加入绘制的图形,譬如:

                        <DrawingGroup>
                            <ImageDrawing Rect="0,0,48,48" ImageSource="{Binding Image}"/>
                            <ImageDrawing Rect="38,0,20,20" ImageSource="{Binding Converter={StaticResource IllnessSeverityToImageConverter}, Path=Encounter.IllnessSeverity}"/>
                            <GeometryDrawing Brush="{Binding Converter={StaticResource NurseLevelCodeToBrushConverter}, Path=Encounter.NurseLevel}">
                                                    <GeometryDrawing.Geometry>
                                                        <EllipseGeometry Center="10,50" RadiusX="5"  RadiusY="5"/>
                                                    </GeometryDrawing.Geometry>
                                                    <GeometryDrawing.Pen>
                                                        <Pen Brush="Black" Thickness="0.5" />
                                                    </GeometryDrawing.Pen>
                                                </GeometryDrawing>
                        </DrawingGroup>


    下面是转换器代码:

    public class IllnessSeverityToImageConverter : IValueConverter
    {
        #region IValueConverter Members
        /// <summary>
        /// Convert forward function.
        /// </summary>
        /// <param name="value">The source value.</param>
        /// <param name="targetType">The target type.</param>
        /// <param name="parameter">The parameter.</param>
        /// <param name="culture">The culture info.</param>
        /// <returns>The converted value.</returns>
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            IllnessSeverity severity = value as IllnessSeverity;
            if (severity != null)
            {
                if (severity.Id == IllnessSeverity.Emergent.Id)
                    return ResourceHelper.IllnessSeverityUrgent;
                else if (severity.Id == IllnessSeverity.Critical.Id)
                    return ResourceHelper.IllnessSeverityDangerous;
                else
                    return null;
            }
    
            return null;
        }
    
        /// <summary>
        /// Convert back function.
        /// </summary>
        /// <param name="value">The source value.</param>
        /// <param name="targetType">The target type.</param>
        /// <param name="parameter">The parameter.</param>
        /// <param name="culture">The culture info.</param>
        /// <returns>The converted back value.</returns>
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    
        #endregion
    }
  • 相关阅读:
    【LeetCode】589.N叉树的前序遍历(递归+迭代,java实现,详细分析)
    百度网盘偷偷更新,终于实现免费不限速了!
    如何调整DOS窗口的宽高
    输入adb shell 时 提示error: more than one device and emulator
    logcat不显示信息
    安卓打开File Explorer里面不显示内容
    android查看源码的时候看不了
    This version of the rendering library is more recent than your version of ADT plug-in. Please update
    eclipse或者AS链接手机真机之后,logcat里面日志信息乱跳
    Android ADB使用之详细篇
  • 原文地址:https://www.cnblogs.com/chriskwok/p/3480750.html
Copyright © 2011-2022 走看看