Как закруглить края у TextBox?
-
1Переопределить шаблон. – VladD 30 июн '16 в 20:01
-
Как переделать? Спасите новичка :) – Denisok 30 июн '16 в 20:26
-
Сейчас напишу, подождите :) – VladD 30 июн '16 в 20:33
-
Готово, пробуйте. – VladD 30 июн '16 в 20:58
1 ответ
Есть несколько путей.
Правильный путь — вы можете переопределить шаблон/стиль. Это делается так на Visual Studio 2015. Я делаю для WPF, но для UWP должно быть по идее то же самое. (В более старых версиях Visual Studio вытащить стиль было невозможно, и приходилось использовать Expression Blend, или искать в документации.)
Более простой путь, без шаблона, с ручным созданием лэйаута внизу.
Для начала, заведите где-нибудь обыкновенный TextBox
. Перейдите в визуальный дизайнер, и откройте меню:
Выберите в меню «редактировать шаблон»:
Ради бога, не оставляйте имя по умолчанию TextBoxStyle1
!
Вам откроется текущий стиль, который определяет, как выглядит TextBox
. Он будет определён либо в ресурсах текущего окна, либо всего приложения, как вы уж выберете. Найдите в стиле переопределение template'а, а в нём — Border
:
Добавьте в Border
какое-то значение CornerRadius
:
<Border x:Name="border" CornerRadius="7"
BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
</Border>
(не копируйте мой текст, а добавьте CornerRadius
в то, что есть у вас!) Этот же стиль используйте для других текстбоксов. Или уберите у него x:Key
, чтобы он относился ко всем текстбоксам вообще.
Пора запускать:
Готово!
Если хотите, значение радиуса закругления можно привязать к attached property.
Более простое решение — «выключить» границу у TextBox
'а и положить сверху Border
:
<Border CornerRadius="7" BorderBrush="#FFABADB3" BorderThickness="1"
VerticalAlignment="Center" UseLayoutRounding="True">
<TextBox BorderThickness="0" Background="Transparent"/>
</Border>
Вам скорее всего не нужно VerticalAlignment="Center"
, UseLayoutRounding="True"
позволяет выглядеть шаблону не замыленным, BorderBrush="#FFABADB3"
пришлось «стащить» из предыдущего решения, Background="Transparent"
и Border
нужно, чтобы TextBox
не перекрывал закруглённые углы.