爲什麼這個WPF按鈕在窗口中伸展？

Question

下面的按鈕始終展開爲與TextBlock一樣寬。我已經嘗試了StackPanel，DockPanel，Width =「Auto」等。

如何使按鈕擴展到大小的自己的文本（如在HTML中）而不是其中的文本大小environement？

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

Answer 1

關於按鈕大小的煩惱，在設計師/開發人員工作流程中，這似乎是針對設計人員的，但您明確正在開發人員部分工作。爲了發展起見，我總是在我的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> 

注意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在這種情況下，因爲我發現自己使用它來創建按鈕的水平「欄」沿右下角的Form-err-Window的底部。

Answer 2

你可以把它們放在一個兩列網格中，按鈕跨越一列和跨越兩列的文本？

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

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

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

Answer 5

下面是一個使用網格佈局與DockPanel的例子。這個想法是有2列和2行。將按鈕放在一個單元格中，並使該行/列對自動調整大小。然後將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> 

Answer 6

作爲另一種方法來做到這一點：你可以改變按鈕的模板，因此它基本上被包裹在一個居中的StackPanel中。類似這樣的：

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

或者你可以添加樣式到應用程序。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}"屬性，如果添加到全局樣式是很重要的，否則你」當渲染按鈕時會發生無限循環。