CODEWITHSUNDEEP
c#windows-phone-7dynamicpng
MrTouch
MrTouch

Reputation: 654

WP7 Tiles with PNG and Custom Colors

Is it somehow possible to add a dynamic Tile in WP7, where i take a PNG file with my logo in the Center and add a Background Color to it?

It should look like this:

enter image description here

At the moment i create my Tiles like this:

private void addShortcut_Click(object sender, EventArgs e)
    {
        string Url = GlobalVariables.Uri;
        StandardTileData NewTileData = new StandardTileData
        {
            BackgroundImage = new Uri("img/red.jpg", UriKind.Relative),
            Title = "Energy "+GlobalVariables.Name,
            Count = 0,
            BackTitle = "Radion Energy",
            BackContent = "Hitmusic Only!",
            BackBackgroundImage = new Uri("img/test.jpg", UriKind.Relative)
        };
        try
        {
            // Create the Tile and pin it to Start. This will cause a navigation to Start and a deactivation of our application.
            ShellTile.Create(new Uri("/MainPage.xaml?stationName=" + stationName + "&tile=true&name=" + GlobalVariables.Name + "&url=" + Url, UriKind.Relative), NewTileData);
        }
        catch
        {
            MessageBox.Show("Channel-Tile exists already.");
        }
    }

So at the moment the Background has always the same color as the Phonestyle itself. (I don't really get why because the red.jpg actually is a red square. :) And at the moment i dont have a Logo in it so it's just blanc.

Thanks :)

Upvotes: 0

Views: 732

Answers (4)

Archana
Archana

Reputation: 376

private const string FLICKR_LIVE_TILE = "/Shared/ShellContent/flickr_live_tile.jpg";
private const string FLTile = "/Shared/ShellContent/FLTile.jpg";

prepare WriteableBitmap with whatever source you want

IsolatedStorageFile myIsolatedStorage = IsolatedStorageFile.GetUserStoreForApplication();
                if (myIsolatedStorage.FileExists(FLTile))
                {
                    myIsolatedStorage.DeleteFile(FLTile);
                }
                using (IsolatedStorageFileStream iso = new IsolatedStorageFileStream(FLTile, FileMode.OpenOrCreate, IsolatedStorageFile.GetUserStoreForApplication()))
                {
                    WriteableBitmap1 .SaveJpeg(iso, 768, 200, 0, 100);
                    iso.Close();
                }
                if (myIsolatedStorage.FileExists(FLICKR_LIVE_TILE))
                {
                    myIsolatedStorage.DeleteFile(FLICKR_LIVE_TILE);
                }
                using (
             IsolatedStorageFileStream isoFileStream = new IsolatedStorageFileStream(FLICKR_LIVE_TILE, FileMode.OpenOrCreate,
             IsolatedStorageFile.GetUserStoreForApplication()))
                {
                    WriteableBitmap2 .SaveJpeg(isoFileStream, 336, 200, 0, 100);
                    isoFileStream.Close();
                }




                var shellTileData = new FlipTileData
                {
                    BackgroundImage = new Uri("isostore:" + FLICKR_LIVE_TILE, UriKind.RelativeOrAbsolute),
                    //BackContent = "Connectivity Slab",
                    SmallBackgroundImage = new Uri("isostore:" + FLICKR_LIVE_TILE, UriKind.RelativeOrAbsolute),
                    WideBackgroundImage = new Uri("isostore:" + FLTile, UriKind.RelativeOrAbsolute),
                    WideBackBackgroundImage = new Uri("isostore:" + FLTile, UriKind.RelativeOrAbsolute),
                    BackBackgroundImage = new Uri("isostore:" + FLICKR_LIVE_TILE, UriKind.RelativeOrAbsolute),
                };
                var tile = ShellTile.ActiveTiles.First();
                tile.Update(shellTileData);

it will help to create both wide and short tile images

Upvotes: 1

kadir
kadir

Reputation: 1417

If it shows just a Square then you have set the URI of the Picture not correctly :-)

edit: The Images should be set on "Content" too (already mentioned)

Upvotes: 0

Paul Diston
Paul Diston

Reputation: 3294

I have used the Ree7 Tile Toolkit, which allows to you setup a tile with a custom background color, the source code includes a sample project which explains and demonstrates how to use the toolkit :-

http://wp7tiletoolkit.codeplex.com/

Upvotes: 1

user1369735
user1369735

Reputation:

Are you sure that your image is set to "Content"?

Upvotes: 1

Related Questions