2

I want to display one or more CheckBoxes on a tile in my Windows Phone app. This works already for TextBlocks, but with a CheckBox it shows only the Text of the CheckBox and not the Checkmark itself.

This is a sample of my code:

    public void CreateTile()
    {
        StackPanel panel = new StackPanel();
        panel.VerticalAlignment = VerticalAlignment.Top;
        panel.Margin = new Thickness(7.0, 7.0, 7.0, 0);
        panel.Width = 336;
        panel.Height = 336;
        panel.Orientation = Orientation.Vertical;

        // Create and add a CheckBox for each task
        foreach (var task in _tasks)
        {
            TextBlock textBlock = new TextBlock();
            textBlock.TextWrapping = TextWrapping.Wrap;
            textBlock.Style = App.Current.Resources["PhoneTextLargeStyle"] as Style;
            textBlock.Foreground = new SolidColorBrush(Colors.White);
            textBlock.Text = task.Text;

            CheckBox checkBox = new CheckBox();
            checkBox.IsChecked = task.IsDone;
            checkBox.Content = textBlock;

            panel.Children.Add(checkBox);
        }

        Grid layoutRoot = new Grid();
        layoutRoot.Background = new SolidColorBrush(Colors.Blue);
        layoutRoot.Width = 336;
        layoutRoot.Height = 336;
        layoutRoot.Children.Add(panel);
        layoutRoot.Measure(new Size(336, 336));
        layoutRoot.Arrange(new Rect(0, 0, 336, 336));
        layoutRoot.UpdateLayout();

        // Render grid into bitmap
        WriteableBitmap bitmap = new WriteableBitmap(336, 336);
        bitmap.Render(layoutRoot, null);
        bitmap.Invalidate();

        // Save background image for tile to isolated storage
        Uri backgroundImage = TileHelper.SaveTileImage(bitmap);
    }

If I create a tile with a background image created by the method above, the tile will look like this:

enter image description here

As you can see the text is displayed but there is no checkmark/square before the text.

venerik
  • 5,766
  • 2
  • 33
  • 43
zirkelc
  • 1,451
  • 1
  • 23
  • 49

2 Answers2

2

I personally like to use Segoe UI Symbol as the Font Family in such situations. This gives me the flexibility to use Text and Symbols together while not messing around too much with code / images. SUS has great modern icons (or characters if you may call them) that are very much Metroish, I'd say.

Just open up Charmap (Win + R and type in charmap) and in the Font Select -> Segoe UI Symbol. Now you can select any character you like and paste into Visual Studio Editor itself. Yes, it works! The symbol may not display properly in the Editor itself but it will at Runtime

Here are some suggestions: Some CheckBoxes

Here are the corresponding characters:

  1. ☑
  3. ✅

Don't worry about them not looking right HERE. They should when you follow the above steps.

  • 1
    This is a really good workaround! I would still like to know why the checkbox control isn't rendered correctly. – zirkelc Sep 23 '14 at 20:44
  • 1
    If you don't mind a Tile that doesn't flip like the `HubTile`, you can also try using the Coding4Fun Toolkit. I'm pretty sure, it would display the `CheckBox` Control alongside other Controls. http://www.geekchamp.com/articles/getting-started-with-the-coding4fun-toolkit-tile-control –  Sep 24 '14 at 07:56
  • If you find my answer useful, please accept it as an answer. Many thanks. –  Sep 24 '14 at 16:03
  • Yes, I will use your solution! It would be nice to know why it does not work as expected but there seems to be no right solution. – zirkelc Sep 24 '14 at 16:36
  • 1
    I spent quite a lot of time to research that too. You know how curiosity is! But, I haven't been able to find anything strong. Let's hope someone answers that! –  Sep 24 '14 at 17:38
1

You can always "hack" it by using images of checkbox controls. Did you try to show created control in UI? i.e. adding it to page? Just to see if your code is executed correctly.

Or another solution would be to use check mark character - http://www.fileformat.info/info/unicode/char/2713/index.htm

I'll try to replicate this problem in my test app since it is strange that it does not work.

Filip
  • 1,824
  • 4
  • 18
  • 37