Perché questo pulsante WPF si estende attraverso la finestra?

Question

Il pulsante di seguito si espande sempre per essere largo quanto il TextBlock. Ho provato StackPanel, DockPanel, width = "Auto", ecc

Come posso fare il pulsante di espansione alle dimensioni del suo proprio testo (come in HTML) e non alle dimensioni del testo nella sua 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> 

RISPOSTA:

Grazie Greg, che ha fatto. Ecco l'XAML completo che funziona ora, puoi fare clic con il pulsante destro del mouse sul pulsante per cambiarne il contenuto in modo da vedere che il pulsante si espande e si contrae in modo appropriato.

<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

Riguardo al tuo fastidio al dimensionamento dei pulsanti, questo è qualcosa che sembra essere rivolto al progettista nel flusso di lavoro designer/sviluppatore, mentre stai chiaramente lavorando alla parte degli sviluppatori. Per motivi di sviluppo, applico sempre alcuni stili nella mia app.xaml per garantire un dimensionamento dei pulsanti leggermente migliore. Per esempio, nel tag applicazione nel file 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> 

quanto riguarda la tua domanda effettiva:

Il problema è che il vostro DockPanel sta allungando alla larghezza del testo e il pulsante sarà naturalmente espandere per riempire l'area disponibile. Se vuoi la soluzione rapida e sporca puoi fare qualcosa del tipo:

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

Nota MaxWidth. Se vuoi un risultato più componibile, isola il tuo pulsante in un altro pannello. (Sto usando uno StackPanel perché credo che qualcun altro già utilizzato una griglia nel loro esempio):

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

Mi piace lo StackPanel in questo caso perché mi trovo di utilizzarlo per creare il "bar" orizzontale di pulsanti lungo la parte inferiore di una Form- err- Finestra nell'angolo destro.

Answer 2

Puoi posizionarli in una griglia a due colonne con il pulsante che copre solo una colonna e il testo che si estende su due colonne?

Answer 3

Si potrebbe provare ad isolare il pulsante dal pannello principale mettendolo in un altro pannello.

Answer 4

Tutto ciò che dovete fare è impostare la proprietà HorizontalAlignment sul vostro pulsante. Di default si allunga quindi riempiendo lo spazio disponibile.

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

Answer 5

Ecco un esempio di un layout Grid rispetto a un DockPanel. L'idea è di avere 2 colonne e 2 righe. Metti il ​​pulsante su una singola cella e rendi il ridimensionamento automatico della coppia di righe/colonne. Quindi inserisci il TextBox nella seconda riga e disponi su entrambe le colonne. Questo renderà essenzialmente la cella in alto a destra solo lo spazio di riempimento e raggiungerà il comportamento che stai cercando.

<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

Come altro metodo per fare questo: Si potrebbe cambiare modello del pulsante in modo che sia essenzialmente avvolto in uno StackPanel centrato. Qualcosa del genere:

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

Oppure è possibile aggiungere uno stile all'app.XAML (o qualsiasi altro luogo dove si sta memorizzare i vostri stili globali) in questo modo:

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

Si noti che è importante includere l'attributo Style="{x:Null}" sul pulsante all'interno del modello se l'aggiunta agli stili globali, altrimenti si' Otterremo un ciclo infinito quando si tratta di rendere il pulsante.