How to... Add an Image-Control within the Dialog (and a few quick common suggestions)

Aug 6, 2012 at 5:59 PM

Hi,

first of all a big thank you - your latest release had some good maintaining, loving the new styling options!

Just a quick question, presumably a no-brainer...
I'm having some difficulties with including my own XAML on new pivot-pages. After some researching I was able to finally import it without errors (those evil namespaces I forgot to include ... ;-) ) - but a last barricade is an Image I want to show on those pages.

I have some TextBlock-Controls (with their corresponding namespace xmlns=http://schemas.microsoft.com/.../presentation) but my Image-Control is never shown and I assume that I'm using the wrong value for the Source-Attribute.

My image is in the app-path "/Images/logo.png" - but it doesn't show up when setting Source="/Images/logo.png", nor Source="/assemblyname;/Images/logo.png". I tried to include it as a ressource and as a type of content (and build-action "copy all"). Maybe just a quick hint into the right direction? I'm quite tired today and this constantly changing hot/cold-weather in germany is driving me crazy & causing a terrible headache :(

 

OK, last but not least a few short suggestions ...

  • It would be great to include the App-Image onto the main-page of the about-dialog.
  • Perhaps all those attributes (publisher, description, version, all links, ..) could render within a Grid, so all labels / values are perfectly aligned without those ragged margin ... (I'm a media designer, I love clear compositions ^^)
  • Some default-buttons with plain-metro-graphics for Web-, Facebook- and Twitter-Links would be nice
  • Would be including this control (http://applistcontrol.codeplex.com/) as an optional default-page be an option? I included it myself as a UserControl, but it's such a common and usefull functionality that it would be great to include it just by setting some option to "true" ;-)
  • It could be usefull to set the title of the pivot and the app-title separatly.
Coordinator
Aug 11, 2012 at 7:59 PM

Hi there.

About your problem with the images: what I usually do is create a user control that has all the items on it that I want, and then embed that user control as item (as described in the documentation). That way I did not run into problems with images yet.

Regarding your suggestions:

  1. Agreed, and put on the TODO list.
  2. That actually was the way it initially looked like, but it had a very weird feeling to me. I'm also pretty pedantic about a lot of things, but in this particular case I decided against it because it looked "wrong". Did you actually try that and compare it to the current layout?
  3. Also a good idea. Let's see how this could be configured easily.
  4. Someone else suggested this before I think. One thing is that I didn't want to add external dependencies to the project (so including the code would be the only option), and I also didn't want to make it too specific. The project should stay as generic as possible and leave it up to the dev what they want to do with it (and embedding that control manually shouldn't be that hard, as you pointed out already).
  5. Another nice idea (TODO list :)).

Unfortunately I did screw up my phone completely in a not so smart move to outlook.com a few days ago and after some more poking around I'm now at a point where I need to restore to factory settings. So working on a new version will be delayed a bit, but thank you so far for the really good suggestions.

Also, let me know if you continue to have problems with the images.

 

Aug 14, 2012 at 11:39 AM

Hi! :)

Sorry about your phone-problem. The changed Live-ID to the new domain that cannot be changed on your WinPhone without resetting? Yep, it's a petty evil thing. Especially without the possibility to backup your app-specific data and game-saves. Naa, Windows Phone 8 is right on the corner and everything is gonna be better, isn't it? ;-)

OK, back to topic...
Nice idea to encapsulate my image & text within a user-control. For this special case it's also not necessary to make remote-updates of the text, so that isn't a problem. I will try that. But there should be some easier solution how to access images in appdata or even isostore ... hm, I will think about it ;-)

You're right about the "weird feeling". I took a look at an old project where I made my own about dialog and my solution was even easier: Label and text weren't side-by-side but one below the other. That way there was no jitter, no weird spacing and looked quite nice (at least in my opinion ^^). But currently the features of your YLAB are more important to me, so I will go that way for now.

I could understand your objection about a additional dependency for the AppList-Control. It's really a no-brainer to implement (maybe a short comment with an example may be helpfull for "newbies" to know where to go / look), so I'm really ok with that decission. :)

Glad I could give you a few nice ideas for an upcoming version.

--Gordon

Aug 17, 2012 at 10:13 AM
Edited Aug 17, 2012 at 10:14 AM

Just as a follow-up, here is my small UserControl to include local images without any problem, even when using a remote-xaml:

<UserControl x:Class="Basta2012.UserControls.LocalImage"
    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"
    mc:Ignorable="d"
    d:DesignHeight="480" d:DesignWidth="480">

	<Grid x:Name="LayoutRoot">
		<Image x:Name="img" />
    </Grid>
</UserControl>
using System;using System.Windows.Media.Imaging;

public partial class LocalImage {
	private string _localPath;
	
	public LocalImage() {
		this.InitializeComponent();
	}

	public string LocalPath {
		get { return this._localPath; }
		set {
			this._localPath = value;
			this.img.Source = new BitmapImage(new Uri(value, UriKind.RelativeOrAbsolute));
		}
	}
}

Nothing fancy... :)