如何将wpf的Image Source属性设置为canvas而不是image url？

<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>

How can i set wpf's Image Source property to canvas instead of image url ?

如何将wpf的Image Source属性设置为canvas而不是image url?

Something like this

像这样的东西

<Image Source"{StaticResource MyCanvas}"/>

4 个解决方案

#1

To display a Drawing with an Image control,you can use a DrawingImage as the Image control's Source and the drawing you want to display.For more details visit here

要使用图像控件显示图形,可以使用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"/>

and your path is must be implemented using expression blend thats why it is showing extra stuff like Path.RenderTransform.anyway output from our both code is same.

并且你的路径必须使用表达式混合来实现,这就是为什么它显示了像Path.RenderTransform.anway这两个代码输出的额外东西是相同的。

Output

#2

You seem to be somewhat confused... you are asking if we can set the Image.Source property, which is of type ImageSource to a Canvas object. Well I'm pretty sure that you would know that you simply can't do that because a Canvas is not a ImageSource.

你似乎有些困惑......你问我们是否可以将Image.Source属性设置为Canvas对象。好吧,我很确定你会知道你根本不能这样做因为Canvas不是ImageSource。

However, what I think you are actually wanting to find out is how to display your Canvas from your Resources section. If that is what you are after, then there is a much simpler way to do that... you can just display it in a ContentControl like this:

但是,我认为您实际想要了解的是如何从您的参考资料部分显示您的Canvas。如果这就是你所追求的,那么有一种更简单的方法可以做到这一点......你可以在ContentControl中显示它,如下所示:

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

#3

Take a look at this article, I think it describes what you are trying to achieve.

看看这篇文章,我认为它描述了你想要实现的目标。

Basically, you cannot tie an Image source directly to a canvas, so the idea here is to convert the canvas to an image and use that image instead of the canvas itself

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

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);
}

#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();
    }
}

It cannot be achieved using Image. Therefore i created a Canvas with a ContentControl. Now set the Content property ContentControl to the appropriate Path resource returned by the converter.

使用Image无法实现。因此我用ContentControl创建了一个Canvas。现在将Content属性ContentControl设置为转换器返回的相应Path资源。