none
Background Image and Color setting in Canvas

    Question

  • Hi,

      How to set the Image and Color as Background Property of Canvas by using DataTemplate?
      Please provide a sample

    Thanks in advance
    Reegan Lourduraj.

    Thursday, March 18, 2010 12:47 PM

Answers

  • Hi Reegan,

    Thank you for your reply!

    You can use DrawingVisual to draw an image and a background color and render the DrawingVisual to a RenderTargetBitmap. The following is a sample.

    DrawingVisual dv = new DrawingVisual();
    DrawingContext dc = dv.RenderOpen();
    BitmapImage bi = new BitmapImage(new Uri("Resource/baby.jpg",UriKind.Relative));
    // draw background color first
    dc.DrawRectangle(Brushes.LightGreen,null, new Rect(new Size(bi.PixelWidth,bi.PixelHeight)));

    // draw a image
    dc.DrawImage(bi,new Rect(new Point(5,5),new Size(bi.PixelWidth-10,bi.PixelHeight-10)));
    dc.Close();

     RenderTargetBitmap rtb = new RenderTargetBitmap(bi.PixelWidth,bi.PixelHeight,bi.DpiX,bi.DpiY,PixelFormats.Pbgra32);

    // render the DrawingVisual to a RenderTargetBitmap
    rtb.Render(dv);

    this.img.Source = rtb;


    Hope this helps.
    If you have any question, please feel free to let me know.

    Sincerely,
    Linda Liu

    • Marked as answer by Linda Liu Thursday, March 25, 2010 10:22 AM
    Wednesday, March 24, 2010 5:24 AM

All replies

  • Hi Reegan,

     

    I’m not sure what you are asking for.  Do you mean the background or color of a Canvas that is inside a DataTemplate?  Would something like the following work for you?

     

    <Page

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

        <Page.Resources>

            <DataTemplate x:Key="Test">

                <Canvas Height="300" Width="300">

                    <Canvas.Background>

                        <ImageBrush ImageSource="pack://siteoforigin:,,,/MyImage.png" />

                    </Canvas.Background>

                    <TextBlock Canvas.Left="150" Canvas.Top="150" Text="MyTextBlock" Height="60" Width="120"></TextBlock>

                </Canvas>

            </DataTemplate>

        </Page.Resources>

     

        <ContentControl ContentTemplate="{StaticResource Test}"/>

     

    </Page>

    Thursday, March 18, 2010 5:28 PM
  • Thanks Bob for your sample.

    Hi Reegan,

    >  How to set the Image and Color as Background Property of Canvas by using DataTemplate?
    I am not sure what you mean in the above sentence, either. You can set the Background property of a Canvas to a Brush, e.g. an ImageBrush or SolidColorBrush. This is nothing to do with the DataTemplate.

    Sincerely,
    Linda Liu


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.
    Welcome to the All-In-One Code Framework! If you have any feedback, please tell us.
    Tuesday, March 23, 2010 5:39 AM
  • Hi Linda,

              I want to set the background image and color both at a time in the canvas. when i used the flip property for the image the color will shown for the remaining

    portion of the canvas? Is it possible for the canvas without using Canvas.

     

    Thanks in Advance,

    Sincerely,

    Reegan Lourduraj.

     

    Tuesday, March 23, 2010 7:30 AM
  • Hi Reegan,

    Thank you for your reply!

    You can use DrawingVisual to draw an image and a background color and render the DrawingVisual to a RenderTargetBitmap. The following is a sample.

    DrawingVisual dv = new DrawingVisual();
    DrawingContext dc = dv.RenderOpen();
    BitmapImage bi = new BitmapImage(new Uri("Resource/baby.jpg",UriKind.Relative));
    // draw background color first
    dc.DrawRectangle(Brushes.LightGreen,null, new Rect(new Size(bi.PixelWidth,bi.PixelHeight)));

    // draw a image
    dc.DrawImage(bi,new Rect(new Point(5,5),new Size(bi.PixelWidth-10,bi.PixelHeight-10)));
    dc.Close();

     RenderTargetBitmap rtb = new RenderTargetBitmap(bi.PixelWidth,bi.PixelHeight,bi.DpiX,bi.DpiY,PixelFormats.Pbgra32);

    // render the DrawingVisual to a RenderTargetBitmap
    rtb.Render(dv);

    this.img.Source = rtb;


    Hope this helps.
    If you have any question, please feel free to let me know.

    Sincerely,
    Linda Liu

    • Marked as answer by Linda Liu Thursday, March 25, 2010 10:22 AM
    Wednesday, March 24, 2010 5:24 AM
  • Hi Linda,

                Thanks for your Reply!

    one more question. still I little bit confused in dependency property. can you help me with the simple example of the dependency property

    and it helps to learn easily the concept

     

    Thanks in advance,

     

    Sincerly,

    Reegan Lourduraj

     

     

    Wednesday, March 24, 2010 6:55 PM
  • Hi Reegan,

    The MSDN document "Dependency Properties Overview" explain dependency property quite well. The following comment is quoted from that document:

    Windows Presentation Foundation (WPF) provides a set of services that can be used to extend the functionality of a common language runtime (CLR) property. Collectively, these services are typically referred to as the WPF property system. A property that is backed by the WPF property system is known as a dependency property.

    A dependency property provides functionality that extends the functionality of a property as opposed to a property that is backed by a field. Often, each such functionality represents or supports a specific feature of the overall WPF set of features: resources, data binding, styles, animations, metadata overrides, property value inheritance, WPF designer integration.

    This MSDN document "Custom Dependency Properties" discusses why to create a dependency property, which will be helpful to you.

    Sincerely,
    Linda Liu 


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.
    Welcome to the All-In-One Code Framework! If you have any feedback, please tell us.
    Thursday, March 25, 2010 2:54 AM
  • Hi Linda,

            thanks For the Nice article of dependency property.       

             Whether it is possible to bind the image,textbox and other shapes to Richtextbox at a time? Please provide me a sample and help to learn.

             Thanks in Advance,

     

    Sincerly,

    Reegan Lourduraj.   

    Monday, March 29, 2010 1:16 PM
  • Hi Linda,

               Thanks For your article on dependency properties.I learned lot from that articles.

                As My Learning Process Continuation I want To study about the Grid Controls. 

                Please be help me by giving the suggestions to study and makes to easier for the UI controls.

     

    Sincerely,

    Reegan Lourduraj.

     

     

     

     

     

    Tuesday, April 06, 2010 6:35 AM