為什么這個WPF按鈕會拉伸到整個窗口？

Question

下面的按鈕總是擴展為與TextBlock一樣寬。 我試過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>

回答：

謝謝Greg，做到了。 以下是現在可以使用的完整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>

Answer 1

您需要做的就是在按鈕上設置Horizo​​ntalAlignment屬性。 它默認為拉伸，因此填充可用空間。

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

Answer 2

關於你對按鈕大小的煩惱，這似乎是設計師/開發人員工作流程中的設計師的目標，而你明確地在開發人員部分工作。 為了開發起見，我總是在App.xaml中應用一些樣式來確保更好的按鈕大小。 例如，在app.xaml文件的application標簽中：

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

注意MaxWidth。 如果您想要更可組合的結果，請在另一個面板中隔離您的按鈕。 （我正在使用stackpanel，因為我相信其他人已經在他們的示例中使用過網格）：

<DockPanel HorizontalAlignment="Left">
    <StackPanel DockPanel.Dock="Top" Orientation="Horizontal">
        <Button x:Name="ButtonFavorite"
            Content="Customers" 
            Margin="10" 
            Width="Auto"
            Click="ButtonFavorite_Click" />
    </StackPanel>
    <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>

在這種情況下，我喜歡StackPanel，因為我發現自己使用它在右下角的Formr-Window底部創建了按鈕的水平“條形”。

Answer 3

您可以嘗試通過將按鈕放在另一個面板中來隔離主面板上的按鈕。

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

Answer 4

作為另一種方法：您可以更改按鈕的模板，使其基本上包含在居中的StackPanel中。 像這樣的東西：

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

或者你可以添加一個樣式到app.xaml（或你存儲全局樣式的任何其他地方），如下所示：

<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}"屬性非常重要，否則在渲染按鈕時會出現無限循環。

Answer 5

您可以將它們放在一個兩列網格中，按鈕只跨越一列，文本跨越兩列嗎？

Answer 6

這是使用Grid布局與DockPanel的示例。 想法是有2列和2行。 將Button設置為單個單元格，並使該行/列對自動調整大小。 然后將TextBox放入第二行並使其跨越兩列。 這將使右上方的單元格成為填充空間，並將實現您正在尋找的行為。

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