Почему эта кнопка WPF тянется через окно?

Question

Кнопка ниже всегда расширяется до ширины текстового блока. Я пробовал StackPanel, DockPanel, Width = "Авто" и т. Д.

Как сделать так, чтобы кнопка расширялась до размера ее собственного текста (как в 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>

Answer 1

Все, что вам нужно сделать, это установить свойство HorizontalAlignment на вашей кнопке. По умолчанию он растягивается, поэтому заполняет доступное пространство.

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

Answer 2

Что касается вашего раздражения от размера кнопок, то это то, что, похоже, предназначено для дизайнера в рабочем процессе дизайнера / разработчика, пока вы явно работаете над частью для разработчиков. В целях развития я всегда применяю несколько стилей в своем 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. Если вы хотите более комбинируемый результат, изолируйте вашу кнопку на другой панели. (Я использую стековую панель, потому что я считаю, что кто-то уже использовал сетку в своем примере):

<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 в этом случае, потому что я использую его для создания горизонтальной «панели» кнопок вдоль нижней части окна формы в правом углу.

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

Вот пример использования макета Grid по сравнению с 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

Можете ли вы поместить их в сетку из двух столбцов с кнопкой, охватывающей всего один столбец, и текстом, охватывающим два столбца?