如何让 XML 图形在我的 XAML 中居中？

Question

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

<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>

Answer 1

也许你应该使用 gird（Grid.RowDefinitions 和 Grid.ColumnDefinitions）来居中你的 canvas 而不是 HorizontalAlignment 属性

祝你好运！

Answer 2

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>

如何让 XML 图形在我的 XAML 中居中？

How can I center an XML graphic within my XAML?

xaml

app.xaml