locked
Usercontrol does not display image at runtime RRS feed

  • Question

  • Hi

    Im making a silverlight website, and an using a Silverlight Control Library, where im developing various usercontrols to include in the Silverlight Application+Website project.

    One of the usercontrols is to be a button with an image control in it. When the user creates the usercontrol in the MainPage.xaml the usercontrol is looks as expected and operates in design time as it should. With regards to the image, in the Silverlight Control Library, where i created the usercontrol, i assigned a default 'placeholder' image. It is displayed and at runtime renders and displays correctly.

    I inserted a few images and usercontrols into the Silverlight Application project of the Silverlight Application+Website project.

    Now, when i set the image Property of the usercontrols the images are displayed and everything looks fine. This is in design time.

    When i run the project, this is when i noticed that of the three usercontrols images set, two where not displaying images.

    Please could someone have a look at my usercontrols and codebehind and assist me to work this out.

    USERCONTROL CODE

    <UserControl
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" x:Name="EmmiCategory1"
     mc:Ignorable="d"
     x:Class="EmmiCntLib.EmmiCategory" Height="134" Width="276">

     <Grid x:Name="buttongrid" d:LayoutOverrides="Width">
      <Rectangle x:Name="backgroundrectangle" Fill="Black" RadiusY="8" RadiusX="8" Stroke="White" StrokeThickness="2" StrokeMiterLimit="5"/>
      <TextBlock x:Name="txtCategoryText" Height="29" Margin="72,8,8,0" TextWrapping="Wrap" Text="CategoryText" VerticalAlignment="Top" Foreground="White" FontWeight="Bold" FontSize="21.333"/>
      <Border x:Name="borDescText" BorderBrush="White" BorderThickness="1" Margin="8,72,8,8" CornerRadius="4">
       <TextBlock x:Name="txtDescriptionText" Margin="7" TextWrapping="Wrap" Text="Description Text" Foreground="White"/>
      </Border>
      <Border x:Name="borImgCountBorder" BorderThickness="1" Margin="72,44,0,0" Height="23" VerticalAlignment="Top" CornerRadius="4" HorizontalAlignment="Left" Width="75" RenderTransformOrigin="0.5,0.5" d:LayoutOverrides="HorizontalAlignment">
       <Border.RenderTransform>
        <CompositeTransform/>
       </Border.RenderTransform>
       <TextBlock x:Name="txtImageCount" Margin="0" TextWrapping="Wrap" Text="Images=999" Foreground="White" Width="73" Height="15" HorizontalAlignment="Center" VerticalAlignment="Center"/>
      </Border>
      <ScrollViewer x:Name="scvImageContainer" HorizontalAlignment="Left" Margin="8,8,0,0" Width="60" Height="60" ScrollViewer.VerticalScrollBarVisibility="Disabled" VerticalAlignment="Top">
       <Image x:Name="imgCategoryImage" Height="60" Source="/EmmiCntLib;component/Images/Placeholders/PlaceHolder60.png" Width="60" HorizontalAlignment="Center" VerticalAlignment="Center"/>
      </ScrollViewer>
     </Grid>
    </UserControl>

     

    C# CODE BEHIND

    using

     

     

    System;

    using System.Windows;

    using

     

     

    System.Windows.Controls;

    using

     

     

    System.Windows.Documents;

    using

     

     

    System.Windows.Ink;

    using

     

     

    System.Windows.Input;

    using

     

     

    System.Windows.Media;

    using

     

     

    System.Windows.Media.Animation;

    using

     

     

    System.Windows.Shapes;

    namespace

     

     

    EmmiCntLib

    {

     

     

    public partial class EmmiCategory : UserControl

    {

     

     

    private Boolean vDisplayImage = false;

     

     

     

    public ImageSource EmmiImageSource

    {

     

     

    get

    {

     

     

    return imgCategoryImage.Source;

    }

     

     

    set

    {

     

    imgCategoryImage.Source =

     

    value;

    }

    }

     

     

    public EmmiCategory()

    {

     

     

    // Required to initialize variables

    InitializeComponent();

     

     

    this.EmmiDisplayImage = false;

    }

     

    }

    }

    Sunday, December 5, 2010 11:01 AM

Answers

  • So here is the xaml where you use the control (this is what I needed to see):

     

     <EmmiCntLib:EmmiImgPurchase Height="58" HorizontalAlignment="Left" Margin="12,260,0,0" Name="emmiImgPurchase1" VerticalAlignment="Top" Width="63" />
    
      <EmmiCntLib:EmmiCategory Height="136" HorizontalAlignment="Left" Margin="163,12,0,0" Name="emmiCategory1" VerticalAlignment="Top" Width="325" d:LayoutOverrides="VerticalAlignment" EmmiCategoryText="Sculptures" EmmiDescriptionText="" EmmiImageCountText="10" EmmiDisplayImage="True" EmmiImageSource="Images/t_cw0002.JPG" />
    
      <EmmiCntLib:EmmiCategory Height="111" HorizontalAlignment="Left" Margin="163,167,0,0" x:Name="emmiCategory1_Copy" VerticalAlignment="Top" Width="325" EmmiCategoryText="Clay" EmmiDescriptionText="All pieces are original" EmmiImageCountText="22" EmmiImageSource="Images/t_nw0005.JPG" EmmiDisplayImage="True" />
    
      <EmmiCntLib:EmmiCategory EmmiCategoryText="Cars" EmmiDescriptionText="" EmmiDisplayImage="True" EmmiImageCountText="2" EmmiImageSource="Images/t_nw0011.JPG" Height="77" x:Name="emmiCategory1_Copy1" Width="Auto" Margin="163,0,107,65" VerticalAlignment="Bottom" />
    
     
    
    
    Currently in your project, the images are set to the Resource build action, which embeds them into the assembly (.dll file). Because they reside in the SL app assembly, the Library assembly can't access them. If you change the build action of the images you want to use in this way to "Content", they will be placed inside the XAP as image files, and all assemblies in the XAP will be able to access them.  I created a small repro project and this does work, both in Blend and at runtime. I can't answer why it works properly in Blend currently, must be a side effect of how the build/hosting works in Blend that the files are present in both resource and copied forms.

     

    There is no UI available in Blend to change the build action, so that leaves 2 options:

    1. Open the .csproj file with a text editor and change Content to Resource in a section like this:

     <Resource Include="buttons.PNG" />
        <Content Include="cap.PNG" />

    2. Open your sln in Visual studio, right click each image, pick properties, and select Content as the build action.

     

    Hi Chuck

     

    I did Steps 1 and 2 as above and it still never worked so i then did the following and it worked

    1. Open the solution in C#
    2. Select the image, so that you can see the properties in the [Properties] window
    3. Change the [Build Action] from [Resource] to [Content]
    4. Change the [Copy to Output Directory] from [Do Not Copy] to [Copy Always]
    5. Save and Build the solution

    This worked!!

     

    Thanks for the assistence

    • Marked as answer by Fabfella Saturday, February 19, 2011 11:49 PM
    Saturday, February 19, 2011 11:49 PM

All replies

  • How/where are you setting the image source?
    Monday, December 6, 2010 2:36 PM
    Moderator
  • Hi Chuck

    The image source is set in the C# code behind. I know in my original post the code behind code seems spread out but its there.... promise

    :-)

     

    Tuesday, December 7, 2010 4:13 AM
  • I have tried to encapsulate the Image control in pretty much all the container types and nothing seems to be working.

    I have even tried diffrent image sizes and that also does not work

    Anyone have any ideas or references

    Tuesday, December 7, 2010 4:23 AM
  • I meant when you use the usercontrol, in theory at some point you create this usercontrol in xaml and set the EmmiImageSource property.
    Tuesday, December 7, 2010 1:53 PM
    Moderator
  • Yeah

    I set the Image source when i was creating it, this image was to inform the final user that no image is currenly set. Then once i hade referenced it in the Silverlight Application project, i set it to the image that i wanted

     

    (1)Library ->    (2)SilverlightApplication  ->   (3)WebSite

    1)Usercontrol with image control

    1)Image control has default image set to as a placeholder

    1)Contains a PlaceHolder.PNG image

    1)Create a costom property in C# to set the ImageSource of the image control

     

    2)References the Library

    2)Creates multiple instances of the usercontrol on the MainPage.XAML, three of them for kicks

    2)Set the ImageSource of each control to display a diffrent image using the custom property

    2)Silverlight Application holds these images 1.JPG, 2.JPG, 3.JPG. Height and Widths vary from 80x80 to 2000x6000

    2)All the images are displayed at design time

     

    3)The tie up between the SilverlightApplication and the WebSite is created when you create the MS Expression Blend project

    3)The WebSites HTML page is the one that is referenced when the project is run

    3)Certain images are displayed

    Thursday, December 9, 2010 2:54 AM
  • What I need to see is the usage, in #2, where you set your custom property in xaml.

    Can you post a link to your .xap file after a build someplace? I can take a look at that to see if I can diagnose the problem.

    Thursday, December 9, 2010 3:27 PM
    Moderator
  • Hi Chuck

    Here is the link to the XAP file

     

    Thursday, December 9, 2010 11:12 PM
  • So here is the xaml where you use the control (this is what I needed to see):

     <EmmiCntLib:EmmiImgPurchase Height="58" HorizontalAlignment="Left" Margin="12,260,0,0" Name="emmiImgPurchase1" VerticalAlignment="Top" Width="63" />
        <EmmiCntLib:EmmiCategory Height="136" HorizontalAlignment="Left" Margin="163,12,0,0" Name="emmiCategory1" VerticalAlignment="Top" Width="325" d:LayoutOverrides="VerticalAlignment" EmmiCategoryText="Sculptures" EmmiDescriptionText="" EmmiImageCountText="10" EmmiDisplayImage="True" EmmiImageSource="Images/t_cw0002.JPG" />
        <EmmiCntLib:EmmiCategory Height="111" HorizontalAlignment="Left" Margin="163,167,0,0" x:Name="emmiCategory1_Copy" VerticalAlignment="Top" Width="325" EmmiCategoryText="Clay" EmmiDescriptionText="All pieces are original" EmmiImageCountText="22" EmmiImageSource="Images/t_nw0005.JPG" EmmiDisplayImage="True" />
        <EmmiCntLib:EmmiCategory EmmiCategoryText="Cars" EmmiDescriptionText="" EmmiDisplayImage="True" EmmiImageCountText="2" EmmiImageSource="Images/t_nw0011.JPG" Height="77" x:Name="emmiCategory1_Copy1" Width="Auto" Margin="163,0,107,65" VerticalAlignment="Bottom" />
      
    
    Currently in your project, the images are set to the Resource build action, which embeds them into the assembly (.dll file). Because they reside in the SL app assembly, the Library assembly can't access them. If you change the build action of the images you want to use in this way to "Content", they will be placed inside the XAP as image files, and all assemblies in the XAP will be able to access them.  I created a small repro project and this does work, both in Blend and at runtime. I can't answer why it works properly in Blend currently, must be a side effect of how the build/hosting works in Blend that the files are present in both resource and copied forms.

    There is no UI available in Blend to change the build action, so that leaves 2 options:

    1. Open the .csproj file with a text editor and change Content to Resource in a section like this:

     <Resource Include="buttons.PNG" />
        <Content Include="cap.PNG" />

    2. Open your sln in Visual studio, right click each image, pick properties, and select Content as the build action.

     

    Friday, December 10, 2010 2:55 PM
    Moderator
  • So here is the xaml where you use the control (this is what I needed to see):

     

     <EmmiCntLib:EmmiImgPurchase Height="58" HorizontalAlignment="Left" Margin="12,260,0,0" Name="emmiImgPurchase1" VerticalAlignment="Top" Width="63" />
    
      <EmmiCntLib:EmmiCategory Height="136" HorizontalAlignment="Left" Margin="163,12,0,0" Name="emmiCategory1" VerticalAlignment="Top" Width="325" d:LayoutOverrides="VerticalAlignment" EmmiCategoryText="Sculptures" EmmiDescriptionText="" EmmiImageCountText="10" EmmiDisplayImage="True" EmmiImageSource="Images/t_cw0002.JPG" />
    
      <EmmiCntLib:EmmiCategory Height="111" HorizontalAlignment="Left" Margin="163,167,0,0" x:Name="emmiCategory1_Copy" VerticalAlignment="Top" Width="325" EmmiCategoryText="Clay" EmmiDescriptionText="All pieces are original" EmmiImageCountText="22" EmmiImageSource="Images/t_nw0005.JPG" EmmiDisplayImage="True" />
    
      <EmmiCntLib:EmmiCategory EmmiCategoryText="Cars" EmmiDescriptionText="" EmmiDisplayImage="True" EmmiImageCountText="2" EmmiImageSource="Images/t_nw0011.JPG" Height="77" x:Name="emmiCategory1_Copy1" Width="Auto" Margin="163,0,107,65" VerticalAlignment="Bottom" />
    
     
    
    
    Currently in your project, the images are set to the Resource build action, which embeds them into the assembly (.dll file). Because they reside in the SL app assembly, the Library assembly can't access them. If you change the build action of the images you want to use in this way to "Content", they will be placed inside the XAP as image files, and all assemblies in the XAP will be able to access them.  I created a small repro project and this does work, both in Blend and at runtime. I can't answer why it works properly in Blend currently, must be a side effect of how the build/hosting works in Blend that the files are present in both resource and copied forms.

     

    There is no UI available in Blend to change the build action, so that leaves 2 options:

    1. Open the .csproj file with a text editor and change Content to Resource in a section like this:

     <Resource Include="buttons.PNG" />
        <Content Include="cap.PNG" />

    2. Open your sln in Visual studio, right click each image, pick properties, and select Content as the build action.

     

    Hi Chuck

     

    I did Steps 1 and 2 as above and it still never worked so i then did the following and it worked

    1. Open the solution in C#
    2. Select the image, so that you can see the properties in the [Properties] window
    3. Change the [Build Action] from [Resource] to [Content]
    4. Change the [Copy to Output Directory] from [Do Not Copy] to [Copy Always]
    5. Save and Build the solution

    This worked!!

     

    Thanks for the assistence

    • Marked as answer by Fabfella Saturday, February 19, 2011 11:49 PM
    Saturday, February 19, 2011 11:49 PM