4

我正在为自己的需要开发 WP8 应用程序，并希望它具有带有文本的小型动态磁贴。由于小图块无法显示文本，因此我正在生成带有所需文本的适当图像。这是代码：

WriteableBitmap bmpSmall = new WriteableBitmap(159, 159);
var grid = new Grid();
grid.Width = bmpSmall.PixelWidth;
grid.Height = bmpSmall.PixelHeight;

var background = new Canvas();
background.Width = bmpSmall.PixelWidth;
background.Height = bmpSmall.PixelHeight;

SolidColorBrush backColor = new SolidColorBrush((Color)Application.Current.Resources["PhoneAccentColor"]);
background.Background = backColor;

var textBlock = new TextBlock();
textBlock.Text = "qwerty";
textBlock.FontWeight = FontWeights.Bold;
textBlock.HorizontalAlignment = HorizontalAlignment.Center;
textBlock.VerticalAlignment = VerticalAlignment.Center;
textBlock.FontSize = 28;
textBlock.Foreground = new SolidColorBrush(Colors.White);

grid.Children.Add(textBlock);
bmpSmall.Render(background, null);
bmpSmall.Render(grid, null);
bmpSmall.Invalidate();

using (IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication())
{
    using (IsolatedStorageFileStream imageStream = new IsolatedStorageFileStream("/Shared/ShellContent/smallTile.jpg", System.IO.FileMode.Create, isf))
    {
        bmpSmall.SaveJpeg(imageStream, 159, 159, 0, 100);
    }
}

ShellTile tile = ShellTile.ActiveTiles.First();
FlipTileData tileData = new FlipTileData();
tileData.SmallBackgroundImage = new Uri(@"isostore:/Shared/ShellContent/smallTile.jpg", UriKind.Absolute);
tile.Update(tileData);

结果看起来像：

在此处输入图像描述

如您所见，文本与左上角对齐。问题是“为什么”？因为我已经设置textBlock.HorizontalAlignment并且textBlock.VerticalAlignment- 我希望它位于图像的中心。例如，以下 XAML 看起来像您可以期望的那样，并且像我需要的那样：

<Grid Width="159" Height="159">
    <Grid.Background>
        <SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
    </Grid.Background>
    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold" FontSize="28" Foreground="White">qwerty</TextBlock>
</Grid>

我错过了什么？如何使文本居中？

4

3 回答 3

1

试试下面的代码：

       WriteableBitmap bmpSmall = new WriteableBitmap(159, 159);
        var grid = new Grid();
        grid.Width = bmpSmall.PixelWidth;
        grid.Height = bmpSmall.PixelHeight;

        var background = new Canvas();
        background.Width = bmpSmall.PixelWidth;
        background.Height = bmpSmall.PixelHeight;

        SolidColorBrush backColor = new SolidColorBrush((Color)Application.Current.Resources["PhoneAccentColor"]);
        background.Background = backColor;

        var textBlock = new TextBlock();
        textBlock.Width = bmpSmall.PixelWidth;

        textBlock.Text = "qwerty";
        textBlock.FontWeight = FontWeights.Bold;
        textBlock.HorizontalAlignment = HorizontalAlignment.Stretch;
        textBlock.VerticalAlignment = VerticalAlignment.Center;
        textBlock.FontSize = 28;
        textBlock.Foreground = new SolidColorBrush(Colors.White);
        textBlock.TextAlignment = TextAlignment.Center;
        grid.Children.Add(background);
        grid.Children.Add(textBlock);
        grid.Measure(new Size(bmpSmall.PixelWidth, bmpSmall.PixelHeight));
        grid.Arrange(new Rect(0,0,bmpSmall.PixelWidth, bmpSmall.PixelHeight));
        grid.UpdateLayout();
        bmpSmall.Render(grid, null);
        bmpSmall.Invalidate();

我将TextBlock宽度设置为与图块的其余部分相同，并设置HorizontalAlignment为拉伸，以便控件占据图块的整个宽度。然后我将TextAlignment属性设置为TextAlignment.Center，以使文本居中。希望有帮助！

编辑：显然对于可写位图，您必须自己执行测量/排列/布局步骤，以便按照您认为应该渲染的方式渲染控件。试试这个更新的代码，这次它应该可以工作了！

于 2013-09-18T18:41:03.900 回答
0

将您的代码复制到一个空的 WPF 应用程序后，恐怕要告诉您您的代码工作正常：

在此处输入图像描述

我所做的只是将 设置Grid.Background为红色和TextBlock.Background黑色以澄清情况：

<Grid Width="159" Height="159">
    <Grid.Background>
        <SolidColorBrush Color="Red"/>
    </Grid.Background>
    <TextBlock Background="Black" HorizontalAlignment="Center" 
        VerticalAlignment="Center" FontWeight="Bold" FontSize="28" 
        Foreground="White">qwerty</TextBlock>

因此，我只能假设您的代码中的其他地方有问题。

更新>>>

对不起，你是对的，我确实误会了你。然而，在测试你的C#代码之后，情况还是一样的：

在此处输入图像描述

这可能看起来像同一张图片，但它实际上来自您的 C#代码......我做了一些小改动，但没有影响到的位置TextBlock：

Grid grid = new Grid();
grid.Background = Brushes.Red;
grid.Width = grid.Height = 159.0;
TextBlock textBlock = new TextBlock();
textBlock.Text = "qwerty";
textBlock.Background = Brushes.Black;
textBlock.FontWeight = FontWeights.Bold;
textBlock.HorizontalAlignment = HorizontalAlignment.Center;
textBlock.VerticalAlignment = VerticalAlignment.Center;
textBlock.FontSize = 28;
textBlock.Foreground = Brushes.White;
grid.Children.Add(textBlock);
this.Content = grid;

如果您将此代码放入一个新的 WPF 项目中，您会发现它工作得很好，所以只会让您的WriteableBitmap对象成为这个问题的罪魁祸首……您用它做什么？如果您只是将它添加到您的 UI，那么您可以直接将控件添加到Window。

于 2013-09-18T11:23:02.503 回答
0

您还必须设置HorizontalAlignment="Stretch" VerticalAlignment="Stretch"for 网格。目前网格只是其内容的大小，即textblock.

于 2013-09-17T17:54:59.077 回答