Lecture
Created: 04.08.2010 | Level: specialist | Access: free
Самостоятельная работа 10:
Текст WPF
Элемент TextBlock с текстурой символов
Текст в элементе TextBlock можно закрашивать произвольным рисунком.
-
В панели Solution
Explorer создайте
для корня дерева проекта папку Images и добавьте в нее (командой Add ) из
прилагаемого к работе каталога Source файлы Image1.jpg и Image2.png
-
Добавьте в файл Window1.xaml новую вкладку со следующей разметкой
<!--Вкладка TextBlock2-->
<TabItem Header="TextBlock2">
<Canvas Background="Black">
<TextBlock
Canvas.Left = "10"
Canvas.Top="10"
FontFamily="Arial"
FontSize="36"
Foreground="Red"
Text="SolidColorBrush"
/>
<TextBlock
Canvas.Left = "10"
Canvas.Top="50"
FontFamily="Arial"
FontSize="75"
Text="Image1">
<TextBlock.Foreground>
<ImageBrush ImageSource="Images\Image1.jpg" Opacity=".9" />
</TextBlock.Foreground>
</TextBlock>
<TextBlock
Canvas.Left = "10"
Canvas.Top="130"
FontFamily="Arial"
FontSize="75"
Text="Image2">
<TextBlock.Foreground>
<ImageBrush ImageSource="Images/Image2.png" />
</TextBlock.Foreground>
</TextBlock>
</Canvas>
</TabItem>-
Запустите приложение
- должно получиться следующее
-
Изучите приведенный
код
Автоматический перенос слов в TextBlock
Если явно определить ширину элемента TextBlock и задать атрибут TextWraping="Wrap", то блочный текст будет автоматически размещаться внутри заданной ширины.
-
Добавьте в файл Window1.xaml новую вкладку со следующей разметкой
<!--Вкладка TextBlock3-->
<!-- Элемент TextBlock с переносом строк -->
<TabItem Header="TextBlock3">
<Grid Background="White">
<TextBlock
TextWrapping="Wrap"
FontSize="18"
TextAlignment="Center" >
Если в элементе TextBlock задать атрибут TextWraping="Wrap",
то блочный текст будет автоматически размещаться внутри
заданной ширины
<LineBreak />
<Run Foreground="Red" FontSize="28" FontFamily="Monotype Corsiva">
Панель Grid здесь введена для создания белого фона
</Run>
<LineBreak />
<Run FontSize="12">
Общие настройки родителя действуют на потомков до тех пор,
пока не будут переопределены внутри самих потомков
</Run>
</TextBlock>
</Grid>
</TabItem>-
Запустите приложение
- должно получиться следующее
-
Изучите приведенный
код
Использование дополнительных шрифтов
Иногда нет уверенности в том, что на компьютере пользователя есть нужные шрифты, с использованием которых программист разрабатывает интерфейс. В таком случае шрифты можно поставлять вместе с приложением.
-
Перейдите в раздел "Панель
управления", откройте папку " Шрифты " и перетащите мышью шрифт,
например, "Monotype
Corsiva" в какую-нибудь папку (файл шрифта уже есть в прилагаемом каталоге Source )
-
В панели Solution
Explorer создайте в корне проекта папку Fonts, выделите ее и добавьте командой Project/Add Existing Item файл шрифта MTCORSVA.TTF
-
Добавьте в файл Window1.xaml новую вкладку со следующей разметкой
<!--Вкладка TextBlock4-->
<!-- Элемент TextBlock с дополнительным шрифтом -->
<TabItem Header="TextBlock4">
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock
FontFamily="Fonts/MTCORSVA.TTF#Monotype Corsiva"
FontSize="20"
TextWrapping="Wrap"
TextAlignment="Justify"
Margin="10"
ToolTip="Элемент TextBlock с дополнительным шрифтом">
Шрифт для этого текста подключен явно и поставляется
вместе с приложением на тот случай, если у бедного
пользователя компьютер окажется еще беднее.
</TextBlock>
<TextBlock Grid.Row="1" Margin="10" TextWrapping="Wrap">
В этом блоке текста используется шрифт по умолчанию и
нет всплывающей подсказки ToolTip, а в верхнем блоке есть
</TextBlock>
</Grid>
</TabItem>-
Запустите приложение
- должно получиться следующее
-
Изучите приведенный
код
Элементы TextBox и PasswordBox
-
Добавьте к проекту
следующую вкладку со скриптовым кодом
<!--TextBox и PasswordBox-->
<TabItem Header="TextBox" Selector.IsSelected="True">
<StackPanel VerticalAlignment="Center" Margin="10">
<TextBlock HorizontalAlignment="Center">
<Run FontSize="14" FontWeight="Bold">
Элементы PasswordBox и TextBox
</Run>
</TextBlock>
<Grid Height="20" />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="Поле PasswordBox: " VerticalAlignment="Center" />
<PasswordBox Grid.Column="1" Name="passwordBox" />
</Grid>
<Grid Height="20" />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="Поле TextBox: " VerticalAlignment="Center" />
<TextBox Grid.Column="1" Name="textBox"></TextBox>
</Grid>
<Grid Height="20" />
<Grid HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="5" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Content="Показать" Click="Button_Click" />
<ToggleButton Grid.Column="2" Name="toggleButton" Content="EnabledPassword"
Checked="toggleButton_Checked" Unchecked="toggleButton_Checked"/>
</Grid>
</StackPanel>
</TabItem>-
Выделенную в разметке
кнопок регистрацию обработчиков наберите вручную
-
Добавьте в кодовую
часть следующие обработчики
private void Button_Click(object sender, RoutedEventArgs e)
{
textBox.Text = passwordBox.Password;
}
bool flagState = true;
Brush color;
private void toggleButton_Checked(object sender, RoutedEventArgs e)
{
// Сохраняем первоначальный цвет кнопки
if (flagState)
{
color = toggleButton.Background;
flagState = false;
}
if (toggleButton.IsChecked == true)
{
passwordBox.IsEnabled = false;
toggleButton.Background = Brushes.Red;
}
else
{
passwordBox.IsEnabled = true;
toggleButton.Background = color;
}
}-
Запустите приложение,
поизменяйте размер окна и разберитесь с кодом
Результат будет таким
