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
}