Почему эта кнопка WPF простирается через окно?
Мне удалось выполнить эту работу с шаблоном редактора, убрав помощников и создав элементы управления вручную.
@model Checkpoint.Models.Task
<tr>
<td>@Model.TaskName</td>
<td data-ftid="@Model.TaskId">
@using (Html.BeginForm("Index", "Check", FormMethod.Post))
{
<input name="TaskId" type="hidden" value="@Model.TaskId" />
<input name="IsDone" type="radio" value="True" @Html.Raw(Model.IsDone ? "checked=checked" : null) />
<span>Complete</span>
<input name="IsDone" type="radio" value="False" @Html.Raw(!Model.IsDone ? "checked=checked" : null) />
<span>Incomplete</span>
<button role="button" type="submit" name="taskAction" value="@Model.TaskId">Submit</button>
}
</td>
</tr>
Я был не слишком доволен этим и вместо этого выбрал решение частичного просмотра @ Jasen. Мне удалось получить уникальные идентификаторы элементов, переопределив атрибут 'id' в помощнике. Я использовал TaskId, поскольку он уникален, но в противном случае мог бы передать индекс цикла из основного представления.
@model Checkpoint.Models.Task
<tr>
<td>@Model.TaskName</td>
<td data-ftid="@Model.TaskId">
@using (Html.BeginForm("Index", "Check", FormMethod.Post))
{
@Html.HiddenFor(x => x.TaskId, new { id = "Task_" + Model.TaskId + "_hidIsDone" })
@Html.RadioButtonFor(x => x.IsDone, false, new { id = "Task_"+ Model.TaskId + "_radIsDoneF" })<span>Incomplete</span>
@Html.RadioButtonFor(x => x.IsDone, true, new { id = "Task_" + Model.TaskId + "_radIsDoneT" })<span>Complete</span>
<button role="button" type="submit" name="taskAction">Submit</button>
}
</td>
</tr>
5 ответов
Относительно Вашего раздражения при калибровке кнопок это - что-то, что, кажется, предназначено для разработчика в рабочем процессе разработчика/разработчика, в то время как Вы ясно работаете над частью разработчика. Ради разработки я всегда применяю несколько стилей в своем 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 в этом случае, потому что я использую, он для создания горизонтальной "панели" кнопок вдоль нижней части Формы - допускает ошибку - Окно в правом углу.
Все, что необходимо сделать, установлено свойство HorizontalAlignment на кнопке. Это принимает значение по умолчанию для протяжения поэтому заполнения свободного места.
<Button x:Name="ButtonFavorite"
HorizontalAlignment="Left"
Content="Customers"
Margin="10"
Width="Auto"
Click="ButtonFavorite_Click">
Вы могли попытаться изолировать кнопку от основной панели путем помещения его в другую панель.
<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>
Вот пример с помощью расположения Сетки по сравнению с 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>
Можно ли разместить их в два столбца Grid с кнопкой, охватывающей всего один столбец и текстовый охват два столбца?