如何在 Xaml 中控制按钮布局答案

【问题标题】：How to control button layout in Xaml如何在 Xaml 中控制按钮布局
【发布时间】：2014-11-08 15:39:55
【问题描述】：

我无法使用 XAML 控制按钮控件的确切布局。似乎无论我做什么按钮都是最小宽度。我有一个简单的按钮，按钮内只有一个文本块。但是该按钮有很多我似乎无法摆脱的边距和填充（我知道负边距和填充）。我想知道的是： 1. 为什么它是这样设计的。 2. 控制按钮精确布局的基本规则是什么？

我的代码如下：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="80"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>

    <StackPanel Grid.Row="0"></StackPanel>

    <Pivot Grid.Row="1">
        <Pivot.Title>
            <StackPanel Orientation="Horizontal" Margin="-15,-3,0,0" Background="red" Width="480">
                <Button Background="Blue" x:Name="btnStudies" Click="btnMenuItem_Click" Width="20">
                    <TextBlock Text="Title" Foreground="White"></TextBlock>
                </Button>

                <Button Background="Green">
                    <TextBlock Text="Title" Foreground="White"></TextBlock>
                </Button>

                <Button Background="Blue" Click="btnMenuItem_Click">
                    <TextBlock Text="Title" Foreground="White"></TextBlock>
                </Button>

                <Button Background="Blue" Click="btnMenuItem_Click">
                    <TextBlock Text="Title" Foreground="White"></TextBlock>
                </Button>

                <Button Background="Blue" Click="btnMenuItem_Click">
                    <TextBlock Text="Title" Foreground="White"></TextBlock>
                </Button>
            </StackPanel>

        </Pivot.Title>
    </Pivot>
</Grid>

我想要连续五个按钮，但这些按钮对于屏幕来说已经太宽了（Windows 手机）。更改宽度似乎没有任何效果（为什么会在那里）。按钮内的 textBlock 控件与按钮上的文本一样宽，但我似乎对按钮的宽度没有任何控制。在 HTML 中定义时只有填充或边距，但在 xaml 中它似乎就在那里，对我来说不清楚如何撤消它。

*****编辑***** 在阅读了 Rachel 的回复后，我决定从头开始。使用下面的代码，我仍然无法控制按钮的宽度，因为它使用了我似乎无法删除的一定数量的填充。当我定义的宽度低于它不改变的宽度时，按钮的宽度约为 110。 0 的边距和填充完全没有影响（暂时不想使用负值，因为这看起来不太直观）。所以下面的代码非常简单，但按钮仍然占用了我无法控制的大量空间。我无法想象为什么会这样设计。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="400" />
    </Grid.ColumnDefinitions>

    <StackPanel Width="300" Background="Red" HorizontalAlignment="Left">
        <Button Background="Blue" HorizontalAlignment="Left" Width="100" Margin="0" Padding="0">
            <TextBlock Text="Title" Width="Auto" HorizontalAlignment="Left" />
        </Button>
    </StackPanel>
</Grid>

【问题讨论】：

一些 XAML 代码会有所帮助。我猜您将按钮放在某个网格中。顺便说一句，WPF 中的布局非常灵活且非常强大。任何初学者都会觉得它很糟糕，但是在熟悉它之后，你会非常喜欢它。我很少在当前布局系统中使用拖放功能。只需输入所有内容。
如上所述，您的第一个问题的答案可能在于您不熟悉 XAML。它非常强大，可定制且易于通过一些练习来使用。再次发布一些代码，以便我们提供帮助！
啊，是的，我忘记了密码。我实际上已经阅读了一本关于使用 xaml 为 Windows 进行开发的书，并意识到它有多么强大。 Ik 已经使用 xaml 为 windows Phone 开发了几个应用程序，但这是我一直遇到的问题。

标签： wpf windows xaml

【解决方案1】：

包含控件的父面板的类型和大小会影响子控件的大小/布局。

在您的情况下，您有一个 Grid 作为您的父面板，而 Grid 默认占用所有可用空间。此外，除非您另外指定，否则放置在网格内的子项默认也会占用所有可用空间。

所以你的<Pivot> 被分配了一个等于Grid.Width 的宽度，而Pivot.Title 听起来好像它被分配了一个等于Pivot.Width 的宽度，而StackPanel 被分配了一个等于Pivot.Title.Width 的宽度...你明白了。

要指定控件不应占用所有可用空间，请指定HorizontalAlignment 或VerticalAlignment 属性以告诉它将项目停靠在父面板的哪一侧。

例如

<Pivot Grid.Row="1" HorizontalAlignment="Left">

或

<StackPanel OWidth="480" HorizontalAlignment="Left" ...>

如果您是 WPF 布局系统的新手，我建议您阅读 codeproject 文章 WPF Layouts: A Quick Visual Start 以快速了解 WPF 的主要布局面板。

【讨论】：