Текстовые поля - ecvento/Material.Avalonia-Wiki GitHub Wiki
Автор статьи расположил порядок примеров в соответствии с порядком на изображении выше (сверху вниз)
Пример создания обычного классического поля
<TextBox UseFloatingWatermark="True"
Watermark="Type something..."
wpf:TextFieldAssist.Label="Classic TextBox" />
Для использования элемента выше вам необходимо добавить пространство имен xmlns:wpf="clr-namespace:Material.Styles.Assists;assembly=Material.Styles"
Обычное текстовое поле, без анимаций, с серым текстом
<TextBox UseFloatingWatermark="False" Watermark="No floating label" />
Текстовое поле для паролей
<TextBox UseFloatingWatermark="True" Classes="revealPasswordButton"
wpf:TextFieldAssist.Label="Password" PasswordChar="*" />
Кнопка для показа пароля присутствует
Текстовое поле (с элементом убирающий весь текст)
<TextBox UseFloatingWatermark="True" Classes="clearButton"
wpf:TextFieldAssist.Label="Text field" />
Данное текстовое поле позволяет пользователю вводить только цифры и выведет сообщение "ivalid numerics" при вводе символов, отличных от цифр
<TextBox UseFloatingWatermark="True"
wpf:TextFieldAssist.Label="Text field with validation"
wpf:TextFieldAssist.Hints="{StaticResource TextFieldTip1}"
Text="{Binding Numerics}"/>
Для того, что бы сделать текстовое поле неактивным, вам необходимо добавить параметр IsEnabled="False":
<TextBox UseFloatingWatermark="True" IsEnabled="False"
wpf:TextFieldAssist.Label="Disabled Field" Text="Hello World!" />
Сразу к примеру
<TextBox Classes="Floating" AcceptsReturn="True" MaxHeight="100" TextWrapping="Wrap" wpf:TextFieldAssist.Label="Multiline Test"
UseFloatingWatermark="True"
Text="Multiline. Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. The quick brown fox jumps over the
lazy dog. War and peace. Keep going. Go on. For how long?
Not long. Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua." />
Не забывайте, что вы можете комбинировать различные параметры и значения Classes
Создание данных текстовых полей отличается от обычного текстового поля тем, что он имеет в себе параметр 'Classes="filled"'
Пример:
<TextBox UseFloatingWatermark="True" Classes="filled"
wpf:TextFieldAssist.Label="Filled TextBox" />
Данные поля создаются с помощью параметра Classes="filled dense"
Как они выглядят видно в примере выше - под текстом Single-line fields (dense)
Пример создания многострочного текстового поля:
<TextBox UseFloatingWatermark="True"
wpf:TextFieldAssist.Label="Multiline textfield"
Classes="filled dense"
AcceptsReturn="True"
TextWrapping="Wrap"
MaxHeight="100"
Text="Multiline. Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. The quick brown fox jumps over the
lazy dog. War and peace. Keep going. Go on. For how long?
Not long. Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua." />
Тут все аналогично текстовым полям с затемнением - используется собственный класс для определения стиля. В данном случае Classes="outline", для придания компактного вида используйте Classes="outline dense"
Пример:
<TextBox UseFloatingWatermark="True" Classes="outline dense revealPasswordButton"
wpf:TextFieldAssist.Label="Password" PasswordChar="*" />
Пример:
<controls:Card Padding="0" Margin="8">
<TextBox Classes="solo" Watermark="Solo field with Card">
<TextBox.InnerRightContent>
<Button Classes="Flat" Padding="4" Width="{Binding $self.Bounds.Height}"
Content="{avalonia:MaterialIconExt Search, Size=24}" />
</TextBox.InnerRightContent>
</TextBox>
</controls:Card>
Для создания данного текстового поля (имеется ввиду такого вида) используется класс Classes="solo"
Еще один пример, результат тот же самый:
<controls:ColorZone Padding="0" Margin="8">
<TextBox Classes="solo" Watermark="or with ColorZone">
<TextBox.InnerRightContent>
<Button Classes="Flat" Padding="4" Width="{Binding $self.Bounds.Height}"
Content="{avalonia:MaterialIconExt Search, Size=24}" />
</TextBox.InnerRightContent>
</TextBox>
</controls:ColorZone>
Со скрытой кнопкой:
<controls:ColorZone Padding="0" Margin="8">
<TextBox Watermark="Search field" Classes="solo" Margin="0">
<TextBox.InnerRightContent>
<Button Width="{Binding $self.Bounds.Height}" Classes="Flat"
Foreground="{DynamicResource MaterialDesignCardBackground}">
<avalonia:MaterialIcon Kind="Magnify" Width="20" Height="20" />
</Button>
</TextBox.InnerRightContent>
</TextBox>
</controls:ColorZone>
Закругленное текстовое поле
<TextBox BorderBrush="{Binding $self.Foreground}" BorderThickness="1" Classes="solo"
Watermark="Search field"
CornerRadius="32" Margin="8">
<TextBox.InnerLeftContent>
<Border Height="{Binding $parent[TextBox].Height}" Width="{Binding $self.Bounds.Height}">
<avalonia:MaterialIcon HorizontalAlignment="Center" VerticalAlignment="Center"
Kind="Magnify" Width="20" Height="20" />
</Border>
</TextBox.InnerLeftContent>
</TextBox>
Текстовое поле без контейнера, но вместо этого используется граница
<TextBox BorderBrush="Black" Margin="8" BorderThickness="1" Classes="solo"
Watermark="No container but use border instead" />
пример кода
<NumericUpDown ButtonSpinnerLocation="Left"/>
или же так
<NumericUpDown/>