为什么这个WPF按钮延伸到整个窗口？

下面的按钮总是扩展到与文本块一样宽。我试过StackPanel、DockPanel、Width=“Auto”等

如何使按钮扩展到其自身文本的大小（如在HTML中），而不是扩展到其环境中文本的大小

    <DockPanel HorizontalAlignment="Left">
        <Button x:Name="ButtonFavorite"
                DockPanel.Dock="Top"  
                Content="Customers" 
                Margin="10" 
                Width="Auto"
                Click="ButtonFavorite_Click">
        </Button>

        <TextBlock DockPanel.Dock="Top" Text="this is a long text which makes the button stretch across the window, if this text is just a couple words, the button will be smaller, and this drives me up the wall"  Margin="10" TextWrapping="Wrap" />

    </DockPanel>

答复: 谢谢，格雷格，成功了。这是现在可以使用的完整XAML，您可以右键单击按钮来更改其内容，以便查看按钮是否适当地展开和收缩

<Window x:Class="Test3784234.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <DockPanel HorizontalAlignment="Left">
        <StackPanel DockPanel.Dock="Top" Orientation="Horizontal" >
            <Button x:Name="ButtonFavorite"
                    Padding="5"
                    Cursor="Hand" 
                    DockPanel.Dock="Top"  
                    Content="Customers" 
                    Margin="10" 
                    Click="ButtonFavorite_Click">
                <Button.ContextMenu>
                    <ContextMenu>
                        <MenuItem x:Name="menuItemReports" Header="Reports" Click="MenuItem_Click" />
                        <MenuItem x:Name="menuItemContracts" Header="Contracts" Click="MenuItem_Click"/>
                        <MenuItem x:Name="menuItemCustomers" Header="Customers" Click="MenuItem_Click" />
                        <MenuItem x:Name="menuItemDocumentation" Header="Documentation Creation Instructions" Click="MenuItem_Click" />
                        <MenuItem x:Name="menuItemEmail" Header="E-Mail" Click="MenuItem_Click" />
                    </ContextMenu>
                </Button.ContextMenu>
            </Button>

        </StackPanel>

        <TextBlock x:Name="TheMessage" DockPanel.Dock="Top" Text="Right-click the 'favorites' button to change its function." Margin="10" TextWrapping="Wrap"/>

    </DockPanel>
</Window>

你能将它们放在两列网格中，按钮只跨一列，文本跨两列吗？

关于你对按钮大小的烦恼，这似乎是设计师/开发人员工作流中针对设计师的，而你显然在处理开发人员部分。为了开发，我总是在App.xaml中应用一些样式，以确保更好的按钮大小。例如，在app.xaml文件的应用程序标记中：

<Application.Resources>
  <Style TargetType="Button">
    <Setter Property="MinWidth" Value="60" />
    <Setter Property="MinHeight" Value="23" />
    <Setter Property="Margin" Value="3" />
  </Style>
</Application.Resources>

关于你的实际问题：

问题是您的DockPanel正在延伸到文本的宽度，按钮将自然扩展以填充可用区域。如果您想要快速而肮脏的解决方案，您可以执行以下操作：

<DockPanel HorizontalAlignment="Left">
    <Button x:Name="ButtonFavorite"
            DockPanel.Dock="Top"  
            Content="Customers" 
            Margin="10" 
            Width="Auto"
            MaxWidth="100"
            Click="ButtonFavorite_Click">
    </Button>
</DockPanel>

请注意最大宽度。如果您想要一个更可组合的结果，请在另一个面板中隔离您的按钮。（我使用stackpanel是因为我相信其他人已经在他们的示例中使用了网格）：

---

我喜欢这种情况下的StackPanel，因为我发现自己使用它在右角的Form-err窗口底部创建了按钮的水平“条”。

您可以尝试将按钮放在另一个面板中，将其与主面板隔离

<DockPanel HorizontalAlignment="Left">
    <Grid DockPanel.Dock="Top">
        <Button x:Name="ButtonFavorite"
                Content="Customers" 
                Margin="10" 
                Width="Auto"
                Click="ButtonFavorite_Click">
        </Button>
    </Grid>

    <TextBlock DockPanel.Dock="Top" Text="this is a long text which makes the button stretch across the window, if this text is just a couple words, the button will be smaller, and this drives me up the wall"  Margin="10" TextWrapping="Wrap" />

</DockPanel>

---

您只需在按钮上设置HorizontalAlignment属性。它默认为“拉伸”，因此会填充可用空间

<Button x:Name="ButtonFavorite"
        HorizontalAlignment="Left"
        Content="Customers" 
        Margin="10" 
        Width="Auto"
        Click="ButtonFavorite_Click">

---

下面是一个使用网格布局与DockPanel的示例。想法是有两列和两行。将按钮放在单个单元格中，并使该行/列对自动调整大小。然后将文本框放入第二行，并使其跨越两列。这将基本上使右上角的单元格只是填充空间，并将实现您想要的行为

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>

    <Button 
        x:Name="ButtonFavorite"
        Grid.Column="0"
        Grid.Row="0"
        Content="Customers" 
        Margin="10" 
        Width="Auto"
        Click="ButtonFavorite_Click">
    </Button>

    <TextBlock 
        Grid.Column="0"
        Grid.ColumnSpan="2"
        Grid.Row="1"
        Margin="10" 
        TextWrapping="Wrap"
        Text="this is a long text which makes the button stretch across the window, if this text is just a couple words, the button will be smaller, and this drives me up the wall" />
</Grid>

---

另一种方法是：您可以更改按钮的模板，使其基本上包装在一个居中的堆叠面板中。大概是这样的：

<Button Content="Back">
    <Button.Template>
        <ControlTemplate>
            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                <Button Content="{TemplateBinding Content}"></Button>
            </StackPanel>
        </ControlTemplate>
    </Button.Template>
</Button>

<Style TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                    <Button Style="{x:Null}" Content="{Binding Path=Content, RelativeSource={RelativeSource AncestorType={x:Type Button}} }" FontWeight="Bold" Padding="5"></Button>
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

或者，您可以将样式添加到app.xaml（或存储全局样式的任何其他位置），如下所示：

<Button Content="Back">
    <Button.Template>
        <ControlTemplate>
            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                <Button Content="{TemplateBinding Content}"></Button>
            </StackPanel>
        </ControlTemplate>
    </Button.Template>
</Button>

<Style TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                    <Button Style="{x:Null}" Content="{Binding Path=Content, RelativeSource={RelativeSource AncestorType={x:Type Button}} }" FontWeight="Bold" Padding="5"></Button>
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

---

请注意，如果添加到全局样式，则在模板中的按钮上包含

Style=“{x:Null}”

属性非常重要，否则，在渲染按钮时会出现无限循环。

我刚刚尝试过，但这与为按钮提供绝对宽度相同，我不想这样做，因为内容将是动态的。有趣。这个问题说有一个比实际多的答案。如果有人发帖然后删除一个答案，就会发生这种情况。看起来像是一个次要的堆栈溢出问题。关于你的应用程序。参考资料的想法，我在网格内用一个按钮尝试了一下。行的高度为10，但不幸的是，按钮的高度没有扩展到最小高度。我想找到一些让按钮对周围环境不那么敏感的东西。关于MaxWidth的想法，如果按钮可能被称为“应用程序创建说明”或“帮助”，那么这与设置宽度有相同的问题我希望按钮相应地调整大小。请注意，MaxWidth是黑客解决方案。如您所见，我认为更具可组合性的解决方案是带有Orientation=“Horizontal”的StackPanel，我不确定您在Application.Resources中遇到了什么问题。因为没有键，所以这些设置应该普遍应用于所有按钮，除非按钮本身有一个取代它的设置。您通常应用哪些App.xaml样式？用于按钮以及其他元素。你愿意与我分享吗？嗯，我来自一个web开发人员的背景，我不认为让按钮“默认拉伸以填充可用空间”有什么意义。这是一个设计决策，这样他们就可以在所有文化中对所有控件一视同仁。当某些文化从右向左阅读时，他们是否应该将其设置为默认的左？HTML是从更以美国为中心的角度开发的。