How To Add an Application Logo Background Similar To the Feature Dropped After Beta

Back during the LightSwitch 2011 Beta, one could specify a Logo Image in the LightSwitch Application Properties page, and it would appear in the background of the main window area (see Beth Massi’s post on Adding Static Images and Logos to LightSwitch Applications). It wasn’t the most useful of logo locations, as it was usually covered up by open screens, so this feature was removed by the time the product was released.

However, I’ve seen a few people ask how they could regain the capability with the default shell/theme. Here’s one approach, though it’s a bit sloppy and prone to break if you swap shells.

1. In Solution explorer, switch to File Mode and add a folder in the Client subproject called Resources

2. Add your logo image there… in this example I’ve named it MyLogoBackgroundImage.jpg

3. In the properties of the image, set “Build Action” to “Embedded Resource”

4. In whichever screen of your LightSwitch project that is set as the startup screen, click “Write Code” and choose the Created method… add this code there:

this.FindControl("ScreenLayout").ControlAvailable += (s, e) =>
{
    var image = new System.Windows.Media.Imaging.BitmapImage();
    image.SetSource(
        System.Reflection.Assembly.GetExecutingAssembly().GetManifestResourceStream(
        Application.Current.Details.Name + ".Resources.MyLogoBackgroundImage.jpg"));
    var imageBrush = new System.Windows.Media.ImageBrush();
    imageBrush.ImageSource = image;
    imageBrush.Opacity = .5; // or whatever opacity you prefer
    var current = (e.Control) as System.Windows.DependencyObject;
    var last = current;
    while (current != null)
    {
        var frameworkElement = current as System.Windows.FrameworkElement;
        if (current is System.Windows.Controls.Grid 
            && frameworkElement != null 
            && frameworkElement.Name == "TemplateTop")
            {
                break;
            }
        last = current;
        current = System.Windows.Media.VisualTreeHelper.GetParent(current);
    };


    var border = last as System.Windows.Controls.Border;
    if (border != null)
        border.Background = imageBrush;
};

(note This code works in the VS 11 Beta… if you’re using Lightswitch 2011, change the FindControl line to use the name of some other control on your screen instead of ScreenLayout).

Or in VB, try

Private Sub MyScreen_Created()
    AddHandler Me.FindControl("SomeKnownControlOnScreen").ControlAvailable, AddressOf InsertBackgroundImage
End Sub

Private Sub InsertBackgroundImage(s As Object, e As ControlAvailableEventArgs)
	Dim image = New System.Windows.Media.Imaging.BitmapImage()
	image.SetSource(System.Reflection.Assembly.GetExecutingAssembly().GetManifestResourceStream("MyLogoBackgroundImage.jpg"))
	Dim imageBrush = New System.Windows.Media.ImageBrush()
	imageBrush.ImageSource = image
	imageBrush.Opacity = 0.5
	' or whatever opacity you prefer
	Dim current = TryCast(e.Control, System.Windows.DependencyObject)
	Dim last = current
	While current IsNot Nothing
		Dim frameworkElement = TryCast(current, System.Windows.FrameworkElement)
		If TypeOf current Is System.Windows.Controls.Grid AndAlso frameworkElement IsNot Nothing AndAlso frameworkElement.Name = "TemplateTop" Then
			Exit While
		End If
		last = current
		current = System.Windows.Media.VisualTreeHelper.GetParent(current)
	End While

	Dim border = TryCast(last, System.Windows.Controls.Border)
	If border IsNot Nothing Then
		border.Background = imageBrush
	End If
End Sub

Update… for use with Visual Studio 2012 and the new default LightSwitch shell, the “Cosmopolitan Shell”, the code needs to be slightly different, since it depends on the details of the XAML that is generated by the shell:

this.FindControl("ScreenLayout").ControlAvailable += (s, e) =>
{
    var image = new System.Windows.Media.Imaging.BitmapImage();
    image.SetSource(
        System.Reflection.Assembly.GetExecutingAssembly().GetManifestResourceStream(
        Application.Current.Details.Name + ".Resources.MyLogoBackgroundImage.jpg"));
    var imageBrush = new System.Windows.Media.ImageBrush();
    imageBrush.ImageSource = image;
    imageBrush.Opacity = .5; // or whatever opacity you prefer
    var current = (e.Control) as System.Windows.DependencyObject;
    var last = current;
    while (current != null)
    {
        var frameworkElement = current as System.Windows.FrameworkElement;
        if (current is Microsoft.LightSwitch.Cosmopolitan.Presentation.Shells.CosmopolitanShell)
        {
            break;
        }
        last = current;
        current = System.Windows.Media.VisualTreeHelper.GetParent(current);
    };

    var grid = last as System.Windows.Controls.Grid;
    if (grid != null)
        grid.Background = imageBrush;
};
  • Salih

    Hi Jewel,
    It works with Standart Shell. But, I can not run with LightSwitch Cosmopolitan Shell. Is there any solution to work with Cosmopolitan Shell.

    • http://dotnetlore.com Jewel Lambert

      Hi Salih,

      I’ve updated the post with some code that should work with the new Cosmopolitan Shell.

      Jewel

  • Salih

    Thanks Jewel

  • NESTicle 8Bit

    I have a little error, the background image has on the title not in the body :c , can u help me please? this is the screenshot http://puu.sh/2FWym.png

    • Jewel Lambert

      One fix is to edit your image and add some space at the top and sides as needed to position your logo as you like.

      Alternately you can play with the alignment, stretch, and transform settings… i.e.
      imageBrush.AlignmentY = System.Windows.Media.AlignmentX.Center;
      imageBrush.Stretch = System.Windows.Media.Stretch.None;
      imageBrush.Transform = new TranslateTransform() { X = 200, Y = 100 };

      • NESTicle 8Bit

        Is there any way to put the image in the foreground? because when the window is resized the background image is displayed at the top like this http://puu.sh/2GdAw.png

        Thanks for the replay Jewel

        • Jewel Lambert

          Not entirely sure what you’re trying to do… this approach is really meant for a background image that is only visible when all the screens are closed… a sort of watermark background for the app.

          For an image in the foreground, wouldn’t an image on the screen be a better fit?

          Or maybe you want an application header logo?(which is just set in the properties for the application)