如何在我的 XAML 中将 XML 图形居中？答案

【问题标题】：How can I center an XML graphic within my XAML?如何在我的 XAML 中将 XML 图形居中？
【发布时间】：2015-10-05 16:47:27
【问题描述】：

我是 XAML 的新手，我正在尝试找出您定位事物的一些方式。我有一个以 Adobe Illustrator 图像开始的图形，然后我将其转换为可以很好地呈现为 XAML 的代码。但是，我似乎无法让它在显示区域内居中显示。使用水平对齐，我可以毫无问题地居中其他东西，但由于某种原因，我似乎无法让这个图形居中。我希望我只是错过了一些东西。

<Window x:Class="play.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<StackPanel>
    <Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Height="320">
        <Canvas x:Name="Layer_1" Canvas.Left="0" Canvas.Top="0" Width="62" Height="22" HorizontalAlignment="Center" Background="#00AEEF">
            <!--Unknown tag: metadata-->
            <!--Unknown tag: sodipodi:namedview-->
            <Canvas x:Name="g3" HorizontalAlignment="Center">
                <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="path5" Fill="White" Margin="0,0,0,0" HorizontalAlignment="Center">
                    <Path.Data>
                        <PathGeometry Figures="M16.733 8.245c-0.027-0.413-0.393-0.726-0.798-0.698c-0.413 0.027-0.726 0.385-0.698 0.798   c0.123 1.855-0.554 3.68-1.855 5.006c-1.199 1.225-2.783 1.899-4.46 1.899c0 0 0 0-0.001 0c-1.553 0-3.007-0.59-4.125-1.656   l1.177-1.177c0.28-0.279 0.081-0.758-0.314-0.758H2.38c-0.245 0-0.444 0.199-0.444 0.444v3.278c0 0.396 0.478 0.594 0.758 0.314   l1.041-1.041c1.401 1.35 3.231 2.096 5.185 2.096c0.001 0 0.001 0 0.002 0c2.082 0 4.047-0.835 5.53-2.349   C16.053 12.771 16.884 10.527 16.733 8.245z" FillRule="NonZero"/>
                    </Path.Data>
                </Path>
                <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="path7" Fill="White" Margin="0,0,0,0">
                    <Path.Data>
                        <PathGeometry Figures="M2.075 10.503c0.413-0.031 0.723-0.391 0.692-0.804c-0.14-1.868 0.535-3.709 1.85-5.051   C5.819 3.424 7.403 2.75 9.079 2.75c1.594 0 3.085 0.618 4.213 1.736l-1.152 1.152c-0.28 0.28-0.082 0.759 0.314 0.759h3.278   c0.245 0 0.444-0.199 0.444-0.444V2.674c0-0.396-0.479-0.594-0.758-0.314l-1.066 1.065C12.941 2.024 11.074 1.25 9.079 1.25   c-2.083 0-4.048 0.834-5.533 2.348C1.93 5.248 1.101 7.513 1.272 9.811c0.029 0.395 0.358 0.694 0.747 0.694   C2.037 10.505 2.057 10.504 2.075 10.503z" FillRule="NonZero"/>
                    </Path.Data>
                </Path>
            </Canvas>
        </Canvas>
    </Viewbox>

</StackPanel>

【问题讨论】：

你用什么来转换你的路径数据？如果它是Mike Swanson's（非常方便），那么请确保您将其导出用于正确的用途。不过，在您这样做之前，我将合并/合并这两条路径并将其导出为一条路径，如果正确完成，则它不应该关心大小，并且您不需要 ViewBox，因为它无论如何都是矢量。那么，您使用什么来导出路径数据，并了解很多与它一起导出的东西是您想要在放入应用程序之前删除的垃圾。
我在名为 Inkscape 的应用程序中打开了图形，然后使用另存为 > Microsoft XAML。我没有 Adobe Illustrator，但您链接的应用程序看起来很酷。我将保存信息以备将来使用。我使用的 URL 是 inkscape.org/en/download 我不确定如何组合这两个路径。我会看看我能不能弄清楚。感谢您的信息。
组合路径尝试了几次，但我成功了。我删除了视图框，但由于某种原因，图形仍然左对齐。这里没有太多代码，所以看起来应该很容易弄清楚，但我没有运气。我尝试将内部画布居中，我尝试将外部画布居中，但没有任何乐趣。
也许我应该解释一下实际目标：我将矢量图形置于图形下方的两个文本块的中心。文本根据语言而变化，因此变化很大。考虑到这一点，我没有设置我提供的代码示例。图形不应在其下方的文本居中之外做出响应。如果有更好的方法可以做到这一点，我很乐意更改我的代码。
您是否已在 Visual Studio 中安装了 Blend？我只是复制/粘贴你的东西在那里。选择了两条路径并快速右键单击->组合->联合生成this，但这仍然不是我通常会做的那种事情。 PS - 如果您不使用 Illustrator，Blend 是一个方便的工具，可以在进行 xaml 设计工作时了解，我对inkscape 还不够熟悉，无法对此说些什么。

标签： xaml app.xaml

【解决方案1】：

Canvas 仅适用于图形的静态放置。您应该开始使用网格和堆栈面板。

我已经修改了你的 xaml：

<StackPanel>
    <Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Height="320">
        <Grid x:Name="Layer_1" Width="62" Height="22" HorizontalAlignment="Center" Background="#00AEEF">
            <!--Unknown tag: metadata-->
            <!--Unknown tag: sodipodi:namedview-->
            <Grid x:Name="g3" HorizontalAlignment="Center" VerticalAlignment="Center">
                <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="path5" Fill="White" Margin="0,0,0,0" HorizontalAlignment="Center">
                    <Path.Data>
                        <PathGeometry Figures="M16.733 8.245c-0.027-0.413-0.393-0.726-0.798-0.698c-0.413 0.027-0.726 0.385-0.698 0.798   c0.123 1.855-0.554 3.68-1.855 5.006c-1.199 1.225-2.783 1.899-4.46 1.899c0 0 0 0-0.001 0c-1.553 0-3.007-0.59-4.125-1.656   l1.177-1.177c0.28-0.279 0.081-0.758-0.314-0.758H2.38c-0.245 0-0.444 0.199-0.444 0.444v3.278c0 0.396 0.478 0.594 0.758 0.314   l1.041-1.041c1.401 1.35 3.231 2.096 5.185 2.096c0.001 0 0.001 0 0.002 0c2.082 0 4.047-0.835 5.53-2.349   C16.053 12.771 16.884 10.527 16.733 8.245z" FillRule="NonZero"/>
                    </Path.Data>
                </Path>
                <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="path7" Fill="White" Margin="0,0,0,0">
                    <Path.Data>
                        <PathGeometry Figures="M2.075 10.503c0.413-0.031 0.723-0.391 0.692-0.804c-0.14-1.868 0.535-3.709 1.85-5.051   C5.819 3.424 7.403 2.75 9.079 2.75c1.594 0 3.085 0.618 4.213 1.736l-1.152 1.152c-0.28 0.28-0.082 0.759 0.314 0.759h3.278   c0.245 0 0.444-0.199 0.444-0.444V2.674c0-0.396-0.479-0.594-0.758-0.314l-1.066 1.065C12.941 2.024 11.074 1.25 9.079 1.25   c-2.083 0-4.048 0.834-5.533 2.348C1.93 5.248 1.101 7.513 1.272 9.811c0.029 0.395 0.358 0.694 0.747 0.694   C2.037 10.505 2.057 10.504 2.075 10.503z" FillRule="NonZero"/>
                    </Path.Data>
                </Path>
            </Grid>
        </Grid>
    </Viewbox>

</StackPanel>

【讨论】：

此解决方案与我最终实施的主要区别在于，我遵循了 Mike Swanson（上图）的建议，并复制了第二条路径的数字的值并将其粘贴到第一个路径的数字中然后删除了第二个。这是一个很好的建议，我没有考虑过。感谢大家的帮助！

【解决方案2】：

也许您应该使用网格（Grid.RowDefinitions 和 Grid.ColumnDefinitions）来使画布居中，而不是使用 HorizontalAlignment 属性

祝你好运！

【讨论】：