Скачать "Уроки C# .NET Windows Forms / #2 - Создание дизайна для окна авторизации"

"videoThumbnail Уроки C# .NET Windows Forms / #2 - Создание дизайна для окна авторизации

C# Graphics 0: Hello World!

C# Graphics 0: Hello World!

Канал: RCi Works

ИГРА ШАХМАТЫ C# WINFORMS

ИГРА ШАХМАТЫ C# WINFORMS

Канал: Debrone Constant

Visual studio 2017. Как создать проект. Изучение c++ с нуля. Первая программа. C++ #1.1

Visual studio 2017. Как создать проект. Изучение c++ с нуля. Первая программа. C++ #1.1

Канал: #SimpleCode

What is C#? | C# 101 [1 of 19]

What is C#? | C# 101 [1 of 19]

Канал: dotnet

Порядок вызова деструкторов при наследовании. Деструкторы. ООП C++ Для начинающих. Урок #101

Порядок вызова деструкторов при наследовании. Деструкторы. ООП C++ Для начинающих. Урок #101

Канал: #SimpleCode

Minimal APIs in ASP.NET 6.0 - Rob Richardson - NDC Porto 2022

Minimal APIs in ASP.NET 6.0 - Rob Richardson - NDC Porto 2022

Канал: NDC Conferences

Уроки C# .NET Windows Forms / #1 - Создание приложения на C# с SQL (базами данных)

Уроки C# .NET Windows Forms / #1 - Создание приложения на C# с SQL (базами данных)

Канал: Гоша Дударь

C# Graphics 1: Create Windows

C# Graphics 1: Create Windows

Канал: RCi Works

Установка Visual Studio на компьютер без интернета | Создание автономного установщика Visual Studio

Установка Visual Studio на компьютер без интернета | Создание автономного установщика Visual Studio

Канал: Жизнь семейная

создание дизайна

ui

c# ui

winforms ui

windows forms дизайн

ui c# design

C#

.NET

Windows Forms

winforms

windows forms c# уроки

windows forms c# база данных

базы данных

sql C#

mysql C#

windows forms sql

visual studio

winforms c# уроки

winforms database

c# уроки

00:00:00

привет в ходе этого урока мы с вами

00:00:02

создадим весь дизайн для окна

00:00:03

авторизации в нашем приложении также

00:00:06

переходите на сайт айти прагер точка ком

00:00:08

на этом сайте вы найдете код домашнее

00:00:10

задание и много другой полезной

00:00:11

информации ссылка на этот урок на сайте

00:00:14

будет в описании к этому видео ходе

00:00:16

этого урока мы с вами будем создавать

00:00:18

дизайн для формочки авторизации

00:00:21

соответственно первое что я предлагаю

00:00:22

сделать это конечно же зайти проект

00:00:25

который мы создавали и дальше здесь я

00:00:27

предлагаю просто удалить ту формочку

00:00:29

который вот здесь у нас есть для этого

00:00:31

мы нажимаем на нее правой кнопкой мыши

00:00:34

соответственно выбираем эту формочку так

00:00:36

формочка правой кнопкой мыши нажимаем

00:00:38

удалить нажимаем ok и эта форма у нас на

00:00:42

будет полностью удалена причем там у нас

00:00:44

есть какие-то не сохраненные файлы мы

00:00:45

нажимаем не сохранять эти данные реформа

00:00:48

будет просто удали нас нашего проекта

00:00:50

теперь давайте мы здесь же создадим

00:00:52

новую формочку

00:00:54

новое некое окно и вот как раз это новое

00:00:57

окно она у нас будет

00:00:58

окном авторизация потом мы еще создадим

00:01:01

окно регистрации и окно которое будет

00:01:03

отображаться после того как мы

00:01:04

авторизуемся в приложении но изначально

00:01:07

просто создаем окно авторизации и так

00:01:09

нажимаем правой кнопкой мыши на весь

00:01:11

проект здесь нажимаем добавить и здесь выбираем

00:01:15

можем выбрать сразу форма windows можем

00:01:18

выбрать создать элемент но в нашем

00:01:19

случае проще выбрать форма windows то

00:01:21

есть мы сразу окошко какой-то

00:01:23

определенной вы будем создавать вот

00:01:25

далее его необходимо назвать

00:01:27

в нашем случае давайте это уже будет

00:01:29

пуская как логин форм логин форм .

00:01:32

сэс то бишь все шар нажимаем добавить

00:01:36

сейчас-то формочка будет добавлено и с

00:01:39

ним мы уже можем как-то

00:01:40

играться итак первое что здесь нам

00:01:43

потребуется сделать давайте мы ее

00:01:45

чуточку уменьшим с вами сделаем чтобы

00:01:47

она была у нас примером такого вот

00:01:48

размера в дальнейшем мы с вами сможем

00:01:51

забрать вот эти ну как бы исключить

00:01:53

вообще вот эти вот все кнопочки и

00:01:55

поставим свои собственные кнопки пока

00:01:57

давайте пускай будет кнопки по умолчанию

00:01:59

чуть позже это поменяю первое что мы

00:02:01

сюда добавим это мы добавим такой

00:02:04

компонент который называется пенал

00:02:05

соответственно можем здесь прописать и

00:02:07

воду на он у нас здесь на это очень

00:02:12

удобная штука если вы

00:02:13

необходимо разукрасить какой-то

00:02:15

определенный элемент программы вот

00:02:17

например я хочу чтобы тот кусочек

00:02:19

программы

00:02:20

что у нас квадратиком выделен чтобы

00:02:22

кусочек программа он был например там

00:02:25

красного цвета вот соответственно я

00:02:26

перетаскиваю павел и потом здесь говорю

00:02:29

в big cola что например его цвет пускай

00:02:31

будет уже этот другой это пример вот

00:02:34

прежде чем мы помним его цвет давайте мы

00:02:36

его установим и нам необходимо его

00:02:38

установить таким образом чтобы он у нас

00:02:40

находился как бы на всю ширину и на всю

00:02:42

высоту самого приложения чтобы это

00:02:45

сделать можно его конечно такой по

00:02:47

перетаскивать но также здесь есть

00:02:49

удобная функция она называется dog

00:02:52

сейчас мы с вами найдем вот оно здесь

00:02:54

находится точно находится в

00:02:56

в макете вот и здесь дог здесь мы можем

00:03:00

с вами установить как она будет у нас

00:03:01

располагаться как будет располагаться

00:03:03

как будет располагаться данный блок

00:03:05

например я могу сказать что он будет

00:03:07

пережат только к верху вот он прижал

00:03:08

меня к верху могу сказать что он будет

00:03:10

бежать только к боковой части вот он

00:03:12

таким прижат

00:03:13

ну и при этом я могу конечно изменять

00:03:15

его ширину например сделать чтобы вот

00:03:17

так он только занимал боковую часть

00:03:19

дальше давайте еще раз на эту штучку

00:03:22

дальше я могу сказать чтобы он меня

00:03:24

находился просто например вообще ну то

00:03:26

есть по умолчанию как будто нам это

00:03:29

значит то что я сам его расположить где

00:03:30

угодно ну и например если я нажму по

00:03:32

центру то это означает что он у меня

00:03:33

будет занимать полностью всю ширину и

00:03:36

высоту моего приложения в принципе мне это не

00:03:39

надо поэтому именно такой формат ей

00:03:41

выбираю теперь давайте установим для

00:03:43

него цвет цвет устанавливается в color

00:03:46

есть необходимо установить вместо цвета

00:03:48

какую-то картинку то устанавливаем

00:03:50

background и матч как добавлять картинки

00:03:52

чуточку позже рассмотрим но в принципе

00:03:54

здесь вам потребуется вообще бэкграунд

00:03:56

имя чувствовали то есть фон

00:03:58

устанавливать картинкой то добавляйте

00:04:00

картинку и здесь просто выбираете

00:04:01

картинку от нажимаете на вот эти 3

00:04:03

точечки ну и соответственно выбирайте

00:04:05

нужную для вас картинку но мы просто бы

00:04:07

гранты меч не будем снова

00:04:08

и так чтобы установить задний фон мы с

00:04:12

вами конечно можем нажать на вот эту вот

00:04:13

кнопочку и здесь выбрать и цвета который

00:04:16

есть уже как бы к системе можем быть

00:04:18

выбрать другой здесь например выбрать

00:04:20

желтый цвет или какой то другой цвет но

00:04:22

также если мы хотим как-то вообще

00:04:25

разукрасить нашу про

00:04:26

банку сделать ее какой-то более такой

00:04:28

наши дату с нашими какими цветами то я

00:04:32

предлагаю вам следующее решение

00:04:33

зайдите в любой браузер в браузере в

00:04:36

поисковике напишите такую вещь как color

00:04:39

picker

00:04:40

и дальше вы можете попасть на один из

00:04:42

любых сайтов вот я например зашел на

00:04:44

color picker точками вы можете на другие

00:04:46

сайты заходить здесь же присутствует вот

00:04:48

такой вот селектор для выбора цвета вы

00:04:51

можете выбрать абсолютно любой цвет при

00:04:53

этом он меняется на заднем фоне

00:04:55

что очень очень удобно и соответственно

00:04:58

давайте для начала выберем какой то цвет

00:04:59

ну предположим что я хочу чтобы у меня

00:05:01

фон задний фон моей программки он был

00:05:05

например некий такой темный ну например

00:05:07

вот как сможешь даже еще более чем вот

00:05:09

например как такой вот цвет

00:05:11

соответственно вот я выбрал цвет

00:05:13

меня здесь и цвет отображается в разных

00:05:16

форматах то есть это есть и red green

00:05:18

bloopers формат и джигитовка разбит на

00:05:20

ну каждую каждую составляющую да то есть

00:05:23

красный зеленый синий вот это формат киу

00:05:26

это другие какие либо формат и меня в

00:05:28

принципе больше всего интересует формат

00:05:30

секс

00:05:31

соответственно его же мы копируем

00:05:33

contracts and переходим в visual studio

00:05:36

и здесь где у нас

00:05:37

ела написано а ну или любой другой цвет

00:05:40

как у вас там описан в это просто

00:05:42

выделяете вставляете control вы

00:05:43

нажимаете enter и вот этот цвет у вас

00:05:46

здесь как раз подставлен в принципе

00:05:49

теперь вы можете любые цвета подставлять

00:05:50

просто при помощи вот таких вот color

00:05:52

picker авто есть беречь выбирать них

00:05:54

нужны для вас цвет и дальше его просто

00:05:57

копируйте

00:05:58

окей у нас есть задний фон давайте

00:06:01

теперь сделаем некую верху плашку на

00:06:03

который будет просто написан текст но

00:06:05

снизу у нас уже будет поля различные

00:06:07

располагаться соответственно нам чтобы

00:06:10

опять таки сделать некую плашку с другим

00:06:12

цветом нам опять нужно просто обратиться

00:06:14

к такому элементу которая называется

00:06:17

финал поэтому опять его берем и просто

00:06:19

сюда перебрасываем в данном случае нам

00:06:22

необходимо что он уж чтобы он уже был

00:06:23

прижат что в январе располагался не на

00:06:27

всю ее ширину и не на всю высоту всего

00:06:29

приложения а лишь чтобы он располагался

00:06:31

на всю ширину и был прижат к верху

00:06:34

страничке соответственно чтобы нам не

00:06:36

возиться с этим всем ну то есть не

00:06:38

растягивать мы переходим вымок

00:06:40

и здесь выбираем dog и выбираем чтобы он

00:06:43

находился у нас сверху был прижат к

00:06:44

любит верхней части вот мы видим что он

00:06:47

у нас к верхней части прижат есть у вас

00:06:48

высота недостаточно и увеличьте и

00:06:51

уменьшить ее ну то есть как вам это уже

00:06:53

будет угодно

00:06:54

теперь переходим в биколор и

00:06:56

устанавливаем его тоже другим цветом

00:06:58

например я могу в принципе здесь выбрать

00:07:00

уже

00:07:01

из предустановленных то здесь

00:07:03

подбираются такие как бы соответствующие

00:07:05

цвета я например давайте вот этот синий

00:07:07

возьму его полностью весь скопируем и

00:07:10

здесь вместо того что здесь было

00:07:12

прописано просто вставляю enter и вот

00:07:14

такой у нас вверх есть как бы это

00:07:16

страничке теперь давайте добавим некую

00:07:19

текстовую надпись например авторизация

00:07:21

здесь будет написано чтобы добавить

00:07:23

текстовую надпись нам необходим такой

00:07:25

компонент который называется лейбл

00:07:27

его даже искать и мы не потому что он

00:07:28

обычно находится вот здесь как бы ну в

00:07:31

быстром поиске

00:07:32

итак берем этот лейбл это просто надпись

00:07:35

перебрасываем ее например на нашу первую

00:07:38

плашку и здесь нам будет проще

00:07:40

поиграться с со значениями которые

00:07:42

находятся вот здесь свойства

00:07:44

соответственно первое что мы давайте

00:07:46

сделаем это мы откроем фонд или же можем

00:07:48

даже вот так вот нажать вот эти 3

00:07:50

точечки и как бы установим просто шрифт

00:07:53

для этого текста единственно необходим

00:07:55

что загрузилась ok

00:07:57

во-первых и время что размер шрифта

00:07:59

пускай у нас будет наверно даже побольше

00:08:01

где-то двадцать четыре пикселя

00:08:03

набор символов символов дар кириллица

00:08:05

мне это подходит дальше нам необходимо

00:08:07

выбрать сам формат шрифтом ну например

00:08:10

давайте мы с вами выберем комикс comic

00:08:13

sans

00:08:14

санс м с а в принципе красивый шрифт

00:08:17

хотя можно что-то может и подругой

00:08:19

выбрать давайте остановимся на comic на

00:08:22

вот этом черте вы можете и любой другой

00:08:24

выбрать шрифт это вообще неважно это

00:08:27

просто чистый дизайн здесь мы выберем

00:08:29

давайте чтобы он был нас полужирным

00:08:32

применим окей вот такой текст на сейчас

00:08:35

здесь получился единственное наверное

00:08:37

says вот ведь я здесь открыл фонд и могу

00:08:39

с каждым конкретным свойствам работать и

00:08:41

вот единственная сайт давайте мы все

00:08:43

таки увеличим поставим чтобы здесь было

00:08:45

хотя бы наверное 28 может быть даже еще

00:08:49

чуть больше давать 32 поставим

00:08:52

вот думаю окей теперь это будет в таком

00:08:54

формате также нами необходимо установить

00:08:57

себе для текста цвет для текста он у нас

00:09:00

устанавливается не бэколл рбк это задний

00:09:03

фон вот цвет для текст устанавливается

00:09:05

бы for color for color это как раз то

00:09:08

что нам нужно выбираем данный формат

00:09:11

здесь также мы можем установить цвет и

00:09:14

сколы и кира на примере не хочу чисто

00:09:16

делаю стать я хочу вот например некий

00:09:18

такой цвет установить отвесного тьяго

00:09:20

здесь выбрал здесь выбираем вот этот

00:09:22

хэш-код копируем его здесь же его просто

00:09:25

вставляем нажимаем enter и вот этот цвет

00:09:27

у нас был добавлен теперь я бы хотел

00:09:29

расположить данный элемент

00:09:31

идеально по центру как ты можно сделать

00:09:33

ну конечно же можно на глаз это все

00:09:35

сделать но это не то что нас интересует

00:09:38

а мы все-таки хотим прям чтобы он

00:09:40

идеально идеально находился по центру

00:09:42

соответственно мы опять-таки переходим в

00:09:44

макет здесь говорим что у нас будет

00:09:47

прилегать

00:09:48

на всю ширину и высоту наши вот этого

00:09:51

вот главного объектов теперь давайте

00:09:54

поменяем текст для самого это по

00:09:57

объектам для этого нам необходимо зайти

00:09:59

в внешний вид и здесь будет такой

00:10:02

параметр как текст вот именно его нам

00:10:04

необходимо будет поменять

00:10:05

также хочу обратить внимание на то что в

00:10:07

разработке есть такой параметр как name

00:10:10

и здесь та же указано лейбл один нейм в

00:10:12

свою очередь это как как индентификации

00:10:16

какого-либо определенного объекта то

00:10:18

есть это просто некое значение по

00:10:21

которому мы можем выбрать данный объект

00:10:23

через код и вот это вот название для

00:10:26

этого объекта но звучит как лейбл 1 то

00:10:29

есть это не то название которое

00:10:30

отображается здесь это просто

00:10:31

идентификатор конкретного объекта вот

00:10:34

поэтому и поэтому айди мы как бы можем

00:10:36

выбрать нужный гряз объект нам же

00:10:39

необходимо перейти в текст здесь мы

00:10:41

давайте напишем следующем и давайте

00:10:43

напишем авторизация вот нажмем enter и

00:10:47

вот у нас есть этот текст который как

00:10:49

раз здесь прописан теперь что хочу

00:10:51

сделать во первых я хочу сделать

00:10:53

следующий текст оnline то есть

00:10:55

расположение текста сейчас на у нас

00:10:57

находится топлив то есть как бы вот

00:10:59

верхнем левом углу я хочу чтобы у нас

00:11:02

находился идеально что по вертикали

00:11:04

чтобы по горизонтали под

00:11:05

у нас есть особо никаких изменений пока

00:11:07

не произошло но чтобы нас произошли уже

00:11:10

наконец изменением нам необходимо аута

00:11:12

says изменить из значения true в

00:11:15

значение false то есть опасаясь это как

00:11:18

бы автоматическое это это свойство

00:11:21

который подстраивает ширину и высоту

00:11:23

автоматически в нашем случае она

00:11:25

подстраивает под содержимое контентом то

00:11:28

есть вот ширина идеально соответствует

00:11:31

контент убыток находится внутри я хочу

00:11:33

это изменить и здесь каждый фолз и в

00:11:37

таком случае у нас ширина и высота не

00:11:38

подстраиваться под от сам контент а у

00:11:42

нас она тогда уже подстраивается под

00:11:45

наши характеристики например в доке я

00:11:47

указал что она все у нас будет

00:11:48

находиться идеально на всю ширину и

00:11:51

высоту родительского элемента вот так и

00:11:53

расположилась благодаря тому что я

00:11:55

сказал что текст внутри данного блока

00:11:57

будет находиться что по вертикали что по

00:11:59

горизонтали по центру то поэтому он у

00:12:01

нас как раз таки находится ну и

00:12:03

опять-таки я могу его двигать как

00:12:04

угодному вниз вверх поставить ну и так

00:12:07

дальше в нашем случае что по вертикали

00:12:09

что по горизонтали по центру это

00:12:10

наиболее идеальный вариант также давайте

00:12:13

добавим еще одну надпись в принципе

00:12:15

перетащим ее куда-нибудь сюда и по факту

00:12:18

это надпись этот объект

00:12:20

он будет у нас служить за кнопку

00:12:22

закрытия конечно здесь можно прописать и

00:12:25

не только надпись здесь можно было

00:12:26

перекинуть такой объект как батон то

00:12:28

есть кнопка вот оно но давайте мы

00:12:31

реализуем кнопку закрытия приложения

00:12:33

через надпись и сейчас вы поймете как мы

00:12:36

это сделаем и так что первое нам

00:12:38

необходимо сделать выбираем этот объект

00:12:40

и делаем с ним следующие во-первых место

00:12:42

того что текст который здесь пишется мы

00:12:44

ставим другой текст это текст будет

00:12:47

просто символ x

00:12:48

то есть и так будет как вот такой вот

00:12:49

his thick но естественно при нажатии на

00:12:51

него мы будем закрывать пока у нас того

00:12:54

функционала закрытия не будет но чуть

00:12:55

позже мы это реализуем дальше нам

00:12:58

необходимо с вами установить другой цвет

00:13:00

текста так тут случайно другой выбрался

00:13:03

мы давайте установим что здесь будет

00:13:04

прописан байт то есть белый цвет

00:13:07

дополнительно необходимо поиграться со

00:13:09

шрифтом давайте просто установим его

00:13:11

другой размер например скажем что он

00:13:13

будет 18 пикселей вот такой вот у нас

00:13:16

x здесь получился его можем перетащить

00:13:19

уже сами без не прибегает к тем

00:13:24

свойствам которым мы реализовывали для

00:13:26

авторизации то есть к доку к прочим

00:13:29

вещам просто сами его перетащим и

00:13:30

единственное что еще здесь я бы хотел

00:13:32

добавить

00:13:33

это я хотел изменить курсор смотрите при

00:13:35

наведении здесь курсор будет дефолта

00:13:37

есть вот по умолчанию как курсор я же

00:13:40

хочу чтобы у нас так кнопка она была

00:13:42

активна и соответственно активные кнопки

00:13:44

они обычно выделяются вот таким вот

00:13:46

курсором как бы курсор руки поэтому

00:13:50

давайте выберем что здесь будет как раз

00:13:52

при наведении курсора нас как hand вот

00:13:55

теперь давайте протестируем что у нас на

00:13:57

данный момент есть если я сейчас

00:13:59

попробую все запустить у нас будет

00:14:01

небольшая ошибка и это ошибка связана с

00:14:04

тем что в главном классе в классе

00:14:06

программ мы с вами здесь стартуем form1

00:14:10

то есть такой класс как form1

00:14:11

этот пласт он был удален а

00:14:14

соответственно него ним но я не могу его

00:14:16

вызывать мне необходимо вызывать другой

00:14:18

класс в моем случае этот класс он

00:14:20

называется логин форм правильно писал

00:14:24

форм вот данный класс у нас есть вот он

00:14:27

это наша формочка авторизации и именно

00:14:30

при старте программы мы будем запускать

00:14:32

вот эту вот формочку авторизация теперь

00:14:35

мы можем с вами запустить и посмотреть

00:14:37

что сейчас у нас есть на данный момент

00:14:39

наша программа выглядит вот так если все

00:14:42

необходимые поля

00:14:43

те точно те же самые что и были вы

00:14:44

visual studio также при наведении на вот

00:14:47

это вот надпись у нас курсор становится

00:14:49

активным пока при нажатии ничего не

00:14:51

будет происходить но в то же время чуть

00:14:53

позже мы это сами реализуем давайте

00:14:55

теперь закроем приложение пока нам

00:14:57

необходимо нажимать вот эту вот кнопку

00:14:59

вот мы вышли из приложения и теперь

00:15:02

поработаем над его еще дизайном потом

00:15:04

создадим

00:15:05

ник некоторые дополнительные функции ну

00:15:07

и на этом наш урок будет завершён окей

00:15:10

смотрите первое что я хочу здесь сделать

00:15:12

я хочу добавить сюда два поля первое

00:15:15

поле будет для по дороге на второе поле

00:15:17

будет для ввода пароля

00:15:18

ну и соответственно должна быть кнопка

00:15:20

также возле каждого из полей я хочу

00:15:22

чтобы у меня была куб какое-либо

00:15:24

изображение вот чтобы добавить

00:15:26

изображение мне необходимо добавить

00:15:28

такой который называется picturebox

00:15:30

соответственно внутри этого объекта мы с

00:15:32

вами можем поместить какую-то

00:15:33

определенную картинку давайте мы вот

00:15:36

расположили здесь пикчи боксе прежде чем

00:15:39

закинем в него какую-либо картинку

00:15:41

нам необходимо с вами во первых создать

00:15:43

здесь папочку который как раз и будет

00:15:45

находиться все необходимые картинки

00:15:46

чтобы это сделать мы нажимаем правой

00:15:48

кнопкой мыши на весь наш проект

00:15:50

здесь нажимаем добавить и нажимаем

00:15:53

создать папку дальше саму папку называем

00:15:56

как имя jest

00:15:57

и внутренние мы поместимся необходимые

00:16:00

изображения прежде всего необходимо эти изображения

00:16:02

скачать я вам рекомендую такой сайт как

00:16:05

айкан finder здесь есть гигантское

00:16:08

количество различных бесплатных картинок

00:16:10

да здесь и платные картинки на я в

00:16:12

основном пользуюсь именно всегда

00:16:13

бесплатными картинками и здесь в

00:16:15

достаточно много вот например давайте мы

00:16:17

пропишем с вами юзера и попробуем найти

00:16:19

какую-то картинку который будет

00:16:20

соответствовать

00:16:21

иконки пользователя здесь выбираем что

00:16:24

мы ищем лишь бесплатные картинки поэтому нажимаем на

00:16:26

free сейчас он 2 секунды загрузит и мы

00:16:29

сможем какую-то скачать

00:16:30

вот и здесь чуть ниже нас есть всякие

00:16:34

картинки которые мы можем подкачивать

00:16:36

это полностью бесплатные картинки

00:16:38

например давайте вот для пользователя мы

00:16:40

встречаем вот такую вот картинку

00:16:42

естественно выбираем и нажимаем download

00:16:44

деньги у нас начнется скачивание

00:16:48

хорошо и также давайте мы скачаем с вами

00:16:51

еще некую картинку который у нас будет в

00:16:53

виде замка поэтому лог пишем и здесь

00:16:55

выбираем фриз вами вот единственное они

00:16:58

сейчас опять таки 2 секунды он загрузит

00:17:01

и мы сможем это все скачать и здесь та

00:17:04

же выберем какую-то картинку ну например

00:17:05

давайте вот эту вот картинку мы с вами

00:17:07

скачаем нажимаем download бенджи

00:17:10

все изображения у меня хранятся в папке

00:17:12

загрузки я здесь эти изображения уже

00:17:15

переименовал и теперь просто их

00:17:17

забрасываю в папочку и magic

00:17:19

теперь же нам необходимо их добавить для

00:17:21

вот этого объекта чтобы это сделать я

00:17:23

могу нажать на вот эту вот стрелочку ну

00:17:25

и здесь нажать выбрать изображение

00:17:27

либо же могу выбрать этот объект и здесь

00:17:29

в свойстве и не шил имидж просто нажать

00:17:32

на соответственно вот эти вот три три

00:17:35

точки и здесь та же выбрать изображение

00:17:37

давайте например уже через этот формат

00:17:39

выберем хотя это не принципиально важно

00:17:42

так вот смотрите здесь мы можем выбрать

00:17:44

изображение локально на компьютере

00:17:46

просто как бы взять из компьютера их

00:17:48

выбрать вот либо мы можем выбрать данные

00:17:51

из нашего проекта есть сюда забросил и

00:17:53

здесь их нет и здесь их необходимо как

00:17:55

бы просто выбрать

00:17:56

соответственно чтобы их выбрать мы

00:17:58

нажимаем импорт дальше мы с вами заходим

00:18:00

в давайте мы зайдем в этот компьютер

00:18:03

здесь этим на диск c пользователей админ

00:18:06

дальше source

00:18:08

ну короче дойдем до папки вот этого

00:18:11

нашего проекта и здесь же будет папочкой

00:18:14

имя джесс которая как раз создавал и вот

00:18:16

мы здесь мы выбираем нашего юзера

00:18:17

нажимаем открыть нажимаем ok и после

00:18:22

этого данная картинка у нас она должна

00:18:24

здесь быть добавлена вот видите что она

00:18:26

довольно таки у нас огромная дано даже

00:18:28

не помещается только в гигантском а

00:18:30

здесь есть картинка нам необходимо

00:18:32

сделать так чтобы наше изображение она

00:18:34

увеличивалась либо уменьшалась

00:18:36

пропорционально размеру самого вот этого

00:18:38

объекта сделать это очень просто нам

00:18:41

необходимо с вами зайти в

00:18:44

поведением то есть выбрать объект за

00:18:46

этим поведением и здесь есть says mode

00:18:48

его он установим как нормальный и ваш

00:18:51

необходимо изменить мы можем уступить

00:18:53

здесь stretch

00:18:54

и мяч и тогда изображение она будет у

00:18:56

нас адаптироваться под размеры самого

00:18:59

нашего основного блока

00:19:00

вот в нашем случае я предлагаю размеры

00:19:03

размеры самого основного блока

00:19:05

немножечко установить через свойства

00:19:09

потому что тогда мы сможем скрыть их

00:19:10

прям точными вот соответственно для

00:19:12

этого мы переходим в макет здесь есть

00:19:14

сайт и здесь мы устанавливаем две

00:19:17

координаты если есть не помните какая за

00:19:19

что отвечает или просто не знаете то

00:19:21

можете открыть этот сайт и здесь будет

00:19:23

ширина а также высота то есть первая

00:19:25

координата ширина и высота здесь давайте

00:19:27

устроим чтобы он был на 64 на 64 пикселя

00:19:32

вот и соответственно такая вот небольшая

00:19:34

картинка у нас вот здесь она будет такая

00:19:36

небольшая

00:19:37

иконка например где-нибудь здесь теперь

00:19:40

давайте прежде чем мы создадим вторую

00:19:42

картинки картинку для как бы поля с

00:19:44

паролем

00:19:45

мы давайте лучше с вами сюда добавим

00:19:47

такую вещь которая называется текст бокс

00:19:50

это поле для ввода информации на данный

00:19:53

момент он такой вот супер му

00:19:55

людей и мы можем заметить что я могу

00:19:57

пока его увеличить только ширину то есть

00:19:59

высоту я его увеличить не могу чтобы

00:20:01

сделать чтобы мы могли увеличить его

00:20:03

высоту нам необходимо сделать чтобы он

00:20:05

был нас multiline

00:20:07

то есть чтобы мы не мог как бы могли

00:20:08

водить несколько линий поэтому выбираем

00:20:11

тут вот ставим здесь как бы галочку и в

00:20:14

таком случае мы уже можем пейте его

00:20:16

увеличить еще и по высоте

00:20:18

но соответственно такой вот объект на

00:20:20

здесь будет давайте с ним мы тоже

00:20:22

чуточку еще поиграем мы возьмем здесь

00:20:24

фонд и установим его другим дело в том

00:20:27

что здесь шрифт которые будут вписывать он будет

00:20:30

довольно таки маленьким его будет плохо

00:20:31

видно вот поэтому давайте мухи нам чтобы

00:20:34

здесь шрифт был пускает даже возможно

00:20:36

26000 то потом поменяем в плане название

00:20:40

шрифта мы давайте здесь установим в

00:20:43

принципе здесь неважно давайте может

00:20:44

держит тот же самый там с ней роман и

00:20:46

это будет обычный шрифт

00:20:48

ok нажимаем что мы такое выбрали и

00:20:50

теперь нам необходимо создать еще более

00:20:52

для ввода пароля соответственно чтобы

00:20:56

такое сделать на конечно клетки можно

00:20:57

перетаскивать все объекты но в нашем

00:20:59

случае это будет не логично просто

00:21:01

потому что мы можем с вами выбрать таких

00:21:03

объекта чтобы выбрать несколько объектов

00:21:05

зажимайте control и выбирайте несколько

00:21:07

объектов

00:21:08

дальше вы можете выбрать можете нажать

00:21:10

control c и потом контроллер либо можете

00:21:13

нажать правой кнопкой мыши здесь нажать

00:21:15

копировать нажать правой кнопкой мыши и

00:21:17

нажать

00:21:18

ставить после этого как мы как вы видите

00:21:20

у меня как бы продублировали про

00:21:22

дублировался весь этот блок который там

00:21:24

скопировал ну и соответственно здесь

00:21:26

кое-что мы с вами поменять во первых что

00:21:28

необходимо понять это поменять картинку

00:21:29

здесь мы выбираем другую картинку

00:21:31

нажимаем выбрать изображением здесь

00:21:34

импортируем новое изображение нажимаем

00:21:36

импорт выбираем урок нажимаем открыть

00:21:40

нажимаем ok

00:21:41

после этого это изображение у нас

00:21:43

установлена причем мы можем заметить что

00:21:44

мы сразу же здесь может указывать режим

00:21:47

изменения размера вот в моем случае

00:21:50

здесь уже встреч и моче соответственно я

00:21:52

менять ничего не буду но если у вас

00:21:54

здесь normal или для труб или другой

00:21:55

формат только не что тоже смотрите

00:21:57

stretch и матч так теперь вы классно еще

00:22:00

закрыть эту штуку хорошо теперь же

00:22:02

поскольку это у нас поле с паролем

00:22:04

то поле с паролем я предлагаю кое-что

00:22:07

tab

00:22:08

дело в том что здесь нас должен

00:22:10

отображаться просто текст не там

00:22:11

например эй би си да здесь же пароль и у

00:22:14

нас должны отображаться кружочки

00:22:16

соответственно чтобы у нас отображались

00:22:17

кружочки нам необходимо выбрать этот

00:22:20

поле и здесь нам необходимо найти такую

00:22:24

вещь которая называется password чар вот

00:22:27

она она находится в поле поведения здесь

00:22:31

мы с вами указываем следующее нам

00:22:32

необходимо здесь установить хотя нет

00:22:35

знаете по моему нет вру

00:22:37

и не то поле нам нужно не позволь чар

00:22:39

password or это просто мы можем указать

00:22:42

какой как символ будет отображаться

00:22:44

вместо вот этих вот кружочков например

00:22:46

каждый раз у нас просто булочка требует

00:22:47

например отображаться ну в нашем случае

00:22:49

это нам не надо поэтому это не та поля

00:22:50

нам нужен юз систем асфальт чар то есть

00:22:54

использовать как бы системный

00:22:56

системный символ для отображения пароля

00:22:59

нашем случае это будет системы

00:23:00

общественным валы в любом случае это

00:23:02

будет такой кружочек а вот и

00:23:05

соответственно здесь мы указом с вами

00:23:06

значения true

00:23:07

вот причем вы можете а не выиграть вот

00:23:09

это вот нажимать сюда и выбирать нужное

00:23:11

значение просто выбрать поле

00:23:13

сделать scroll на мышке колесиком и у

00:23:17

вас установится другое значение это

00:23:18

более удобное средство можете таким

00:23:21

способом с таким способом изменять

00:23:24

данные итак давайте прежде чем у все

00:23:26

запустить мы еще добавим сюда кнопку

00:23:27

кнопка у нас называется как объект батон

00:23:31

соответственно нибудь сюда и переносим

00:23:33

из кнопку нас все довольно таки будет

00:23:35

просто во первых нам необходимо

00:23:37

увеличить давайте скажем что она будет у

00:23:40

нас примеру пускай вот такая будет чуть

00:23:43

побольше по

00:23:44

по высоте мы где-нибудь здесь она у нас

00:23:46

будет находиться здесь мы меняем текст

00:23:49

например давайте напишем что войти

00:23:51

нажимаем enter вот теперь же давайте мы

00:23:55

поменяем здесь сначала шрифт делом его

00:23:58

побольше соответственно мы выбираем

00:24:00

шрифт который у нас будет null

00:24:03

отдавайтесь со шрифтом конкретной

00:24:04

операции не буду просто укажу что он

00:24:05

будет 1 побольше например где-то

00:24:07

двадцать четыре пикселя слишком огромный

00:24:10

давайте все-таки укажем чтобы у нас был

00:24:12

где-то 20 пикселей все равно много

00:24:14

давать уже чисто доиграемся с этой

00:24:17

штучкой 15 пикселей водному хорошо

00:24:19

и теперь попробуем мы с вами сделать вот

00:24:22

что давайте мы установим с вами другой

00:24:24

тип для этой кнопки смотрите здесь самом

00:24:28

верху мы можем выбрать flat style

00:24:31

и ну это как бы тип самой кнопки здесь

00:24:34

нас стандартный тип для кнопки мы можем

00:24:37

выбрать разные это может быть не типа

00:24:38

попросят никак как всплывающее окно мы

00:24:41

можем выбрать здесь например системная

00:24:44

просто кнопкой мы можем выбрать здесь

00:24:46

след и иконкой и вот как раз флот я хочу

00:24:49

выбрать такая вообще flat design это так

00:24:53

сказать то что уже прям новая какая-то

00:24:54

фишка в дизайне но все же это куда новее

00:24:58

фишка нежели стандартные кнопки которые

00:25:00

здесь предоставляются поэтому мы будем

00:25:03

использовать такой flat design by такие

00:25:05

вот простые такие элементы без углов из

00:25:08

ничего там например простаки и квадрат и

00:25:10

вот они выглядят хорошо и с ними будем

00:25:12

как раз работать кроме того желает когда мы

00:25:16

навели что у нас используется flat

00:25:17

design можем поменять еще flight и певиц

00:25:19

и здесь мы можем с вами сделать довольно

00:25:22

таки много прикольных вещей во-первых

00:25:24

если я вот выберу в другой кайта элемент

00:25:26

мы замечаем что у нас здесь есть некая

00:25:27

обмотка до для этой кнопки эту обводку

00:25:30

мы можем с вами убрать ли мы можем

00:25:32

установить ее немножко другой например в

00:25:34

нашем случае давайте наверное давайте

00:25:37

наверное первое что мы сделаем это мы

00:25:39

установим просто другой цвет для кнопки

00:25:42

ну к примеру пускай у нас будет свет

00:25:44

который будет наверное зеленый даже у

00:25:47

нас авторизация пока будет вот такой

00:25:49

например какой то свет копируем его и

00:25:52

сюда например и вот закинем закинуть его

00:25:55

необходимо в бег colors офис но тут все

00:25:57

мы отсюда вырезаем вставляем вот такой

00:26:00

цвет будет для кнопки довольно хорошо

00:26:01

так вот смотрите давайте мы border says

00:26:04

мы во первых мы можем удалить для этого

00:26:06

просто здесь нолик у нас не будет вот

00:26:08

этой обводки давай покажи вот нет

00:26:10

обводки либо же му мы можем оставить эту

00:26:12

обводку просто сделать ее другого цвета

00:26:14

для этого мы устанавливаем здесь

00:26:16

например что она будет там один пиксель

00:26:18

в ширину или там даже 10 эксепшен видит

00:26:20

есть есть пиксель то огромная такая

00:26:22

водка получается я установлю все-таки

00:26:24

что 0 если вы хотите вы можете добавить

00:26:26

и тогда вы можете еще изменить цвет

00:26:29

самой обмотки вот просто сюда вставляете

00:26:31

нужное для

00:26:32

значение например тот же самый цвет

00:26:33

который я вот устанавливал для заднего

00:26:36

фона также здесь есть интересные эффекты

00:26:39

например а мы можем сменить цвет

00:26:41

а при нажатии на при нажатии мышкой на

00:26:45

кнопку также мы можем смотреть цвет при

00:26:47

наведении мышкой на кнопку

00:26:49

например давайте мы скажем что прям

00:26:51

нажатием у нас будет вот какой то такой

00:26:53

темный фон

00:26:54

вот на его здесь копируем с вами и при

00:26:58

нажатии он будет у нас соответственно

00:27:00

темные просто также при наведении мы

00:27:03

давайте сделаем чтобы нас кнопка была

00:27:04

просто чуть-чуть

00:27:05

любого цвет например вот никого желтого

00:27:08

такого темно-желтого такого цветов

00:27:10

становилось известно сюда тоже знаем

00:27:12

такой какой-то цвет ok с этим мы вроде

00:27:15

бы с вами разобрались также давайте

00:27:16

здесь еще cursors вами сделаем чтобы он

00:27:18

у нас был как ручка то есть активный как

00:27:21

бы курсор хорошо теперь давайте опять

00:27:24

таки прежде чем все это запустим давайте

00:27:27

мы с вами еще поработаем просто над

00:27:29

нашим основным окном здесь я предлагаю

00:27:32

сделать вот что я хочу удалить вот эти

00:27:33

вот кнопки у нас будет своя собственно

00:27:35

кнопка поэтому эти кнопки нам не нужны

00:27:36

будут

00:27:37

и чтобы удалить все эти кнопки нам

00:27:40

необходимо затею

00:27:41

нажать на формочку зайти вы внешний вид

00:27:43

и здесь у нас есть форм гордо стоял

00:27:46

здесь же нам здесь же нам необходимо с

00:27:49

вами выбрать вместо say забыл нам

00:27:52

необходимо выбрать нам в таком случае

00:27:54

видите у нас нет никаких рамок нет

00:27:56

вообще ничего единственное что в нашем

00:27:59

случае наверное вот этим вот фон и вот

00:28:01

эти вот панельки они будут растянуты

00:28:03

теперь не на всю ширину это надо

00:28:06

смотреть мне кажется тут просто не на

00:28:07

всю ширину растянута ну давайте наверно

00:28:09

и запустим посмотрим что у нас сейчас

00:28:10

есть если что то вы подправим и тогда

00:28:14

уже будем разбираться кстати текст вот

00:28:15

этой кнопки тоже стоило бы сделать белым

00:28:17

ну это уже чуть позже сделаем после

00:28:20

запуска вот так выглядит наше приложение

00:28:21

не удивляйтесь тому что мы его не можем

00:28:24

перетащить это абсолютно нормально моего

00:28:26

действительно не можем перетащить потому

00:28:28

что мы просто удалили сами вот эти вот

00:28:30

способности по перетаскиванию по прочим

00:28:32

вещам также я сюда поводил какой-то

00:28:35

текст quite он здесь довольно-таки хорошо

00:28:36

выглядеть единственно у меня есть еще

00:28:38

ошибка связанная с полем пароль надо

00:28:42

сейчас разобраться должны были

00:28:44

установить эти символы

00:28:45

не установились ну и наша кнопка войти

00:28:47

как видите она при наведении становится

00:28:49

такого желтоватого цвета ну если мы

00:28:52

нажмём то она становится такого темного

00:28:54

зеленого цвета конечно цвета могут

00:28:56

подобраны быть не наилучшим образом но в

00:28:58

то же время главное вы теперь знаете как

00:29:00

эта концепция вообще реализовываются

00:29:02

теперь чтобы выйти с приложением и

00:29:04

конечно можешь попытаться нажать на эту

00:29:06

кнопку у нас ничего не произойдет просто

00:29:08

потому что ну этой кнопки мы не

00:29:10

добавились никаких событий поэтому чтобы

00:29:12

выйти из приложения нам необходимо

00:29:14

нажать вот здесь вот тогда мы выходим из

00:29:18

режима просмотра и можем продолжить как

00:29:21

бы редактировано первое что мы сразу с

00:29:23

вами сделаем давайте мы установим новый

00:29:24

цвет для текста здесь мы просто пропишем

00:29:27

с вами white

00:29:28

и да я написала на русском поэтому мне

00:29:31

здесь ошибка выдалась еще раз пропишем

00:29:33

white нажимаем enter вот у меня белый

00:29:36

текст с этим хорошо также давайте мы

00:29:38

сразу с вами добавим обработчик события

00:29:41

на непосредственно вот эту вот кнопку

00:29:43

после чего попробуем чтобы наш чтобы мы

00:29:46

могли перетаскивать и саму эту

00:29:48

программку а также еще добавим необходимость или

00:29:52

для пароля но прежде давайте просто эту

00:29:54

кнопку завершим чтобы когда мы

00:29:55

тестировали чтобы одесситы могли

00:29:56

выходить из приложения не нажимать там

00:29:58

где-то на стоп программы итак здесь все

00:30:02

довольно таки на самом-то деле просто

00:30:03

что нам необходимо сделать нам

00:30:05

необходимо зайти теперь уже не просто в

00:30:07

свойственном необходимо зайти вы

00:30:08

событиям и здесь у нас есть куча событий

00:30:12

с которыми мы можем работать например

00:30:13

самое простое событие это событие клик

00:30:17

то есть при нажатии на какой-то

00:30:18

определенный объект например при нажатии

00:30:20

на вот эту вот кнопочку на это текстовое

00:30:23

поле у нас будет срабатывать некая

00:30:25

функция эту функцию мы можем здесь с

00:30:27

вами прописать чтобы вызвать общие

00:30:29

события клик чтобы нас создалась

00:30:32

функцией чтобы мы могли с этой функция

00:30:34

работать мы можем мы можем эту функцию

00:30:36

создать непосредственно через вот эту

00:30:38

вкладку события

00:30:39

либо же мы можем просто два раза нажать

00:30:41

на нужный нам объекты у нас будет

00:30:43

создана функция которая будет

00:30:44

срабатывать при нажатии на нужный объект

00:30:47

давайте сейчас мы поступим именно таким

00:30:49

образом то есть просто нажмем два раза

00:30:51

на какой-то объект и нас из добиться

00:30:52

функция а потом мы еще с этим окошком

00:30:55

поработаем потому что он

00:30:56

нам здесь еще понадобится кое-какие

00:30:58

события с которыми будем работать и так

00:31:01

смотрите нажимаем два раза на вот эту

00:31:03

вот надпись нажимаем вот у нас создается

00:31:06

вот у нас во первых открывается сам файл

00:31:09

логин форм . сия скопить это основной

00:31:11

наш файл для работы с вот этим вот

00:31:13

окошком с окошком логин форм и здесь у

00:31:16

нас создалась новая новая функция

00:31:20

которая называется лейбл 2 клик вот а на

00:31:23

самом-то деле

00:31:24

функция называется не очень хорошо

00:31:26

потому что наши вот это вот надпись она

00:31:28

у нее название как лэйбл 2

00:31:30

давайте перейдем в в свойства и здесь мы

00:31:35

посмотрим то у нас будет такое поле как

00:31:39

нейм год поля name

00:31:40

и здесь просто написано лейбл 2 в общем

00:31:42

что я предлагаю давайте мы пока эту

00:31:44

функцию с вами удалим вот и заодно

00:31:47

покажу вам какие то могут быть возникать

00:31:49

ошибки вот я удаляю функцию перехожу

00:31:51

обратно в окно редактирование у меня

00:31:53

здесь появляется ошибка и вы можете не

00:31:56

понять что вообще произошло дело в том

00:31:58

что мы с вами удалили функцию которую

00:32:02

которая вызывается в другом классе а

00:32:04

соответственно и все оно вызывается в

00:32:05

другом классе мы ее удалили то

00:32:07

происходит ошибка потому что вызывается

00:32:09

функция которая не существует в общем

00:32:11

чтобы решить подобные ошибки необходимо

00:32:14

просто вот здесь внизу у вас

00:32:15

отображается к сама ошибка

00:32:17

необходимо два раза нажать на эту ошибку

00:32:18

у вас открывается файл в котором как раз

00:32:22

присутствует данная ошибка при чем на

00:32:23

той же строке где то ошибка присутствует

00:32:26

открывается и здесь вы по сути

00:32:28

прописываются вот что мы обращаемся к

00:32:31

как будут этой вот формочки обращаемся к

00:32:34

объекту которого есть интернете котором

00:32:36

я говорил про идентификаторы

00:32:38

интенсификатор

00:32:39

лейбл 2 именно как бы к этой for мы

00:32:43

сейчас не откроем ее наводчик именно

00:32:45

куда этой кнопочке закрыть

00:32:46

дальше мы обращаемся к событию клик и на

00:32:49

него вешаем некое событие вот gets

00:32:52

прописан плюс равно здесь мы обращаемся

00:32:55

к i классу систем дальше эван хэндлер и

00:32:58

вешаем на него событие которое

00:32:59

называется которая реализуется в такой

00:33:02

функции как лейбл 2 клик соответственно

00:33:05

мы эту функцию с вами удалили и поэтому

00:33:08

нас здесь возникает ошибка

00:33:09

мне немножко здесь лишь отзовись да все

00:33:11

хорошо теперь так вот все что нам

00:33:14

необходимо сделать чтобы этой ошибки не

00:33:16

было просто удалить эту строчку кода но

00:33:18

и соответственно тогда у нас нет события

00:33:19

при нажатии ну и ошибки тоже нет

00:33:22

сохраняем этот файл переходим обратно в

00:33:24

логин форм и сейчас мы заметим что у нас

00:33:26

он теперь купцы не туда пришел сюда

00:33:28

приходим сейчас мы замечаем до что у нас

00:33:31

формочка опять-таки работать корректно и

00:33:32

никаких ошибок уже нет такие ошибки

00:33:34

могут часто возникать поэтому на них я

00:33:36

хотел обратить внимание также еще по

00:33:39

поводу этого файла хочу сказать который

00:33:41

у нас вот открылся это файл который

00:33:43

описывает нашу формочку вот эта вот

00:33:45

формочка и это файл который у нас идет

00:33:48

еще с .

00:33:49

дизайнер это файл который в текстовом

00:33:52

формате описывать все эти элементы все

00:33:54

эти данные которые есть нас на этой

00:33:55

формочки то есть мы просто там в

00:33:57

графическом редакторе работаем на по

00:33:59

факту все что мы пишем в графическом

00:34:01

редакторе но трансформируется еще в код

00:34:03

и вот здесь весь код у нас как бы

00:34:05

прописывается окей это было такой не

00:34:09

маленькое отступление давайте теперь

00:34:11

опять таки вернемся к этой кнопки

00:34:12

закрыть здесь мы для нее просто поменяем

00:34:15

названием то есть вот у нас есть ней и

00:34:18

здесь мы его просто поменяем давайте

00:34:20

напишем чтобы у нас индентификации 5

00:34:22

таки это просто идентификатор это не

00:34:24

надпись который будет отображено это

00:34:26

просто аиде как бы оба объекта с которым

00:34:28

я хочу работать лейбл во мне ни о чем не

00:34:30

говорит поэтому я здесь меняя название и

00:34:32

например назову ее как клаус батон ну и

00:34:35

соответственно жму enter

00:34:36

теперь же давайте опять таки 2 раз

00:34:39

нажмем на эту кнопку у нас создается

00:34:41

функция которая теперь называется клаус

00:34:43

батон клик и эта функция для меня

00:34:45

намного уже более понятно нежели лейбл

00:34:47

два клика да потому что лейбл 2 кликнул

00:34:49

на что я нажимаю за что отвечает эта

00:34:52

функция не понятно так я уже сразу

00:34:53

понимаю что это при нажатии на кнопку

00:34:55

закрыть у нас будет происходить какие-то

00:34:57

действия и так при нажатии на кнопку

00:35:00

закрыть у нас должно происходить просто

00:35:02

одно простейшие действия мы обращаемся к

00:35:05

этому окну и обращаемся к такой функции

00:35:08

которая называется клоуз совместное и

00:35:10

здесь прописываем открываем закрываем в

00:35:12

круглые скобки и в конце ставим точку

00:35:15

извиняюсь в конце вот здесь ставим точку

00:35:18

, здесь случайно добавил ok сохраняем

00:35:21

этот файл можем в принципе z

00:35:23

стиль даже проверить работает ли у нас

00:35:25

все нас должно все работать итак смотрим

00:35:27

на эту кнопку нажимаем на нее и у нас

00:35:30

здесь это происходит то что окно у нас

00:35:32

закрылась но и сама программка тоже

00:35:33

вышла из режима просмотра то есть кнопка

00:35:36

как бы работает и все у нас отображается

00:35:38

корректно

00:35:39

теперь давайте поработаем с вот этим вот

00:35:41

полем почему же здесь все таки у нас

00:35:43

отображаются некорректные символы все на

00:35:45

самом-то деле довольно таки просто если

00:35:47

мы указываем здесь multiline то в таком

00:35:49

случае у нас вот эти вот символы для

00:35:51

пароля они отображают ну вообще не

00:35:53

отображаются поэтому multiline мы здесь

00:35:55

убираем когда я это делаю мы замечаем

00:35:58

что у нас вот это вот поле она теперь мы

00:36:01

можем видеть что мы не можем изменить

00:36:03

его высоту и соответственно высота этого

00:36:05

поля не соответствует высоте этого поля

00:36:07

поэтому нам необходимо кое-что с вами

00:36:10

поменять смотрите мы зайдем в логин форм

00:36:14

то бишь там где мы прописывали с вами

00:36:17

тот клаус батон и здесь в конструкторе в

00:36:20

конструкторе который нас вызывается при

00:36:22

создании объекта на основе этого класса

00:36:25

здесь мы можем прописывать различные

00:36:27

характеристики для всех элементов

00:36:28

которые есть нас на страничке в нашем

00:36:30

случае я хочу сделать вот что я хочу

00:36:33

когда мы как бы загрузим приложений я

00:36:36

хочу чтобы высота этого объекта была

00:36:38

точно такой же как высота этого объекта

00:36:41

соответственно прежде чем это все с вами

00:36:43

сделаем мы давайте с вами имена этих

00:36:45

объектов поменять то здесь у нас будет

00:36:47

нет x-box а теперь это будет

00:36:49

а вот и так напишем false field нажимаем

00:36:54

enter а это у нас теперь будет

00:36:55

это же не так zbox а это теперь у нас

00:36:57

уже будет пускаем логин field и теперь я

00:37:01

понимаю ну какое поле когда я обращаюсь

00:37:04

к логин he felt я понимаю какому

00:37:06

конкретно поле я обращаюсь потому что

00:37:07

край обращаюсь просто по имени textbox

00:37:09

один но это не понятно что это что это

00:37:12

такое поэтому такие имена здесь стоит

00:37:14

менять простой чтобы вы понимали какому

00:37:16

объекту вы конкретно обращайтесь окей

00:37:19

здесь нас все довольно таки просто быть

00:37:21

мы просто с вами обращаемся к язык то

00:37:23

есть к этому окно

00:37:24

дальше мы обращаемся с вами к такой вещи

00:37:27

как остыл то есть я только что поменял

00:37:29

название вот я обращаюсь к этому вот

00:37:31

поле по sfiv дальше я здесь прописываем

00:37:34

для него такой параметр как

00:37:36

сайт и мудрость размер его устанавливаем

00:37:39

и усыновлю новые размеры для этого я

00:37:41

использую класс says поэтому я выделяю

00:37:44

память ставлю ключевое слово new потом

00:37:47

удавлю какой класс мы используем и здесь

00:37:50

мне необходимо с вами прописать

00:37:51

следующие

00:37:52

ширину этого объекта я менять не буду а

00:37:55

соответственно я пропишу и просто здесь

00:37:57

такую вещь как бы спас фелпс айс и

00:38:01

говорю что я обращаюсь к bets то есть в

00:38:04

качестве ширины я устанавливаю ширину

00:38:06

которые есть на данный момент а вот в

00:38:09

качестве высоты мне необходимо взять

00:38:12

высоту которая есть внутри у которой

00:38:14

есть для воды того как объект а

00:38:16

соответственно и я выбираю этот объект

00:38:18

захожу в свойства вижу что здесь высота

00:38:21

у него 64 пикселя

00:38:23

ну и поэтому я здесь просто устанавливаю

00:38:25

значение как 64 вот и все то есть я

00:38:28

установил две координаты две координаты

00:38:30

на ширину и высоту и теперь при запуске

00:38:34

у нас как бы все должно работать

00:38:35

корректно носом то деле корректно

00:38:37

работать еще все у нас не будет не будет

00:38:40

она корректно работать просто по той

00:38:41

причине что у нас есть такая вещь вот

00:38:45

как там где мы раньше с вами с этими

00:38:47

текстами надписями у нас было такое

00:38:49

такое свойство как

00:38:50

out of sight которая подстраивать ширину

00:38:52

и высоту под содержимое контента здесь

00:38:56

такая же есть такой же есть свойства и

00:38:58

нам его необходимо просто отключить

00:38:59

чтобы его отключить опять-таки

00:39:00

обращаемся к самому окном здесь

00:39:03

обращаемся к пасхе лт обращаемся к

00:39:05

свойству который называется авто сайт и

00:39:09

устанавливаем для него значения как фолз

00:39:12

вот соответственно после этого у нас

00:39:14

автоматическое подстраивание ширины и

00:39:17

без ты будет отключена и ну и мы сами

00:39:19

указываем какая ширина и высота у нас

00:39:20

будет давайте запустим и теперь еще раз

00:39:22

проверим как как она у нас все работает

00:39:24

и так вот мы запустили

00:39:26

мы видим что здесь не одессит на

00:39:28

отображаются символы а здесь

00:39:29

отображаться уже

00:39:30

именно пароль выглядит все корректным и

00:39:32

это хорошо давайте мы еще с вами сейчас

00:39:35

добавим эффект при наведении на вот эту

00:39:37

вот кнопку чтобы она меняла цвет когда

00:39:39

мы наводим например на нее

00:39:41

ну и заодно посмотрим еще как можно

00:39:43

реализовывать различные события

00:39:44

итак опять-таки закрыли приложения здесь

00:39:47

эту сводку давайте тоже и и так это

00:39:49

немножко не то что я хотел сделать

00:39:51

прикрепим ее куда-нибудь сюда вниз и

00:39:53

просто закроем

00:39:54

ok смотрите что я хочу сделать я хочу

00:39:57

для вот этой вот кнопки добавить

00:39:59

кое-какие события то есть при наведении

00:40:00

мыши у нас будет меняться и и цвет

00:40:02

текста

00:40:03

когда я мышь буду забирать цвет текста

00:40:05

будет возвращаться обратно

00:40:06

соответственно мне необходимо такое

00:40:08

событие которое называется mouse

00:40:12

enter вот оно здесь находится mouseenter

00:40:14

срабатывать когда мы находим а мышь на

00:40:16

какой-либо объект это может быть и

00:40:18

надпись это может быть более это может

00:40:19

быть все что угодно но чтобы отследить

00:40:21

когда мы заберем мышку то нам

00:40:23

потребуется такое событие как мал слив

00:40:25

она срабатывает тогда когда мы забираем

00:40:27

мышку с какого либо объекта то есть

00:40:28

mouse in the когда мы наводим мало слив

00:40:30

когда мы забираем в принципе здесь есть

00:40:32

гигантское количество других событий не

00:40:34

которые вы будете использовать часто

00:40:36

венге же наоборот очень редко здесь

00:40:38

например си говорить еще про собаки

00:40:40

которая связана с мышкой то здесь

00:40:41

например есть маус хавра это такой же

00:40:43

эффект как и mouse and и пусть при

00:40:45

наведении здесь мы есть mouse click это

00:40:48

просто нажатии на это просто клик на

00:40:50

клик по мышке да например там нажатие на

00:40:53

левую кнопку мыши есть маус дабл клик

00:40:55

когда мы нажимаем два раза на и выкл

00:40:57

клавишу мыши есть маус это например

00:41:00

когда мы только нажали на мышку нажали

00:41:03

на левую кнопку мыши но и еще не

00:41:04

отпустили тогда в этот момент

00:41:05

срабатывает вот это событие а также есть

00:41:08

маус об которая срабатывает в тот момент

00:41:09

когда мы наоборот уже нажали и когда вот

00:41:12

мы отпустили как бы палец мыши в этот

00:41:15

момент сработает маус об ну и например

00:41:17

мало с муфта когда мы находимся на

00:41:18

объекте просто при движении мышки нас

00:41:22

будет срабатывать вот это вот события ты

00:41:24

событие тут реально очень очень много

00:41:26

некоторые какое впечатление что сами

00:41:28

себя повторяют например как маус

00:41:30

мау склейки mouseup до тонкости mouse

00:41:33

click это например полный цикл

00:41:34

нажать это все мы нажали отпустили маус

00:41:37

просто нажали на еще не отпустили a

00:41:39

mouse after bath когда мы нажали и уже

00:41:42

отпустили вот момент когда срабатывает

00:41:46

как раз события вот есть некоторые здесь

00:41:49

я событий которые повторяются ну как бы

00:41:50

повторяется вот но в то же время их тут

00:41:52

реально много так вот смотрите нам

00:41:54

необходимо маус enter мы его выбирать

00:41:57

мы нажимаем два раза на него вот у нас

00:41:59

работу на создается функции который

00:42:01

называется клаус bottom mouseenter вот и

00:42:04

здесь все что нам необходимо делать при

00:42:07

наведении мышки я буду менять цвет

00:42:09

соответственно идя берут это вот клаус

00:42:11

батон соответственно 5 таки беру ее и по

00:42:14

ее айди

00:42:16

я для нее аиде здесь указывал давайте

00:42:18

еще раз я покажу вот как клаус батон

00:42:20

соответственно просто по ее а эдик не

00:42:22

обращаюсь и устанавливать для неё другой

00:42:25

цвет поэтому мне необходимо здесь

00:42:27

обратиться к for color к такому свойств

00:42:30

pack for color это именно цвет текста

00:42:32

также могу уставить и задний фон если

00:42:34

это потребуется то есть до байкала и

00:42:36

оставляем на for color то есть это цвет

00:42:39

текста здесь я обращаюсь к классу color

00:42:41

и через точку я могу выбрать один из уже

00:42:44

предустановленных цветов либо же я могу

00:42:47

выбрать цвет из орбит вставить вот эти

00:42:49

вот три

00:42:50

то есть выбрать цвет и вставить цвет

00:42:53

который будет нас в формате red green

00:42:55

глупость art by красный зеленый и синий

00:42:58

вот в моем случае меня интересует именно

00:43:00

просто какой-то цвет который будет вас

00:43:02

пускай по умолчанию например при

00:43:04

наведении у нас пускай будет эта ссылка

00:43:06

выпускается кнопку быть становиться

00:43:07

зеленого цвета вот так же дополнительно

00:43:11

давайте создадим здесь событиям который

00:43:14

будет срабатывать

00:43:15

когда мы будем забирать мышку

00:43:16

соответственно вот у нас mouse left два

00:43:18

раза нажимаем на это рф и здесь я могу

00:43:20

даже скопировать вот эту вот строчку

00:43:22

кода и здесь мы укажем с вами что когда

00:43:25

мы будем забирать мышку у нас она будет

00:43:28

становиться опять-таки белой потому что

00:43:30

по умолчанию нас от она у нас белая ну

00:43:32

известно такой же она будет становиться

00:43:33

запускаем давайте протестируем что у нас

00:43:36

получилось и так программа запустилась

00:43:38

наводим мышкой мы замечаем что она

00:43:40

действительно становится зеленого цвета

00:43:42

конечно же эффект может быть минной не

00:43:44

наилучший можно было бы и получше стиле

00:43:46

добавить но главная концепцию вы

00:43:48

понимаете да то есть при наведении у нас

00:43:50

работают некое событие в этом событии мы

00:43:52

можем обращаться уже к различным стилям

00:43:55

свойствам важнее задний фон может быть

00:43:57

еще какие-то данные

00:43:59

но в моем случае просто обращусь лишь к

00:44:01

одному свойству это к свойству цвета

00:44:04

текста и его меняю ну и соответственно

00:44:06

если мы нажимаем то конечно же

00:44:08

программка опять-таки назови заверши

00:44:10

это все выглядит корректно и логично

00:44:12

теперь единственное что нам остается

00:44:14

сделать это сделать так чтобы мы могли

00:44:16

передвигать это окно по всему экрану

00:44:19

компьютера и так чтобы это сделать нам

00:44:23

необходимо выбрать панельку основную

00:44:25

некую панель в нашем случае это вот это

00:44:27

вот нижняя панель здесь же для неё мы

00:44:30

заходим в событиям и смотрите концепция

00:44:33

какая бы мы будем просто передвигать эту

00:44:36

панель и в то место где у нас находится

00:44:38

сама мышка при этом мы будем ее двигать

00:44:41

только в том случае есть у нас зажата

00:44:42

левая клавиша выше вот так это будет

00:44:45

работать соответственно нам необходимо с

00:44:48

вами сейчас реализовать следующее

00:44:49

давайте мы возьмем функцию маус события

00:44:52

маус мув нажмем на него два раза вот у

00:44:55

нас создается функция main pen mouse

00:44:57

муфт и здесь будет происходить следующее

00:44:59

во первых стоит сказать о том что здесь

00:45:01

есть в каждой функции два объекта это

00:45:04

некий сендер а также это объект и вот

00:45:08

внутри этого объекта хранятся все

00:45:10

характеристики по поводу самого события

00:45:12

в нашем случае нам этот объект как раз

00:45:14

потребуется делаем проверку смотрите

00:45:17

первое что необходимо понять это на

00:45:19

какую кнопку мы нажали то есть мы мышь

00:45:22

не похоже постоянно двигать эту панельку

00:45:24

вне зависимости от того нажали на кнопку

00:45:27

или нет поэтому первое что мы здесь

00:45:28

должны сделать это мы должны проверить

00:45:30

если мы нажали на кнопку на левую кнопку

00:45:32

мыши в таком случае мы будем двигать

00:45:35

панель чтобы чтобы проверить этом мы

00:45:37

должны взять нашу этот объект и у него

00:45:41

взять значение подан и проверить если

00:45:43

оно равно mouse button at once лев в

00:45:47

таком случае мы знаем что мы нажали на

00:45:49

левую клавишу мыши и можем же что-либо

00:45:52

производить здесь мы давайте реализуем с

00:45:55

вами еще лишь одну переменную она у нас

00:45:59

будет идти от такого класса как point

00:46:01

point это специальный класс для задания

00:46:03

координат и например назовем эту

00:46:06

назовем эту перемену как last and

00:46:10

например вот пока она у нас будет без

00:46:13

каких-либо значений просто так пустая

00:46:15

переменная который идет от класса пор

00:46:17

так вот теперь что мы здесь делаем мы

00:46:19

обращаемся к этому окно

00:46:20

обращаемся к его координате легла

00:46:23

и устанавливаем для нее в следующие

00:46:26

вернее даже не установлен а просто

00:46:27

каждый раз будем добавлять для нее

00:46:29

следующее мы обращаемся к

00:46:31

и дальше координате x вот этому объекту

00:46:34

и обрести обратились к его координате x

00:46:37

по сути мы взяли с вами где находится у

00:46:40

нас мышка потому что мы же с вами сейчас

00:46:42

обрабатываем но как бы движение мышки и

00:46:45

соответственно объект он содержит все

00:46:47

характеристики по поводу мышки поэтому

00:46:50

вы мы с вами обе поняли на что мы нажали

00:46:53

вот это вот событие произошло и

00:46:56

во-вторых мы с вами мы можем отследить

00:46:58

где находится сама кнопка где находится

00:47:01

вернее сам курсор на который год мы

00:47:03

нажали в нашем случае мы берем

00:47:06

координата по иксу

00:47:07

и от нее отнимаем last point .

00:47:10

x пока конечно в этой перемены ничего у

00:47:13

нас нет но чуть позже мы туда добавим

00:47:14

характеристики

00:47:15

дальше мы делаем то же самое для

00:47:17

координате координаты в топ здесь мука с

00:47:20

вами и y но и здесь тоже и y и

00:47:24

дополнительно чтобы это все работало нам

00:47:26

необходимо еще

00:47:27

перейти конструктор здесь создать

00:47:28

события на маус и здесь очень

00:47:32

просто здесь мы будем брать с вами

00:47:34

last one и в него устанавливать новые

00:47:37

координаты new point и здесь получать мы

00:47:40

как бы берем и .

00:47:43

x и дополнительно и . y то есть что

00:47:47

здесь происходит по факту весь

00:47:49

необходимо уже создал что здесь

00:47:51

происходит когда мы нажмем лишь клавишей

00:47:54

мыши у нас вы в перемены устанавливается

00:47:58

место где я нажал на эту где нажал на

00:48:01

мышку в таком случае когда я буду

00:48:05

двигать мышкой у нас как бы с того места

00:48:08

где нажал мышкой будет вестись отчет ну

00:48:12

и то есть например я вот от этого места

00:48:13

или 90 на 10 пикселей например там

00:48:16

вправо и соответственно сама формочка у

00:48:18

нас сама вот это вот поле оно само окно

00:48:21

у нас тоже на 10 пикселей передвинется

00:48:23

то не будет там двигаться от начала

00:48:25

экрана а бы двигаться именно как быть

00:48:28

высчитываться именно те координаты

00:48:29

которые вот у нас были

00:48:32

то есть будет высчитывать координаты от

00:48:34

первоначального нажатия мышки и до того

00:48:37

места где я сейчас нахожусь

00:48:39

при нажатой при зажатой клавише ok

00:48:41

давайте это попробуем протестируем и

00:48:43

посмотрим что у нас получилось итак

00:48:45

смотрите мы нажимаем клавиши мыши

00:48:47

где-нибудь на вот этом вот красном

00:48:49

полотне и соответственно я теперь могу

00:48:51

спокойно двигать это но эту формочку

00:48:54

куда мне только закончится хочу

00:48:56

где-нибудь здесь что-то писать без

00:48:58

проблем хочу нажать на войти без проблем

00:49:00

могу ее закрыть приложение единственное

00:49:02

что если будет нажимать вот здесь

00:49:04

например и пытаться это передвинуть я

00:49:06

сейчас зажал клавишу брать передвинуть у

00:49:08

нас ничего не происходит это просто

00:49:10

из-за того что мы отслеживаем именно

00:49:12

нажатии на вот это вот красное полотно а

00:49:14

это синяя но как бы находится поверх

00:49:16

соответственно если вы хотите чтобы у

00:49:18

вас и на синем тоже срабатывает этот

00:49:21

весь обработчик события вы просто должны

00:49:23

выбрать здесь непосредственно этот синий

00:49:25

ну вот эту синюю панельку и добавить для

00:49:28

неё точно такие же события как мы

00:49:29

прописали для красной панельки тогда все

00:49:31

работает вас будет корректно ну в моем

00:49:34

случае мне пока хватит лишь и вот этой

00:49:36

красной панельки

00:49:37

потому что синие реализуются точно окон

00:49:39

а у analogue

00:49:40

ну что ж у меня на этом все в этом уроке

00:49:43

мы сами создали вот такую вот интересную

00:49:44

формочку довольно немало всяких новых

00:49:47

вещей изучили

00:49:48

ну и на этом все так что увидимся в

00:49:50

следующем уроке до скорых встреч пока

Описание:

В ходе урока мы создадим окно для авторизации пользователя в системе. Мы добавим объекты, пропишем стили, а также создадим различные обработчики событий. По итогу мы получим полностью измененное приложение с хорошим дизайном. 1) Урок на сайте itProger: https://itproger.com/course/csharp-app/2 ✔ Сообщество программистов: https://itproger.com/ ✔ ------------- Вступай в группу Вк - https://vk.com/prog_life 🚀 Группа FaceBook - https://www.facebook.com/unsupportedbrowser Инстаграм itProger: https://www.facebook.com/unsupportedbrowser Instagram: https://www.facebook.com/unsupportedbrowser Telegram: https://t.me/itProger_official Twitter - https://twitter.com/GoshaDudar - Уроки от #GoshaDudar 👨🏼‍💻 - Все уроки по хештегу #goshaWinForms

Готовим варианты загрузки

Популярные

HD видео

Только звук

Все форматы

* — Если видео проигрывается в новой вкладке, перейдите в неё, а затем кликните по видео правой кнопкой мыши и выберите пункт "Сохранить видео как..."

** — Ссылка предназначенная для онлайн воспроизведения в специализированных плеерах

Вопросы о скачивании видео

Как можно скачать видео "Уроки C# .NET Windows Forms / #2 - Создание дизайна для окна авторизации"?

Сайт http://unidownloader.com/ — лучший способ скачать видео или отдельно аудиодорожку, если хочется обойтись без установки программ и расширений. Расширение UDL Helper — удобная кнопка, которая органично встраивается на сайты YouTube, Instagram и OK.ru для быстрого скачивания контента.
Программа UDL Client (для Windows) — самое мощное решение, поддерживающее более 900 сайтов, социальных сетей и видеохостингов, а также любое качество видео, которое доступно в источнике.
UDL Lite — представляет собой удобный доступ к сайту с мобильного устройства. С его помощью вы можете легко скачивать видео прямо на смартфон.

Какой формат видео "Уроки C# .NET Windows Forms / #2 - Создание дизайна для окна авторизации" выбрать?

Наилучшее качество имеют форматы FullHD (1080p), 2K (1440p), 4K (2160p) и 8K (4320p). Чем больше разрешение вашего экрана, тем выше должно быть качество видео. Однако следует учесть и другие факторы: скорость скачивания, количество свободного места, а также производительность устройства при воспроизведении.

Почему компьютер зависает при загрузке видео "Уроки C# .NET Windows Forms / #2 - Создание дизайна для окна авторизации"?

Полностью зависать браузер/компьютер не должен! Если это произошло, просьба сообщить об этом, указав ссылку на видео. Иногда видео нельзя скачать напрямую в подходящем формате, поэтому мы добавили возможность конвертации файла в нужный формат. В отдельных случаях этот процесс может активно использовать ресурсы компьютера.

Как скачать видео "Уроки C# .NET Windows Forms / #2 - Создание дизайна для окна авторизации" на телефон?

Вы можете скачать видео на свой смартфон с помощью сайта или pwa-приложения UDL Lite. Также есть возможность отправить ссылку на скачивание через QR-код с помощью расширения UDL Helper.

Как скачать аудиодорожку (музыку) в MP3 "Уроки C# .NET Windows Forms / #2 - Создание дизайна для окна авторизации"?

Самый удобный способ — воспользоваться программой UDL Client, которая поддерживает конвертацию видео в формат MP3. В некоторых случаях MP3 можно скачать и через расширение UDL Helper.

Как сохранить кадр из видео "Уроки C# .NET Windows Forms / #2 - Создание дизайна для окна авторизации"?

Эта функция доступна в расширении UDL Helper. Убедитесь, что в настройках отмечен пункт «Отображать кнопку сохранения скриншота из видео». В правом нижнем углу плеера левее иконки «Настройки» должна появиться иконка камеры, по нажатию на которую текущий кадр из видео будет сохранён на ваш компьютер в формате JPEG.

Сколько это всё стоит?

Нисколько. Наши сервисы абсолютно бесплатны для всех пользователей. Здесь нет PRO подписок, нет ограничений на количество или максимальную длину скачиваемого видео.