Tại sao nút WPF này trải dài trên cửa sổ?

Question

Nút dưới đây luôn mở rộng rộng bằng TextBlock. Tôi đã thử StackPanel, DockPanel, Chiều rộng = "Tự động", v.v.

Làm cách nào để làm cho nút mở rộng thành kích thước của văn bản riêng của mình (như trong HTML) và không theo kích thước văn bản trong môi trường?

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

ĐÁP:

Cảm ơn Greg, mà đã làm nó. Đây là XAML đầy đủ hoạt động ngay bây giờ, bạn có thể nhấp chuột phải vào nút để thay đổi Nội dung của nó để thấy rằng nút mở rộng và hợp đồng thích hợp.

<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

Về sự phiền toái của bạn ở kích thước nút, đây là thứ có vẻ được nhắm mục tiêu tại nhà thiết kế trong luồng công việc thiết kế/nhà phát triển, trong khi bạn đang làm việc rõ ràng trên phần nhà phát triển. Vì mục đích phát triển, tôi luôn áp dụng một vài kiểu trong App.xaml của mình để đảm bảo kích thước nút tốt hơn một chút. Ví dụ, trong thẻ ứng dụng trong file App.xaml của bạn:

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

Về câu hỏi thực tế của bạn:

Vấn đề là DockPanel của bạn được kéo dài đến chiều rộng của văn bản và nút tự nhiên sẽ mở rộng để lấp đầy khu vực có sẵn. Nếu bạn muốn giải pháp nhanh chóng và bẩn thỉu, bạn có thể làm điều gì đó như:

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

Lưu ý MaxWidth. Nếu bạn muốn có kết quả tổng hợp hơn, hãy cách ly nút của bạn trong bảng điều khiển khác. (Tôi đang sử dụng một stackpanel bởi vì tôi tin rằng ai đó đã sử dụng một mạng lưới trong ví dụ của họ):

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

Tôi thích StackPanel trong trường hợp này bởi vì tôi thấy mình sử dụng nó để tạo ra ngang "thanh" của các nút dọc theo đáy của một Form- err- Window ở góc bên phải.

Answer 2

Bạn có thể đặt chúng trong một cột hai cột có nút kéo dài chỉ một cột và văn bản bao trùm hai cột không?

Answer 3

Bạn có thể thử cách ly nút từ bảng chính bằng cách đặt nút đó trong bảng điều khiển khác.

<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

Tất cả những gì bạn cần làm là đặt thuộc tính HorizontalAlignment trên nút của bạn. Nó mặc định để kéo dài do đó làm đầy không gian có sẵn.

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

Answer 5

Đây là ví dụ sử dụng bố cục Lưới so với DockPanel. Ý tưởng là có 2 cột và 2 hàng. Đặt nút đó thành một ô đơn lẻ và đặt kích thước tự động của hàng/cột đó. Sau đó đặt TextBox vào hàng thứ hai và có nó span cả hai cột. Điều này về cơ bản sẽ làm cho ô trên cùng bên phải chỉ cần lấp đầy không gian và sẽ đạt được hành vi mà bạn đang tìm kiếm.

<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

Như một phương pháp khác để làm điều này: Bạn có thể thay đổi mẫu của nút vì vậy nó chủ yếu được bọc trong một StackPanel làm trung tâm. Một cái gì đó như thế này:

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

Hoặc bạn có thể thêm kiểu vào ứng dụng.XAML (hoặc bất kỳ nơi nào khác mà bạn đang lưu trữ phong cách toàn cầu của bạn) như thế này:

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

Lưu ý rằng điều quan trọng là để bao gồm các Style="{x:Null}" thuộc tính vào nút bên trong mẫu nếu thêm vào phong cách toàn cầu, nếu không bạn' sẽ nhận được một vòng lặp vô hạn khi nói đến kết xuất nút.