如何将WPF的Image Source属性设置为画布而不是图像URL？

Question

<Canvas x:Key="myCanvas" 
    MinHeight="30" MinWidth="30" Clip="F1 M 0,0L 48,0L 48,48L 0,48L 0,0" >
    <Path Data="F1M1737.61,7339.85C1720.49,7342.44 1709.83,7334.36 1709.83,7334.36  1701.44,7341.47 1682.84,7340.17 1682.84,7340.17 1682.66,7388.31 1709.83,7397.03 1709.83,7397.03 1741.17,7386.37 1737.61,7339.85 1737.61,7339.85 M1709.54,7386.88C1707.5,7386.88 1705.85,7385.23 1705.85,7383.18 1705.85,7381.14 1707.5,7379.49 1709.54,7379.49 1711.58,7379.49 1713.23,7381.14 1713.23,7383.18 1713.23,7385.23 1711.58,7386.88 1709.54,7386.88 M1712.37,7367.58C1712.37,7367.58 1712.28,7370.72 1710.94,7372.06 1710.94,7372.06 1709.33,7373.48 1707.54,7371.61 1707.54,7371.61 1707.09,7370.31 1706.47,7366.75L1705.48,7352.56 1705.48,7348.72C1705.48,7348.72 1705.59,7345.14 1709.61,7344.51 1709.61,7344.51 1713.36,7344.34 1713.53,7348.27 1713.53,7348.27 1713.98,7352.56 1712.37,7367.58" Stretch="Uniform" Fill="#FFF1A603" Width="26" Height="26" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
        <Path.RenderTransform>
            <TransformGroup>
                <TransformGroup.Children>
                    <RotateTransform Angle="0" />
                    <ScaleTransform ScaleX="1" ScaleY="1" />
                </TransformGroup.Children>
             </TransformGroup>
        </Path.RenderTransform>
    </Path>
</Canvas>

我该如何将WPF的Image Source属性设置为画布而不是图像URL？类似于这样：

<Image Source"{StaticResource MyCanvas}"/>

- Alex David

Answer 1

你似乎有些困惑……你问我们是否可以将类型为ImageSource的Image.Source属性设置为Canvas对象。我相信你会知道这是不可能的，因为Canvas不是ImageSource。

然而，我认为你实际上想要找出的是如何从资源部分显示Canvas。如果是这样，那么有一个更简单的方法……你只需在ContentControl中显示它，像这样：

<ContentControl Content="{StaticResource myCanvas}" />

- Sheridan

Answer 2

要在图像控件中显示绘图，您可以使用DrawingImage作为图像控件的源，并使用要显示的绘图。有关更多详细信息，请访问此处。

   <DrawingImage x:Key='Skippy'>
        <DrawingImage.Drawing>
            <GeometryDrawing Brush="#FFF1A603" Geometry="F1M1737.61,7339.85C1720.49,7342.44 1709.83,7334.36 1709.83,7334.36  1701.44,7341.47 1682.84,7340.17 1682.84,7340.17 1682.66,7388.31 1709.83,7397.03 1709.83,7397.03 1741.17,7386.37 1737.61,7339.85 1737.61,7339.85 M1709.54,7386.88C1707.5,7386.88 1705.85,7385.23 1705.85,7383.18 1705.85,7381.14 1707.5,7379.49 1709.54,7379.49 1711.58,7379.49 1713.23,7381.14 1713.23,7383.18 1713.23,7385.23 1711.58,7386.88 1709.54,7386.88 M1712.37,7367.58C1712.37,7367.58 1712.28,7370.72 1710.94,7372.06 1710.94,7372.06 1709.33,7373.48 1707.54,7371.61 1707.54,7371.61 1707.09,7370.31 1706.47,7366.75L1705.48,7352.56 1705.48,7348.72C1705.48,7348.72 1705.59,7345.14 1709.61,7344.51 1709.61,7344.51 1713.36,7344.34 1713.53,7348.27 1713.53,7348.27 1713.98,7352.56 1712.37,7367.58"/>
        </DrawingImage.Drawing>
    </DrawingImage>

 <Image Source="{StaticResource Skippy}"  Height="30" Width="30"/>

你的路径必须使用Expression Blend实现，这就是为什么它显示额外内容如Path.RenderTransform。无论如何，我们两个代码的输出都是相同的。

输出：

- Heena

Answer 3

看看这篇文章this，我觉得它描述了你想要实现的内容。

基本上，你不能直接将图像源绑定到画布，所以这里的想法是将画布转换为图像，并使用该图像代替画布本身。

int Height = (int)myCanvas.ActualHeight;
int Width = (int)myCanvas.ActualWidth;
RenderTargetBitmap bmp = new RenderTargetBitmap(Width, Height, 96, 96, PixelFormats.Pbgra32);
bmp.Render(myCanvas);

string file = filename; //asuming you pass the file as an argument

string Extension = System.IO.Path.GetExtension(file).ToLower();
BitmapEncoder encoder;            

if (Extension == ".gif") 
    encoder = new GifBitmapEncoder();            
else if (Extension == ".png")
    encoder = new PngBitmapEncoder();            
else if (Extension == ".jpg")
    encoder = new JpegBitmapEncoder();            
else
    return;

encoder.Frames.Add(BitmapFrame.Create(bmp));

using (Stream stm = File.Create(file))
{
    encoder.Save(stm);
}

- Mario Stoilov

---

嘿，Mario，SO有一个政策要求提供更多细节，尤其是不要仅仅依赖链接。请添加更多细节，否则您的答案可能会被删除，谢谢。 - penderi

Answer 4

<Path x:Key="ErrorIcon" 
    Data="F1M874.094,289.369L854.3,254.63C854.028,254.151 853.515,253.856 852.958,253.856 852.403,253.856 851.89,254.151 851.617,254.63L831.824,289.369C831.555,289.84 831.559,290.416 831.835,290.883 832.111,291.348 832.618,291.634 833.165,291.634L872.752,291.634C873.299,291.634 873.805,291.348 874.081,290.883 874.357,290.416 874.361,289.84 874.094,289.369 M855.653,287.189L850.264,287.189 850.264,282.745 855.653,282.745 855.653,287.189z M855.653,279.41L850.264,279.41 850.264,266.077 855.653,266.077 855.653,279.41z"
    Width="22" 
    Height="22" 
    Stretch="Fill" 
    Fill="Red" >
</Path>

<Path x:Key="WarningIcon" 
    Data="F1M1737.61,7339.85C1720.49,7342.44 1709.83,7334.36 1709.83,7334.36 1701.44,7341.47 1682.84,7340.17 1682.84,7340.17 1682.66,7388.31 1709.83,7397.03 1709.83,7397.03 1741.17,7386.37 1737.61,7339.85 1737.61,7339.85 M1709.54,7386.88C1707.5,7386.88 1705.85,7385.23 1705.85,7383.18 1705.85,7381.14 1707.5,7379.49 1709.54,7379.49 1711.58,7379.49 1713.23,7381.14 1713.23,7383.18 1713.23,7385.23 1711.58,7386.88 1709.54,7386.88 M1712.37,7367.58C1712.37,7367.58 1712.28,7370.72 1710.94,7372.06 1710.94,7372.06 1709.33,7373.48 1707.54,7371.61 1707.54,7371.61 1707.09,7370.31 1706.47,7366.75L1705.48,7352.56 1705.48,7348.72C1705.48,7348.72 1705.59,7345.14 1709.61,7344.51 1709.61,7344.51 1713.36,7344.34 1713.53,7348.27 1713.53,7348.27 1713.98,7352.56 1712.37,7367.58"
    Stretch="Uniform" 
    Fill="#FFF1A603" 
    Width="26" 
    Height="26" 
    Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
</Path>

<Path x:Key="BlankIcon" 
    Data="F1M1737.61,7339.85C1720.49,7342.44 1709.83,7334.36 1709.83,7334.36 1701.44,7341.47 1682.84,7340.17 1682.84,7340.17 1682.66,7388.31 1709.83,7397.03 1709.83,7397.03 1741.17,7386.37 1737.61,7339.85 1737.61,7339.85 M1709.54,7386.88C1707.5,7386.88 1705.85,7385.23 1705.85,7383.18 1705.85,7381.14 1707.5,7379.49 1709.54,7379.49 1711.58,7379.49 1713.23,7381.14 1713.23,7383.18 1713.23,7385.23 1711.58,7386.88 1709.54,7386.88 M1712.37,7367.58C1712.37,7367.58 1712.28,7370.72 1710.94,7372.06 1710.94,7372.06 1709.33,7373.48 1707.54,7371.61 1707.54,7371.61 1707.09,7370.31 1706.47,7366.75L1705.48,7352.56 1705.48,7348.72C1705.48,7348.72 1705.59,7345.14 1709.61,7344.51 1709.61,7344.51 1713.36,7344.34 1713.53,7348.27 1713.53,7348.27 1713.98,7352.56 1712.37,7367.58"
    Stretch="Uniform" 
    Fill="Wheat" 
    Width="0" 
    Height="0" 
    Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
</Path>  

<Canvas MinHeight="30" MinWidth="30" Clip="F1 M 0,0L 48,0L 48,48L 0,48L 0,0">
    <ContentControl>
        <ContentControl.Content>
            <MultiBinding Converter="{StaticResource ErrorToIconConverter}">
                <Binding Path="Name" Mode="OneWay" ></Binding>
            </MultiBinding>
         </ContentControl.Content>
    </ContentControl>
</Canvas>

public class ErrorToIconConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        string s = values[0].ToString();

        if (values != null && values[0] != null && values[0] != DependencyProperty.UnsetValue)
        {
            if (values[0].ToString().ToLower().Contains("warn"))
            {
                return Application.Current.FindResource("WarningIcon");
            }
            else if(values[0].ToString().ToLower().Contains("fatal"))
            {
                return Application.Current.FindResource("ErrorIcon");
            }
        }

        return Application.Current.FindResource("BlankIcon");
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

使用图像无法实现此目标。因此，我创建了一个带有ContentControl的Canvas。现在将ContentControl的Content属性设置为转换器返回的适当路径资源。

- Alex David