如何将GridBox元素置于Grid内部

Question

我正在开发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>

我错过了什么？我该如何集中文字？

Answer 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，以使文本居中。希望有所帮助！

编辑：显然对于可写位图，您必须自己执行度量/排列/布局步骤，以便按照您认为应该呈现的控件进行渲染。试试这个更新的代码，这次应该可以使用！

Answer 2

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

Answer 3

将代码复制到空的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>

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

更新＆gt;＆gt;＆gt;

抱歉，你是对的，我确实误解了你。但是，在测试了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对象作为这个问题的罪魁祸首......你用的是什么呢？ ？如果您只是将其添加到用户界面，则可以直接将控件添加到Window。